‏code-inspector: با کلیک رو صفحه می‌ری رو کدش

code-inspector یه پلاگین بیلده که فاصله‌ی بین چیزی که رو مرورگر می‌بینی و کدی که اونو ساخته رو از بین می‌بره. وقتی نصبش می‌کنی و پروژه رو بالا میاری، با نگه داشتن یه کلید ترکیبی و کلیک رو هر المانی، به‌جای گشتن دستی تو فایل‌ها، ادیتورت خودش باز می‌شه و کرسر دقیقاً می‌ره رو همون خط کدی که اون تیکه از صفحه رو ساخته.

روی مک با Option + Shift و رو ویندوز با Alt + Shift، وقتی موس رو می‌بری رو صفحه، یه لایه‌ی راهنما رو المان‌ها می‌افته و اطلاعاتشون رو نشون می‌ده؛ با کلیک، مسیر فایل و شماره‌ی خط مستقیم تو ادیتور باز می‌شه. کنسول مرورگر هم موقع اجرا کلیدهای ترکیبی رو یادآوری می‌کنه، برای همینم لازم نیست از حفظ باشی.

این پلاگین رو باندلرهای webpack، vite، rspack/rsbuild، farm، esbuild، turbopack و mako کار می‌کنه، و سمت فریم‌ورک هم vue2/vue3/nuxt، react/nextjs/umijs، preact، solid، qwik، svelte و astro رو پوشش می‌ده؛ یعنی تقریباً تو هر استک فرانت‌اند رایجی می‌شه نصبش کرد، بدون اینکه پیکربندی خاصی جز اضافه کردن پلاگین بخواد.

نصبش هم ساده‌ست: با npm i code-inspector-plugin -D (یا yarn/pnpm) اضافه‌ش می‌کنی، بعد تو کانفیگ باندلرت پلاگین رو صدا می‌زنی. مثلاً تو ویت اینجوری می‌شه:

import { defineConfig } from 'vite';
import { codeInspectorPlugin } from 'code-inspector-plugin';

export default defineConfig({
  plugins: [codeInspectorPlugin({ bundler: 'vite' })],
});

پروژه اوپن‌سورسه، مستنداتش به دو زبون چینی و انگلیسی موجوده و برای اکثر فریم‌ورک‌ها هم دموی آنلاین داره که بدون نصب می‌شه امتحانش کرد.

نکات کلیدی:

• با کلیک رو المان تو مرورگر مستقیم می‌ری رو خط کدش تو ادیتور
• کلید ترکیبی: مک Option+Shift، ویندوز Alt+Shift
• از webpack، vite، rspack، esbuild و turbopack پشتیبانی می‌کنه
• رو ری‌اکت، ویو، Next.js، Svelte، Solid و Astro هم کار می‌کنه
• نصب با یه خط دستور: npm i code-inspector-plugin -D