همه‌ی ما به عنوان یک توسعه دهنده‌ی وب سایت، علاقه‌مند هستیم تا با استفاده از ابزارهای برنامه نویسی موجود، بهینه‌تر کدنویسی کرده و از خطاهای احتمالی برنامه‌ی خود سریع‌تر باخبر شویم. ویژوال استودیو کد (که به اختصار VS Code نیز نامیده می‌شود) یکی از بهترین و محبوب‌ترین محیط‌های برنامه نویسی به خصوص در حوزه‌ی توسعه‌ی برنامه‌های تحت وب می‌باشد که بر روی هر سیستم عاملی قابل استفاده است. ویژوال استودیو کد نسخه‌ی سبک‌تر شده‌ی ویژوال استودیو (Visual Studio) است و به صورت متن باز و رایگان در اختیار کاربران قرار گرفته است. VS Code دارای افزونه‌های زیادی است که به آن‌ها اکستنشن (extensions) نیز گفته می‌شود.

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

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

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

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

از Command Palette نیز می‌توان برای نصب افزونه‌ها به صورت هم‌زمان استفاده کرد. در این روش ابتدا با cmd + shift + p (برای مک) یا ctrl + shift + p (برای ویندوز)، این بخش را باز کرده و سپس عبارت «Install extensions» را تایپ کنید و گزینه Extensions: Install Extensions را انتخاب نمایید.

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

Live Sass compiler

هنگام توسعه‌ی برنامه به زبان‌های انگولار، ری‌اکت و ... توصیه می‌شود تا از فایل‌های SCSS استفاده کنید. این فایل‌ها مدیریت استایل را بسیار ساده‌تر می‌کنند. اما توجه داشته باشید که مرورگر تنها فایل‌های CSS را می‌خواند. پس نیاز به تبدیل این دو فایل به یکدیگر دارید. افزونه‌ی Live Sass compiler برای کامپایل فایل‌های SCSS به CSS استفاده می‌شود و در مقایسه با سایر کامپایلرها سریع‌تر است. بعد از اضافه کردن این افزونه به ویژوال استودیو کد، در گوشه‌ی پایین سمت راست صفحه‌ی ویرایشگر، یک گزینه‌ی Watch Sass اضافه می‌شود که با کلیک بر آن، کامپایل فایل انجام شده و می‌توانید استایل CSS را به المان خود در HTML اضافه کنید.

Debugger for Chrome

این افزونه برای دیباگ کردن کدهای جاوا اسکریپت، تایپ اسکریپت و... در بخش browser مرورگر گوگل کروم استفاده می‌شود. این افزونه بسیار بی‌دردسرتر از کنسول گوگل کروم است و تجربه‌ی دیباگ بهتری با آن خواهید داشت. برای کار با Debugger for Chrome، ابتدا آن را نصب کرده و سپس در فایل launch.json تنظیمات مربوط به دیباگ کردن صفحه‌ی موردنظر از وب سایت را انجام دهید. می‌توانید جزییات بیشتر را در صفحه‌ی نصب افزونه مشاهده کنید.

C#

افزونه‌ی C# برای وب اپلیکیشن‌های نوشته شده با زبان سی شارپ استفاده می‌شود. با نصب آن، می‌توانید از ویژگی‌های بیشتری مانند دسترسی به رفرنس‌های متغیر (Go To Definition)، Find All Reference، IntelliSense و... استفاده کنید که به طور معمول در ویرایشگرهای بزرگ مانند ویژوال استودیو در دسترس هستند.

بیشتر بخوانید: دانلود رایگان کتاب راهنمای ورود به دنیای برنامه نویسی

Live Server

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

ES Lint

می‌خواهید کدهای بهتری بنویسید؟ این افزونه را نصب کنید. ES Lint برای آنالیز کد جاوا اسکریپت و تصحیح خطاها در آن‌ها استفاده می‌شود. همان‌طور که می‌دانید جاوا اسکریپت مانند زبان‌های برنامه نویسی دیگر همچون جاوا و ... نیست و کامپایلری ندارد و کدها به طور مستقیم در مرورگر اجرا می‌شوند. پس خطاها در زمان اجرا شدن کد در مرورگر مشخص می‌شوند. ES Lint این مشکلات را برای شما پیدا می‌کند و مانع اجرای آن‌ها می‌شود. برخی از آن‌ها عبارتند از:

• جلوگیری از حلقه‌های بی‌نهایت یا infinite loop با قرار دادن شرط نامناسب

• اطمینان از این که همه‌ی توابع getter، چیزی را return می‌کنند.

• جلوگیری از قرار دادن log در کدها

• چک کردن کدهای غیر قابل دسترس. مثلا بعد از return هر کدی که قرار دهیم، unreachable یا غیر قابل دسترسی می‌شود.

برای مشاهده‌ی همه‌ی امکانات این افزونه می‌توانید به راهنمای آن مراجعه کنید.

Beautify

به طور حتم برای‌تان پیش آمده است که بعد از زیادشدن حجم کد، قادر نباشید که یک بخش از کد خود را پیدا کنید. این افزونه برای قالب‌بندی فایل‌هایی مانند HTML مورد استفاده قرار می‌گیرد. با Beautify کدهای که نوشته‌اید با ظاهری زیباتر نمایش داده شود و آن‌ها را خواناتر می‌کند. کلید میانبر دستی زیباسازی این فایل‌ها، برای مک میانبر cmd+shift+L و برای ویندوز ctrl+shift+L است. Prettier دیگر افزونه‌ی مشابه با این افزونه است.

Quokka

بعد از نصب این افزونه، با استفاده از کلیدهای ترکیبی ctrl+shift+p بخش Command pallete در ویژوال استودیو کد نمایش داده می‌شود و اگر در همان‌جا عبارت Quokka را تایپ کنید، لیستی از تمام دستورات این افزونه را می‌بینید. از این لیست دستورات، گزینه‌ی New Javascript File را انتخاب کنید تا یک فایل جاوا اسکریپت جدید و سازگار با این افزونه ساخته شود. Quokka یک افزونه‌ی جالب است که هم‌‌زمان با تایپ کردن کد در ویرایشگر، کدها را اجرا کرده و خروجی را به شما نشان می‌دهد. اگر کد دارای خطا یا هشدار باشد نیز همان‌جا به شما نمایش داده و شما را راهنمایی می‌کند.

Better Align

اگر فردی هستید که دوست دارد کدهایش در یک فایل هم‌تراز باشد، باید از این افزونه استفاده کنید. شما می‌توانید بخش‌های تعریف متغیر و declarationهای مختلف را با هم تراز کنید، نظرات و بخش‌های کد را دنبال کنید و... . برای درک این که افزونه‌ی Better Align چقدر مفید است، هیچ راهی بهتر از نصب نیست!

Color Picker

اگر در توسعه‌ی بخش فرانت‌اند کار می‌کنید، حتما با رنگ‌ها و استفاده از کدهای رنگی آشنا هستید. متاسفانه برای بسیاری از توسعه دهندگان، به خاطر سپردن کدهای رنگی کار سختی است. افزونه‌ی Color Picker کمک می‌کند تا راحت‌تر از رنگ‌ها در کد خود استفاده کنید.

Polacode

با استفاده از این افزونه می‌توانید از کد خود اسکرین‌شات‌ بگیرید و آن را به اشتراک بگذارید. وقتی که از Polacode‌ استفاده می‌کنید، این افزونه تم و فونت شما را حفظ می‌کند. اغلب دموهای تصویری موجود در اینترنت که بخشی از کد را نشان می‌دهند، با استفاده از Polacode گرفته شده‌اند.

Path Intellisense

اگر روی توسعه‌ی بخش بک ‌اند(backend) یک وب سایت کار می‌کنید، پس حتما با مفاهیم فایل سر و کار دارید. روش معمول برای استفاده از یک فایل، خواندن مسیر واقعی در پوشه‌ی فایل‌ها، کپی کردن آن مسیر و جای‌گذاری آن در کد مورد نظر و در VS Code است. این افزونه برای نشان دادن فایل‌های موجود در یک مسیر مشخص استفاده می‌شود. این کار زمانی مفید خواهد بود که بر روی پروژه‌ای کار کنید که تعداد زیادی فایل در آن وجود دارد. توسعه‌ دهندگان زیادی از Path Intellisense استقبال می‌کنند و تاکنون بالای ۳ میلیون بار دانلود شده است.

Browser Preview

در توسعه‌ی برنامه‌های تحت وب باید برنامه‌ی اجرایی را در مرورگر ببینید تا از طراحی ظاهری و درستی عملکرد توابع آن مطمئن شوید. اگر از جابه‌جایی مداوم بین محیط ویرایشگر و مرورگر به ستوه آمده‌اید، به سراغ Browser Preview بروید. این افزونه برای بازکردن یک مرورگر واقعی درون ویرایشگر ویژوال استودیو کد و برای عیب‌یابی و بررسی تغییرات، به جای چک کردن آن‌ها روی مرورگر مورد استفاده قرار می‌گیرد.

JavaScript (ES6) Code Snippets

چند بار برای شما اتفاق افتاده است که نیاز داشته باشید یک کد را دوباره و در مکانی دیگر از فایل تایپ کنید؟ خوشبختانه افزونه‌ی JavaScript (ES6) Code Snippets به طور قابل‌ توجهی به تایپ کردن کد مشابه کمک می‌کند. به این ترتیب کاربر می‌تواند تا با صرفه‌جویی در زمان، بر کد واقعی تمرکز کند. نام‌گذاری این افزونه نشان می‌دهد که با جاوا اسکریپت (ES6) سازگار است.

Settings Sync

این افزونه به منظور ذخیره کردن تنظیمات شما در ویرایشگر برای بازیابی آن‌ها در ماشین جدید (به جای پیکربندی دوباره‌ی آن‌ها) استفاده می‌شود. این قابلیت می‌تواند در ایجاد یک محیط توسعه‌ی سفارشی برای برنامه نویسان مفید باشد. با استفاده از Settings Sync، می‌توانید تنظیمات را همراه با پروژه‌ی موردنظر در گیت‌هاب آپلود کنید تا سایرین بتوانند از آن تنظیمات روی سیستم خود استفاده کنند.

Git Lens

با استفاده از این افزونه می‌توانید بفهمید که خط مورد نظر از کد، توسط چه کسی و در چه تاریخی تغییر کرده است، تاریخچه‌ی کامیت‌ها را بررسی کنید و... .

افزونه‌های مشابه با Git Lens عبارتند از:

• Git history: مشاهده‎ی تاریخچه‌ی Git و .... به صورت نموداری.

• Git Blame: این افزونه به شما اجازه می‌دهد تا اطلاعات مربوط به Git blame خط انتخاب شده را در Status bar مشاهده کنید.

• Git indicators: این افزونه به شما اعلام می‌کند که کدام فایل‌ها تغییر کرده‌اند و این‌که چند خط از کد، اضافه یا حذف شده است.

Rest Client

اگر یک توسعه دهنده‌ی وب هستید، پس باید با REST یا GraphQL سر و کار داشته باشید. به طور معمول از ابزارهایی مانند Postman یا Soap UI برای تست وب سرویس‌ها و بررسی جواب بازگشتی از سمت سرور استفاده می‌شود. اما با Rest Client، این عملیات ساده‌تر و  قدرتمندتر است و پاسخ بازگشتی از سرور، در  خود ویرایشگر VS Code قابل مشاهده است.

در ضمن این افزونه از ارسال فرمان curl هم پشتیبانی می‌کند.

Better Comments

این افزونه برای بهبود خوانایی و متمایز کردن انواع کامنت‌هایی که به منظورهای مختلف نوشته می‌شوند، مانند هشدارها، خطاها، هایلایت‌ها و شرح‌ کارایی یک تابع استفاده می‌شود. شما می‌توانید اطلاعات دقیق مربوط به این افزونه‌ را در صفحه‌ی Better Comments پیدا کنید.

Bracket Pair Colorizer

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

Code Spell Checker

این افزونه برای بررسی املای درست عبارت، چه برای انگلیسی‌زبان‌ها و چه افرادی که انگلیسی زبان نوشتاری‌شان نیست، استفاده می‌شود. آیا تا به حال پیش آمده است که  به دلیل اشتباهات احمقانه‌ی املایی و بی‌دقتی در نوشتن حروف، در برابر همکاران‌تان شرمنده شده باشید؟ خوشبختانه با فعال‌سازی Code Spell Checker، در صورت وجود اشتباهات املایی، بلافاصله یک هشدار دریافت خواهید کرد.

VSCode Icons

پروژه‌های وب شامل فایل‌های مختلفی هستند: HTML، CSS، جاوا اسکریپت و بسیاری از انواع دیگر. آیا می‌دانستید که می‌توانید آیکون‌های زیبایی برای انواع مختلف فایل داشته باشید؟ اگر افزونه‌ی VSCode Icons را نصب کنید، با استفاده از آیکون‌ها به عنوان پسوند نوع فایل، می‌توانید سریع‌تر انواع مختلف فایل را شناسایی کنید. این افزونه نیز بالای 3.5 میلیون بار دانلود شده است.

Paste JSON as Code

بهترین افزونه‌های ویژوال استودیو کد: در توسعه‌ی برنامه‌های وب، چه در بخش فرانت اند(frontend) و چه در بخش بک اند(backend) با API سروکار دارید. ساختار داده‌ی متداول در کار با APIها، جیسون (JSON) است. از طرفی در کلاس‌های موجود در پروژه باید ویژگی‌های اشیا را به گونه‌ای تعریف کنید که منطبق با داده‌ی جیسون باشد. پس باید ساختار جیسون را بخوانید و سپس ویژگی‌های آن را در کلاس خود کپی کنید. با افزونه‌ی Paste JSON as Code می‌توانید به راحتی در جاوا اسکریپت یا تایپ‌ اسکریپت، کلاس خود را منطبق با ساختار داده‌های جیسون بسازید. بنابراین می‌توانید از ویرایش دستی و خسته‌کننده‌ی کد فرار کنید.

Project Manager

ممکن است که به عنوان یک توسعه دهنده همزمان در چند پروژه مشغول به کار باشید. آیا می‌دانستید که به جای باز کردن پروژه‌های مختلف از یک پوشه، می‌توانید پروژه‌های خود را به شیوه‌ای بهتر با افزونه‌ی Project Manager مدیریت کنید؟ این افزونه یک نوار کناری اضافی در ویرایشگر VS Code برای پروژه‌های شما اضافه می‌کند. شما می‌توانید پروژه را از پوشه‌ی موردنظر انتخاب کرده و سریع‌تر بین پروژه‌ها جابه‌جا شوید. این افزونه همچنین با ایجاد امکانات ویژه، انجام پروژه‌های دورکاری را آسان‌تر می‌کند.

Auto close tag و Auto rename tags

بهترین افزونه‌های ویژوال استودیو کد: همان‌طور که می‌دانید در React از JSX استفاده می‌شود. JSX بسیار شبیه به HTML است و باید تگ‌های موردنظر خود را باز کنید و در انتها ببندید. یکی از کارهایی که با گذشت زمان و تکرار زیاد موجب آزار شما می‌شود، قرار دادن تگ‌هاست. در بسیاری از مواقع می‌توانید از ابزارهایی برای ساخت سریع تگ‌های تو در تو استفاده کنید. برای مثال، می‌خواهید وقتی تگ ابتدایی را تغییر می‌دهید، در همان لحظه تگ پایانی هم تغییر کند و دیگر به انجام کار تکراری نیازی نباشد. برای این منظور می‌توانید از دو افزونه‌ی Auto rename tags و Auto close tags استفاده کنید و سرعت کدنویسی خود را افزایش دهید. افزونه‌های مشابه عبارتند از:

• Auto complete tags: هر دو ویژگی افزونه‌های بالا رو با هم ادغام کرده است.

• Close HTML/XML tags

Docker

بهترین افزونه‌های ویژوال استودیو کد: داکر یکی از ابزارهای متن‌باز و محبوب چند سال اخیر است. این سرویس به شما کمک می‌کند محیط خود را به چند بخش تقسیم کرده و در هر بخش یک برنامه‌ی مجزا را اجرا کنید. داکر محیط‌های مستقلی به نام Container ایجاد می‌کند که هر Container می‌تواند شامل بسته‌های نرم افزاری مختلفی باشد. می‌توانید داخل داکر کانتینرهای مختلفی ایجاد کنید و پروژه‌های خود را به طور مستقل روی هر کدام اجرا نمایید. این کار بازدهی سیستم را تا حد زیادی بالا می‌برد. افزونه‌ی Docker کمک می‌کند تا از این امکان در ویرایشگر ویژوال استودیو کد استفاده کنید.

VSCode Faker

این افزونه وظیفه دارد تا اطلاعات دروغین یا به اصطلاح فیک (Fake) را به پروژه‌ی شما اضافه کند. VSCode Faker ابزار مناسبی برای طراحان سایت است و به آن‌ها اجازه می‌دهد بدون اینکه از ویژوال استدیو کد خارج شوند، اطلاعات غیرواقعی را به فرم‌ها و دیگر بخش‌های سایت خود اضافه کنند. اطلاعاتی مانند نام، آدرس، شماره تماس، مقادیر تصادفی، تصویر و... که به صورت گسترده در پروژه‌های طراحی وب سایت به کار گرفته می‌شوند.

Minify

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

جمع‌بندی

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

تاکنون هزاران افزونه برای این ویرایشگر محبوب ساخته شده و هر روز به تعداد آن‌ها اضافه می‌شود. شما از چه افزونه‌هایی در ویژوال استودیو کد استفاده می‌کنید؟ اگر سوال یا تجربه‌ای در کار با افزونه‌ها دارید، آن را با ما و سایر کاربران سون لرن به اشتراک بگذارید.

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