همه ی ما به عنوان یک توسعه دهنده ی وب سایت، علاقه مند هستیم تا با استفاده از ابزارهای برنامه نویسی موجود، بهینه‌تر کدنویسی کرده و از خطاهای احتمالی برنامه ی خود سریع‌تر باخبر شویم. ویژوال استودیو کد (که به اختصار 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 و طراحی وب علاقه مند هستی با شرکت در دوره آموزش طراحی وب ، در کمتر از یکسال به یک طراح وب همه فن حریف تبدیل می‌شوی که آماده ی استخدام، دریافت پروژه و کسب درآمد هستی.