معرفی 10 افزونه برتر ویژوال استودیو کد در سال 2021

نرم افزار ویژوال استودیو visual studio code یکی از محبوب ترین ادیتورها در جامعه توسعه دهندگان وب است. یکی از دلایل محبوبیت ویژوال استودیو کد تعداد زیاد extension در این نرم افزار است که باعث افزایش سرعت توسعه اپلیکیشن و وب سایت شده است.

بهترین افزونه های Visual Studio Code:

در این مقاله 10 مورد از بهترین extensionهای ویژوال استودیو کد را معرفی و بررسی می کنیم. هدف از این افزونه ها، افزایش امکانات نرم افزار و راحت تر کردن فرآیند توسعه نرم افزار می باشد extension هایی که در این مقاله معرفی خواهیم کرد عبارتند از:

1- افزونه Auto Rename Tag:

افزونه Auto Rename Tag یکی از کاربردی ترین افزونه ها برای توسعه دهنده های وب است. همانطور که از نامش پیداست افزونه Auto Rename Tag با تغییر نام ابتدای تگ (opening tag)، انتهای تگ (closing tag) نیز طبق آن تغییر نام پیدا می کند و برعکس. به تصویر زیر دقت کنید:

این extension نه تنها در نوشتن کدهای html بلکه در کدنویسی react هم کمک کننده خواهد بود. به دلیل JSX:

در مثال های فوق فقط یک متن در داخل تگ تعریف شده است اما در یک پروژه واقعی احتمالا چندین تگ تو در تو یا nested خواهیم داشت و rename کردن تگ ها در اینحالت دشوارتر خواهد بود. اما بوسیله Auto Rename Tag Extension فرآیند تغییر نام تگ ها بسادگی انجام می گیرد.

اکستنشن Auto Rename Tag در نرم افزار visual studio code در زمان نگارش مقاله، بیش از 4 میلیون و 800 هزار دانلود داشته و نسخه آن 0.1.6 می باشد.

2- افزونه Bracket Pair Colorizer:

افزونه Bracket Pair Colorizer کارش اینست که تگ های آغاز و پایان یک تگ را با رنگ یکسان مشخص می کند. در صورتی که در پروژه تان توابع، کامپوننت و تگ های تودرتوی زیادی داشته باشید پیدا کردن تگ های بسته مرتبط با تگ باز دشوار خواهد بود. اما به این روش می توان تگ باز و بسته مرتبط به هم را به آسانی و با استفاده از رنگ پیدا کرد.

برای مثال در تصویر زیر چند فانکشن تعریف شده است:

همانطور که مشاهده می کنید تمایز قائل شدن بین تگ های شروع و پایان، مثلا پرانتز یا آکولاد، دشوار است. اما اگر افزونه Bracket Pair Colorizer را نصب کنیم تصویر زیر را خواهیم داشت:

در اینحالت در خطی که Start نوشته شده، علامت آکولاد باز با رنگ زرد مشخص شده و آکولاد بسته آن نیز در خط End با همین رنگ مشخص شده است. به همین منوال سایر پرانتزها، آکولادها نیز براحتی قابل تشخیص هستند.

اکستنشن Bracket Pair Colorizer در نرم افزار visual studio code در زمان نگارش مقاله، بیش از 4 میلیون و 700 هزار دانلود داشته و نسخه آن 1.0.61 می باشد.

3- افزونه های Snippets:

این افزونه ها بهترین ابزار برای افزایش بهره وری در کدنویسی و صرفه جویی در زمان می باشند. Snippet یک افزونه واحد و مشخص نیست. بلکه شما باید با توجه به پروژه تان و زبان برنامه نویسی موردنظر، یک یا چند افزونه snippet را در ویژوال استودیو نصب کنید.

در بخش زیر برخی از افزونه های اسنیپت رایج را معرفی می کنیم:

بعنوان مثال برای تابع Ajax تصویر گیف زیر را خواهیم داشت.

در کتابخانه ریکت، ممکن است در پروژه ده ها یا حتی صدها فانکشنال کامپوننت داشته باشیم. اینکه بخواهیم هر بار ساختار functional component ریکت را بصورت دستی کد بزنیم سخت و زمان بر خواهد بود. با نصب افزونه ES7 React/Redux/GraphQL/React-Native snippets و تایپ حروف rfc و زدن کلید tab براحتی می توانید بلاک کد یک کامپوننت تابعی را پیاده سازی کنید. Rfc مخفف عبارت react functional component است.

یا برای دستور import ریکت می توان کلمه imr را نوشت و تب زد. خروجی import React from ‘react’ خواهد بود. یا دستور import ریکت دام می توان کلمه imrd را نوشت. خروجی import ReactDOM from ‘react-dom’ خواهد بود. پس افزونه های snippet سرعت کدنویسی را افزایش خواهند داد.

اکستنشن ES7 React/Redux/GraphQL/React-Native snippets در نرم افزار visual studio code در زمان نگارش مقاله، بیش از 2 میلیون و 400 هزار دانلود داشته و نسخه آن 3.1.1 می باشد و از 5 ستاره، 4.5 ستاره از کاربران دریافت کرده است.

4- افزونه Better Comments:

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

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

توسط افزونه better comments می توان کامنت ها را به دسته های مختلف alerts, queries, to-dos, highlights و… بخش بندی کرد. به این منظور باید پس از دو تا اسلش یعنی // یکی از عبارات زیر را نوشت:

* برای هایلایت کردن متون
! برای نمایش error و warning
? برای کوئری ها و سوالات
// برای strikethrough
TODO برای to-do ها

اکستنشن Better Comment در نرم افزار visual studio code در زمان نگارش مقاله، بیش از 1 میلیون و 500 هزار دانلود داشته و نسخه آن 2.1.0 می باشد.

5- افزونه Markdown All in One:

افزونه Markdown یک افزونه جامع است برای انجام کارهای auto-preview و shortcuts و autocomplete و…

از سال 2004 که ارائه شد، Markdown به یکی از محبوب ترین زبان های نشانه گذاری یا markup language تبدیل شد. در سراسر جهان، نویسندگان technical یا فنی از Markdown برای بلاگ ها و داکیومنت های خود استفاده می کنند. بدلیل سادگی، سبکی و پشتیبانی از چند پلتفرم مختلف.

بعنوان مثال برای ضخیم کردن (bold) یک متن در Markdown می توانید مطابق تصویر زیر متن موردنظر را سلکت کرده و دکمه های ctrl + b را بزنید. یا برای ایتالیک کردن باید دکمه های ctrl + i را بفشارید.

اکستنشن Markdown All in One در نرم افزار visual studio code در زمان نگارش مقاله، حدود 2 میلیون و 300 هزار دانلود داشته و نسخه آن 3.4.0 می باشد.

6- افزونه های Icon:

داشتن آیکون های توصیفی یا descriptive برای فایل ها و فولدرهای پروژه می تواند فرآیند توسعه اپلیکیشن را جذاب تر و بصری تر کند. در ویژوال استودیو می توان با کمک افزونه های آیکون، برای فرمت های مختلف آیکون های مشخصی داشت. مثلا تمام فایل های html با لوگوی نارنجی رنگ html5 مشخص می شوند. تصویر زیر را مشاهده کنید:

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

Vs code چندین افزونه در زمینه آیکون دار شدن فایل ها و فولدرهای پروژه ها ارائه می کند که در بخش زیر تعدادی از معروف ترین آنها را لیست کرده ایم:

7- افزونه Prettier:

افزونه prettier یک فرمت کننده کد یا code formatter است. با بیش از 39 هزار ستاره در سایت Github یکی از محبوب ترین افزونه های ویژوال استودیو کد برای فرمت دهی به کدها می باشد. به بلاک کد زیر دقت کنید:

احتمالا در تصویر بالا متوجه ایرادات نگارشی شده اید. سه مورد زیر:

ترکیب استفاده از single & double quote. مثلا خطوط 1 و 3
درج سمی کالن در برخی از دستورات
تورفتگی یا indentation اشتباه در خط 6

در تصویر گیف زیر نشان دادیم که افزونه prettier چگونه مشکلات فوق را براحتی برطرف می کند:

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

اکستنشن Prettier در نرم افزار visual studio code در زمان نگارش مقاله، بیش از 11 میلیون بار دانلود شده و نسخه آن 5.9.2 می باشد.

8- افزونه Import Cost:

افزونه import cost سایز تقریبی هر import را به توسعه دهنده نمایش می دهد. یعنی می گوید هر پکیجی که ایمپورت شده چه مقدار فضا را اشغال می کند. هنگام توسعه اپلیکیشن مهم است که پکیج های سنگین را به پروژه import نکنیم. به تصویر زیر توجه کنید:

وقتی حجم یک package بسیار زیاد باشد، افزونه import cost به منظور اخطار دادن آن را با رنگ قرمز نمایش می دهد. می توان در تنظیمات این افزونه تعریف کرد که چه سایزهایی در محدوده large می باشند، چه سایزهایی medium و چه سایزهایی small هستند.

اکستنشن Import Cost در نرم افزار visual studio code در زمان نگارش مقاله، حدود یک میلیون بار دانلود شده و نسخه آن 2.15.0 می باشد.

9- افزونه Profile Switcher:

افزونه profile switcher امکان سوئیچ یا جابجایی بین چند پروفایل را به کاربران visual-studio-code می دهد. این افزونه بخصوص برای تولیدکنندگان محتوا (مانند: بلاگرها، یوتیوبرها و…) می تواند مفید باشد. بجای اینکه نیاز باشد هر بار تنظیمات و کانفیگ نرم افزار vscode را تغییر دهند، قادر خواهند بود براحتی پروفایل خود را عوض کنند. در پروفایل می توان فونت سایز، تم یا قالب و… را تعریف کرد. در تصویر زیر بین دو پروفایل Default و Content Creation جابجا می شویم:

اکستنشن Profile Switcher در نرم افزار visual studio code در زمان نگارش مقاله، 6000 بار دانلود شده و نسخه آن 0.3.3 می باشد.

10- افزونه GitLens:

افزونه gitlens یک افزونه متن باز یا open source می باشد که توسط Eric Amodio توسعه داده شده است. این افزونه قابلیت کار با گیت (Git) را در ویژوال استودیو کد فراهم می کند. یکی از امکانات جالب GitLens نمایش نام فرد کدنویس یا ویرایش کننده کد به همراه زمان انجام تغییر می باشد. به شکل تصویر زیر:

این تنها یکی از ویژگی های GitLens است. برخی از دیگر امکانات آن عبارتند از:

Revision Navigation: می توان بدین وسیله تاریخچه تغییرات فایل را مشاهده کرد و بین هر کدام از آنها به دلخواه جابجا شد.
نمایش پیغام commit مربوط به هر دستور در انتهای آن
آخرین تغییری که روی هر خط کد انجام شده است
و…

اکستنشن GitLens در نرم افزار visual studio code در زمان نگارش مقاله، 8 میلیون بار دانلود شده و نسخه فعلی آن 11.2.1 می باشد.

نتیجه گیری:

در این پست سعی شد چند نمونه از بهترین افزونه های ویژوال استودیو کد را معرفی کردیم که باعث افزایش بهره وری توسعه دهندگان و سرعت کدنویسی آنها می شوند. البته VScode افزونه های بسیار زیادی دارد که در بخش زیر چند افزونه کاربردی دیگر را لیست کرده ایم:

شما کاربران عزیز اگر از افزونه ای در ویژوال استودیو کد استفاده می کنید که در لیست بالا نیامده است می توانید آن را از طریق فرم ارسال دیدگاه پایین مقاله به سایر کاربران پیشنهاد کنید.

فهرست مطالب پنهان

1 بهترین افزونه های Visual Studio Code:

1.1 1- افزونه Auto Rename Tag:

1.2 2- افزونه Bracket Pair Colorizer:

1.3 3- افزونه های Snippets:

1.4 4- افزونه Better Comments:

1.5 5- افزونه Markdown All in One:

1.6 6- افزونه های Icon:

1.7 7- افزونه Prettier:

1.8 8- افزونه Import Cost:

1.9 9- افزونه Profile Switcher:

1.10 10- افزونه GitLens: