معرفی 19 افزونه کاربردی ویژوال استودیو کد برای توسعه دهندگان Front End

همانطور که میدانید vscode یک ادیتور متن باز قدرتمند است که بین برنامه نویس ها محبوبیت زیادی پیدا کرده و روی سیستم عامل‌های مختلف ویندوز، مک و لینوکس نصب می شود. اما بهترین افزونه های ویژوال استودیو کد برای توسعه دهندگان فرانت اند چیست؟ چگونه افزونه های ادیتور را نصب کنیم؟

در این مقاله قصد داریم به معرفی بهترین افزونه های visual studio code و نحوه نصب پلاگین ها vscode بپردازیم. لطفا شما هم تجربه کار خودتون رو با هر کدوم از افزونه های مورد علاقتون در کامنت ها به اشتراک بزارید.

فهرست مطالب:

• Visual Studio Code چیست
• نصب افزونه ها
• اسنیپست و سبک کد
• ادغام با گیت
• لینتر و هایلایت syntax
• بهبود ویرایشگر
• قالب‌ها و سرگرمی

Visual Studio Code چیست؟

ویژوال استودیو کد یک ویرایشگر کد متن باز برای لینوکس، مک و ویندوز است که از زبان های PHP ، JavaScript، ASP.NET و Java و بسیاری از زبان های دیگر پشتیبانی می کند.
vscode قابلیت شخصی سازی بالایی دارد که باعث شده صدها افزونه (extension) زبان های برنامه نویسی مانند سی پلاس پلاس، سی شارپ، جاوا، پایتون، php و…. ساخته شود و در مارکت آن قرار بگیرد. VSCode یک codr editor است اما برخی از افراد تصور می کنند که یک IDE می باشد.

تفاوت IDE ها و ویرایشگرها (code editor) در چیست؟

IDE ها (Intergrated Development Enviroment) یا محیط توسعه یکپارچه نرم افزار های کاملی هستند که امکاناتی مثل Debugger ، Auto Complete، Highlighting و ابزار اجرا و خروجی گرفتن و… را دارند و بدون نیاز به نصب هیچ پلاگینی، کامل هستند. هر IDE معمولا مختص و مخصوص یک زبان برنامه نویسی است و تمرکز تمامی ابزار ها و امکانات بر روی یک زبان است.

اما ویرایشگرها (code editor) معمولا تعداد بسیار بالایی از زبان های برنامه نویسی را پشتیبانی می کنند و نسبت به IDE ها سبکتر و سریع تر هستند و هرنوع کدی را تشخیص میدهند. ویرایشگر ها تمام ابزار ها را ندارند و برای داشتن قابلیت های  مختلف باید افزونه های مختلفی را نصب کرد.

نصب افزونه در ویژال استودیو کد

جستجو و نصب افزونه های کار بسیار ساده ای است. اگر سیستم عامل شما مک است از دکمه های ترکیبی cmd + shift + x و برای ویندوز از دکمه های ctrl + shift + p استفاده کنید و یا شما می توانید روی آیکون Extensions که در نوار Activity در سمت چپ ویژوال استودیو می باشد کلیک کنید تا پنل  Extensions برای شما نمایش داده شود، بعد از انتخاب افزونه روی دکمه Install کلیک کنید تا افزونه شما نصب شود.

همچنین می توانید با فشردن دکمه های ترکیبی ctrl + shift + p در سیستم عامل ویندوز و cmd + shift + p در  OSX از Command Palette عبارت Install extensions را تایپ کنید تا پنل Extensions برای شما نمایش  داده شود.

البته شما علاوه براینکه می توانید در ویژال استودیو کد جستجو کنید.  در VS Code Extension Marketplace هم می توانید اکستنش خودتان را پیدا کنید.

نکته: بعد از نصب افزونه جدید لازم است که ویژال استودیو کد را دوباره راه اندازی کنید تا افزونه برای شما فعال شود.

Settings Sync -1

این اکستشن یکی از مهمترین افزونه هاست قبلا با نام Visual Studio Code Settings Sync شناخته می شد، برای همگام سازی تنطیمات، اسنیپست‌ها، قالب‌ها، کلیدهای میانبر، فضاهای کاری، اکستنشن‌ها و… را در میان دستگاه‌های مختلف استفاده می‌شود و می توانید همه ابزارهایی که به آنها نیاز دارید را یکجا داشته باشید.

اسنیپست و سبک کد

اسنیپست‌ها بسیار ساده هستند تعداد زیادی اسنیپست ها به‌صورت پیش‌فرض در vscode وجود دارند. برای فعال کردن اسنیپست ها کافی است دکمه های ترکیبی Ctrl + Space را همزمان فشار دهید تا پالت فرمان (Command Palette) به همراه پیشنهادات برای شما نمایش داده شود.

شما میتوانید در Command Palette عبارت Insert Snippet را تایپ کنید و یک اسنیپست را انتخاب کنید یا از طریق TextMate snippet syntax اسنیپست مورد نظر را ایجاد کنید. همچنین از طریق اکستشن ها میتوانید بارگیری کنید.در ادامه برخی از افزونه های اسنیپست ها را معرفی می کنیم.

Shopify Liquid Template Snippets -2

افزونه Shopify Liquid Snippets Snippets شامل اسنیپت های مختلف Liquid برای سرعت بخشیدن به توسعه قالب ها استفاده می شود.بعد از اینکه این افزونه را نصب کردید بخشی از کلید واژه اسنیپست را تایپ کنیدو Enter یا Return را بزنید و همچنین در سیستم عامل ویندوز و لینوکس با دکمه های ترکیبی ctrl + space و در OSX با cmd + space می توانید اسنیپست ها را فعال کنید.

3- Trailing Spaces

افزونه Trailing Spaces دقیقاً همان کاری را که اسم توصیف می کند انجام می دهد، یعنی به شما این امکان را می دهد تا فضاهای انتهایی را برجسته کرده و به سرعت آنها را حذف کنید. این افزونه، یک پورت از پلاگین محبوب Sublime Text Trailing Spaces است و حذف سریع فضاهای انتهایی، اصلاح و ذخیره و موارد دیگر را انجام می دهد.

Blank Line at the End of File -4

یک افزونه بسیار کوچک و فوق العاده ساده است که در انتهای هر فایل ذخیره شده یک خط خالی اضافی، به آن اضافه می کند.

سینتکس و لینتر های هایلایت کننده

در یک تیم ممکن است که از کدام سبک کدگذاری استفاده کنید با هم تیمی های خود بحث کرده باشید همه افراد در یک تیم بدون در نظر گرفتن نظر خود، باید از یک شیوه کدگذاری استفاده کنند. برای اجرای قوانین از لنترها استفاده می کنیم ک که کد شما را با قوانینی که تعیین کرده اید مقایسه می کند و به شما کمک میکند خطاهای ظریف برنامه نویسی مانند استفاده از یک متغیر یا فراخوانی توابع تعریف نشده، پرانتزهایی که فراموش می شوند و.. راتشخیص دهد.

Liquid -5

افزونه Liquid برای کسانی که با استفاده از VS Code تم های Shopify را توسعه می دهند ، ضروری است. اگرچه از آیکون های نوار کناری برای تمیز کردن پرونده های آماده Liquid پشتیبانی می شود، VS Code بدون کمک این افزونه برجسته سازی نحوی را برای Liquid ندارد. این افزونه برجسته سازی نحوی را برای Liquid اضافه می کند و به عنوان پشتیبانی از افزونه Shopify Liquid Snippets عمل می کند. همچنین از بلوک های کد بخش و تکمیل خودکار قطعه برای برچسب ها و فیلترهای Liquid پشتیبانی می کند.

stylelint -6

stylelint افزونه ای است که CSS ، SCSS و Less را لینت می کند. این افزونه را با پیکربندی تنظیمات میتوان طوری کنترل کرد که stylelint برای زبان های مختلف فعال یا غیر فعال باشد.

7- ESLint

افزونه ESLint را در vscode ادغام میکند ولی قبل از آن بهتر است بصورت محلی یا سراسری ESLint را روی سیستم خود نصب کنید. این کار را از طریق npm با استفاده از npm install -g eslint می‌توان انجام داد. ESLint  به برنامه نویس ها این امکان را می‌دهد که از اشتباهات مرسوم که در سینتکس برنامه‌ها رخ می‌دهد خودداری و جلوگیری کند. دستورالعمل و تنظیمات پیکربندی و نصب دقیقتر در صفحه بازار اکستشن ویژال استودیو کد وجود دارد.

8- TSLint

این نسخه جدید TSLint مشابه افزونه است، به این معنی که شما قبلاً TSLint را به صورت لوکال در یک پروژه یا به صورت گلوبال در رایانه خود نصب کرده اید. این افزونه TSLint را برای زبان TypeScript در VS Code ادغام می کند.

ادغام با گیت

ادغام ترمینال به طور خودکار با ویژال استودیو کد ارائه می شود ، و انجام تغییرات بدون نیاز به ترک ویرایشگر را آسان تر کرده. کافیست از دکمه های ترکیبی ^ + را برای باز کردن ترمینال یکپارچه از داخل VS Code استفاده کنید.

برنامه نویس ها تغییراتی را که در کد خودشان را میدهند نیاز دارند که پیگیری کنند و برای این کار چه راهی بهتر از گیت است؟در اینجا یکی از مفید ترین اکستشن ویژال استودیو کد وجود دارد که به شما کمک می کندگیت به طور کامل در vscode ادغام شود.

9- GitLens

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

بهبود ویرایشگر

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

Path Intellisense -10

افزونه Path Intellisense برای تکمیل خودکار نام فایل بکار می رود.این افزونه هنگامی که مسیرها را زبان نشانه‌گذاری می‌نویسیم و همچنین در هر فایلی که نیاز به ارجاع مسیر وجود دارد مفید است.

11- IntelliSense for CSS class names

اکستنشن IntelliSense for CSS class names به تکمیل کردن خودکار نام کلاس‌ها برای خصوصیت کلاس HTML با بررسی تعاریف کلاس CSS در فضای کاری و فایل‌های خارجی ارجاع یافته در اجزای link کمک می‌کند.

12- Css Peek

شما میتوانید با نصب این افزونه روی selectorدر html کلیک راست کرده و گزینه ی Go to Definition and Peek definition را انتخاب کنید. سپس شما را به مکان تعریف class و idهای css درفایل استایل شیت میبرد. با نصب این افزونه دیگر نیازی نیست بین فایل های html , css جابه جا بشم.

13- Guides

افزونه Guides برای تو  رفتگی در ویرایشگر کد استفاده می شود که از تو رفتگی خود ویژال استودیو متفاوت است. امکاناتی مانند راهنمای تورفتگی پشته و فعال، پس زمینه های تو رفتگی را دارد  که میتوانیم رنگ و سبک را شخصی سازی کینم.

14-Debugger for Chrome

این افزونه ابزاری برای همگام کردن دیباگر مربوط به کروم و دیباگر ویژوال استدیو کد است.با استفاده از url میتوانیم به vscode بگوییم که کدام url در کروم اجرا شود.

Instant Markdown -15

افزونه Instant Markdown به شما امکان می دهد اسناد Markdown را در VS Code ویرایش کرده و بلافاصله پیش نمایش آنها را در مرورگر خودتان مشاهده کنید. برای ویرایش فایل های readme و سایر اسناد نوشته شده در Markdown بسیار مفید است.

open in browser -16

ویژال استودیو کد گزینه ای برای باز کردن مستقیم فایل ها در مرور گر را نشان نمیدهد اما با نصب این افزونه امکان مشاهده یک فایل html را در مرور گر پیش فرض سیستم را خواهیم داشت. شما می توانید با راست کلیک کردن گزینه ” open in other browsers ” یا از command palette مرور گر مورد نظرتان برای باز شدن انتخاب کنید.

قالب ها و سرگرمی 🌈

مهمترین ترین افزونه های ویژوال استودیو کد قالب های آن هستند. توسعه دهندگان وب هر روز با ادیتورشان کار میکنند میتوانندظاهر ویرایشگرشان را با شخصی سازی و تغییر رنگ و…به محیطی جذاب و سرگرم کننده در بیاورنددر ادامه به معرفی چند افزونه و تم مخصوص کاربران ویژال استودیو کد می پردازیم.

Rainbow Brackets -17

این افزونه رنگ های رنگین کمان را به براکت ها، پرانتز ها و آکولاد ها اضافه می کند و برای کسانی که با جاوااسکریپت کار میکنند افزونه محبوبی است.

Indent Rainbow -18

Indent Rainbow یک افزونه ساده است که تورفتگی های قبل کد شما را رنگ می کند و در هر مرحله رنگ ها عوض می شوند. اگر کد را برای Python یا Nim می نویسید برای آسانتر خواندن کد به این افزونه حتما نیاز خواهید داشت.

Atom-inspired themes -19

ممکن است vscode اولین ویرایشگری که از آن استفاده میکنید نباشد و قبل آز آن با ویرایشگر های دیگر کارکرده باشید. محبوب‌ترین قالب‌ها معمولاً آنهایی هستند که از ویرایشگرهای دیگر مانند Atom پورت شده‌اند. در اینجا 3 مورد از محبوب ترین تم هایویژال استودیو کد که از Atom پورت شده اند آورده ایم:

• Atom One Dark Theme
• Atom One Light Theme
• One Dark Pro

لطفا شماهم افزونه های کاربردی که از VSCode میشناسید در کامنت ها با ما به اشتراک بگذارید.

منابع

1. marketplace.visualstudio.com
2. www.shopify.com