میانبر های vscode و معرفی 10 اکستنشن کاربردی آن🩵

در این مقاله قصد داریم به بررسی میانبرهای کاربردی در Visual Studio Code (VSCode) بپردازیم و همچنین بهترین اکستنشن‌های آن را معرفی کنیم. اگر شما هم از توسعه‌دهندگانی هستید که از VSCode به عنوان ویرایشگر اصلی خود استفاده می‌کنید، آشنایی با این میانبرها و اکستنشن‌ها می‌تواند به شما کمک کند تا کدنویسی سریع‌تر و موثرتری داشته باشید.

بخش اول: میانبرهای کاربردی در VSCode

در این بخش به معرفی میانبرهایی خواهیم پرداخت که کار شما را در VSCode سریع‌تر می‌کنند. این میانبرها به دسته‌های مختلفی تقسیم می‌شوند، مانند مدیریت فایل‌ها، کدنویسی، دیباگینگ و ... .

1. مدیریت فایل‌ ها و پروژه‌ ها:

• باز کردن فایل جدید: با استفاده از میانبر Ctrl + N می‌توانید یک فایل جدید باز کنید.
• باز کردن پروژه: با فشار دادن Ctrl + K و سپس O، می‌توانید یک پوشه جدید را به عنوان پروژه باز کنید.
• ذخیره فایل: برای ذخیره سریع فایل از Ctrl + S استفاده کنید. اگر می‌خواهید همه فایل‌های باز را ذخیره کنید، از Ctrl + K و سپس S استفاده کنید.
• بستن فایل: با فشار دادن Ctrl + W می‌توانید فایل فعلی را ببندید.
• جابجایی بین فایل‌ها: برای جابجایی سریع بین فایل‌های باز از میانبر Ctrl + Tab استفاده کنید.

2. ویرایش کد:

• انتخاب خط: با استفاده از Ctrl + L می‌توانید خط فعلی را انتخاب کنید.
• انتخاب کلمه: برای انتخاب کلمه‌ای که نشانگر روی آن قرار دارد، می‌توانید از Ctrl + D استفاده کنید.
• کامنت‌گذاری/حذف کامنت: برای کامنت‌گذاری سریع کدها از Ctrl + / استفاده کنید.
• جابجایی خط: با استفاده از Alt + Up/Down می‌توانید خط فعلی را به بالا یا پایین جابجا کنید.
• یافتن و جایگزینی: برای جستجو در فایل از Ctrl + F و برای جایگزینی از Ctrl + H استفاده کنید.

3. میانبرهای دیباگینگ:

• شروع دیباگ: برای شروع دیباگ از F5 استفاده کنید.
• توقف دیباگ: با فشار دادن Shift + F5 می‌توانید دیباگ را متوقف کنید.
• پیش‌روی مرحله‌ای: برای پیش‌روی در دیباگ از F10 استفاده کنید.
• ادامه اجرای کد: با F5 می‌توانید اجرای کد را ادامه دهید.

4. تنظیمات و محیط کاربری:

• باز کردن تنظیمات: با استفاده از Ctrl + , می‌توانید تنظیمات VSCode را باز کنید.
• نمایش/مخفی کردن پنل کناری: با فشار دادن Ctrl + B می‌توانید پنل کناری (که شامل فایل‌ها و دیگر موارد است) را مخفی یا نمایش دهید.
• نمایش/مخفی کردن ترمینال: برای نمایش یا مخفی کردن ترمینال داخلی از `Ctrl + `` استفاده کنید.

5.میانبر های عمومی:

• Ctrl + P: باز کردن فایل بر اساس نام.
• Ctrl + Shift + P یا F1: باز کردن "Command Palette" برای اجرای دستورات مختلف.
• Ctrl + ,: باز کردن تنظیمات (Settings).
• Ctrl + B: نمایش یا پنهان کردن نوار کناری (Sidebar).

6.میانبر های ویرایش کد:

• Ctrl + X: بریدن (Cut) خط فعلی (اگر هیچ متنی انتخاب نشده باشد).
• Ctrl + C: کپی کردن خط فعلی (اگر هیچ متنی انتخاب نشده باشد).
• Ctrl + /: کامنت یا آن‌کامنت کردن خط یا خطوط انتخاب شده.
• Ctrl + ]: جلو بردن تورفتگی (Indentation) خط یا خطوط انتخاب شده.
• Ctrl + [: عقب بردن تورفتگی (Indentation) خط یا خطوط انتخاب شده.
• Ctrl + D: انتخاب کلمه فعلی و دیگر کلمات مشابه.
• Ctrl + L: انتخاب خط فعلی.
• Ctrl + Enter: اضافه کردن خط جدید در زیر خط فعلی.
• Ctrl + Shift + Enter: اضافه کردن خط جدید در بالای خط فعلی.

7.میانبرهای پیمایش:

• Ctrl + G: رفتن به شماره خط مشخص.
• Ctrl + T: جستجو و رفتن به نماد (Symbol) در فایل‌های پروژه.
• Ctrl + Tab: جابجایی بین فایل‌های باز شده اخیر.
• Alt + ←: رفتن به موقعیت قبلی (Back).
• Alt + →: رفتن به موقعیت بعدی (Forward).

8.میانبرهای مدیریت چند خطی:

• Alt + Click: اضافه کردن مکان‌نما (Cursor) چندگانه.
• Ctrl + Alt + ↑ یا Ctrl + Alt + ↓: اضافه کردن مکان‌نما (Cursor) در خط بالا یا پایین.

9.میانبرهای مدیریت پنجره و نمایش:

• Ctrl + \: تقسیم ویرایشگر به صورت عمودی.
• Ctrl + 1, Ctrl + 2, ...: تمرکز روی گروه ویرایشگر مشخص (از چپ به راست).
• Ctrl + W: بستن پنجره‌ی فعلی.
• Ctrl + Shift + W: بستن همه‌ی پنجره‌ها.

10.میانبرهای جستجو و جایگزینی:

• Ctrl + F: باز کردن جستجو در فایل فعلی.
• Ctrl + H: باز کردن جستجو و جایگزینی در فایل فعلی.
• Ctrl + Shift + F: جستجو در کل پروژه.
• Ctrl + Shift + H: جستجو و جایگزینی در کل پروژه.

11.میانبرهای دیباگ و اجرای کد:

• F5: شروع یا ادامه‌ی دیباگ.
• Shift + F5: توقف دیباگ.
• F9: تنظیم یا حذف نقطه‌ی توقف (Breakpoint).
• F10: اجرای خط به خط (Step Over).
• F11: ورود به داخل یک تابع (Step Into).
• Shift + F11: خروج از یک تابع (Step Out).

بخش دوم: معرفی بهترین اکستنشن‌ های VSCode

اکستنشن‌ها ابزارهایی هستند که قابلیت‌ها و امکانات بیشتری به VSCode اضافه می‌کنند. در این بخش به معرفی بهترین اکستنشن‌ های VSCode خواهیم پرداخت که می‌توانند به شما در کدنویسی و توسعه پروژه‌ها کمک کنند.

1. Prettier - Code Formatter

یکی از معروف‌ ترین اکستنشن‌ ها برای فرمت کردن کدها، Prettier است. این ابزار به شما کمک می‌کند تا کدهای خود را به شکل خواناتر و مرتب‌ تری بنویسید. به طور مثال، اگر کد شما نامرتب باشد، با فشردن Ctrl + Shift + P و انتخاب گزینه Format Document with Prettier، کد شما به صورت خودکار فرمت می‌شود.

2. ESLint

ESLint یکی از بهترین ابزارها برای پیدا کردن خطاهای کدنویسی است. این اکستنشن به صورت خودکار کدهای شما را آنالیز کرده و مشکلات موجود در آن را نمایش می‌دهد. به طور مثال، اگر شما یک متغیر تعریف کرده ولی از آن استفاده نکنید، ESLint این مشکل را به شما نشان خواهد داد.

3. GitLens

اگر با گیت (Git) کار می‌کنید، GitLens یکی از ضروری‌ترین اکستنشن‌ها برای شماست. این ابزار به شما اطلاعات دقیق‌تری از تغییرات در فایل‌ها، تاریخچه کامیت‌ها و نویسنده هر خط از کد را می‌دهد. به طور مثال، می‌توانید ببینید که چه کسی آخرین بار یک خط خاص از کد را تغییر داده است.

4. Live Server

Live Server یک اکستنشن بسیار کاربردی برای توسعه‌دهندگان وب است. این ابزار به شما امکان می‌دهد تا به صورت زنده تغییرات در کد HTML، CSS و JavaScript را مشاهده کنید. با نصب این اکستنشن و اجرای آن، هر تغییری که در کدها انجام دهید، به صورت زنده در مرورگر نمایش داده می‌شود.

5. IntelliSense for CSS class names in HTML

این اکستنشن به شما کمک می‌کند تا کلاس‌های CSS را سریع‌تر و دقیق‌تر در فایل‌های HTML خود بنویسید. به طور مثال، وقتی شروع به نوشتن کلاس‌های CSS در HTML می‌کنید، این اکستنشن به صورت خودکار پیشنهاداتی برای تکمیل نام کلاس‌ها به شما می‌دهد.

6. Bracket Pair Colorizer

این اکستنشن برای توسعه‌دهندگانی که با زبان‌هایی مانند JavaScript، Python، C# و ... کار می‌کنند بسیار مفید است. Bracket Pair Colorizer به شما کمک می‌کند تا جفت‌های براکت‌ها ({} و []) را با رنگ‌های مختلفی نمایش دهید، که این امر خوانایی کد را بهبود می‌بخشد.

7. Material Icon Theme

این اکستنشن آیکون‌های زیبا و متفاوتی برای فایل‌ها و پوشه‌های شما اضافه می‌کند که به تشخیص سریع‌تر و راحت‌تر فایل‌ها کمک می‌کند. به طور مثال، فایل‌های JavaScript با یک آیکون زرد رنگ نمایش داده می‌شوند و فایل‌های HTML با آیکونی قرمز رنگ.

8. Path Intellisense

Path Intellisense به شما کمک می‌کند تا هنگام وارد کردن مسیر فایل‌ها و پوشه‌ها در کدهای خود، پیشنهاداتی برای تکمیل مسیر به شما ارائه دهد. به طور مثال، وقتی شروع به نوشتن ./src/ می‌کنید، این اکستنشن به شما مسیرهای ممکن را پیشنهاد می‌دهد.

9. Auto Close Tag و Auto Rename Tag

این دو اکستنشن به شما کمک می‌ کنند تا در فایل‌ های HTML، XML یا JSX، تگ‌ها به صورت خودکار بسته شوند و هنگام تغییر نام یک تگ، نام تگ بسته شده نیز به صورت خودکار تغییر کند. به طور مثال، اگر تگ <div> را به <section> تغییر دهید، تگ بسته شده نیز به <section> تغییر خواهد کرد.

10. vscode-icons

این اکستنشن مشابه Material Icon Theme است اما با آیکون‌های متفاوت. با نصب این اکستنشن، آیکون‌های متنوعی برای انواع فایل‌ها و پوشه‌ها در VSCode خواهید داشت که به شما کمک می‌کند تا فایل‌ها و پوشه‌های خود را سریع‌تر پیدا کنید.

نتیجه‌ گیری:

استفاده از میانبرها و اکستنشن‌ های مناسب در VSCode می‌ تواند به طور قابل توجهی بهره‌ وری شما را در کدنویسی و توسعه پروژه‌ ها افزایش دهد. در این مقاله سعی کردیم تا به معرفی کاربردی‌ ترین میانبرها و بهترین اکستنشن‌ های VSCode بپردازیم. با استفاده از این ابزارها، می‌توانید تجربه کار با VSCode را بهبود بخشیده و کدهای خود را سریع‌تر و موثرتر بنویسید.

توجه داشته باشید که این تنها گوشه‌ای از امکانات و قابلیت‌های VSCode است و این ویرایشگر با پشتیبانی از انواع زبان‌ های برنامه‌نویسی و اکستنشن‌ های مختلف، یکی از بهترین انتخاب‌ ها برای توسعه‌ دهندگان است. امیدواریم که این مقاله به شما کمک کرده باشد تا از VSCode بهره‌ وری بیشتری داشته باشید.