همهی ما به عنوان یک توسعه دهندهی وب سایت، علاقهمند هستیم تا با استفاده از ابزارهای برنامه نویسی موجود، بهینهتر کدنویسی کرده و از خطاهای احتمالی برنامهی خود سریعتر باخبر شویم. ویژوال استودیو کد (که به اختصار 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 کنید تا افزونه فعال شود. به همین دلیل توصیه میشود که بعد از هر نصب، یک بار ویرایشگر خود را باز و بسته کنید.
هنگام توسعهی برنامه به زبانهای انگولار، ریاکت و … توصیه میشود تا از فایلهای SCSS استفاده کنید. این فایلها مدیریت استایل را بسیار سادهتر میکنند. اما توجه داشته باشید که مرورگر تنها فایلهای CSS را میخواند. پس نیاز به تبدیل این دو فایل به یکدیگر دارید. افزونهی Live Sass compiler برای کامپایل فایلهای SCSS به CSS استفاده میشود و در مقایسه با سایر کامپایلرها سریعتر است. بعد از اضافه کردن این افزونه به ویژوال استودیو کد، در گوشهی پایین سمت راست صفحهی ویرایشگر، یک گزینهی Watch Sass اضافه میشود که با کلیک بر آن، کامپایل فایل انجام شده و میتوانید استایل CSS را به المان خود در HTML اضافه کنید.
این افزونه برای دیباگ کردن کدهای جاوا اسکریپت، تایپ اسکریپت و… در بخش browser مرورگر گوگل کروم استفاده میشود. این افزونه بسیار بیدردسرتر از کنسول گوگل کروم است و تجربهی دیباگ بهتری با آن خواهید داشت. برای کار با Debugger for Chrome، ابتدا آن را نصب کرده و سپس در فایل launch.json تنظیمات مربوط به دیباگ کردن صفحهی موردنظر از وب سایت را انجام دهید. میتوانید جزییات بیشتر را در صفحهی نصب افزونه مشاهده کنید.
افزونهی C# برای وب اپلیکیشنهای نوشته شده با زبان سی شارپ استفاده میشود. با نصب آن، میتوانید از ویژگیهای بیشتری مانند دسترسی به رفرنسهای متغیر (Go To Definition)، Find All Reference، IntelliSense و… استفاده کنید که به طور معمول در ویرایشگرهای بزرگ مانند ویژوال استودیو در دسترس هستند.
این افزونه برای راهاندازی یک سرور محلی با امکان نمایش صفحه به صورت همزمان برای صفحات ایستا و پویا استفاده میشود. Live Server تغییرات ایجاد شده در سورس کد شما را در فایل ذخیره میکند، به طور خودکار صفحهی وب سایت در مرورگر را رفرش میکند و تغییراتی که شما در آن ایجاد کردهاید را نمایش میدهد. در نتیجه دیگر به رفرش صفحهی وب سایت در مرورگر به صورت دستی نیازی نیست.
میخواهید کدهای بهتری بنویسید؟ این افزونه را نصب کنید. ES Lint برای آنالیز کد جاوا اسکریپت و تصحیح خطاها در آنها استفاده میشود. همانطور که میدانید جاوا اسکریپت مانند زبانهای برنامه نویسی دیگر همچون جاوا و … نیست و کامپایلری ندارد و کدها به طور مستقیم در مرورگر اجرا میشوند. پس خطاها در زمان اجرا شدن کد در مرورگر مشخص میشوند. ES Lint این مشکلات را برای شما پیدا میکند و مانع اجرای آنها میشود. برخی از آنها عبارتند از:
برای مشاهدهی همهی امکانات این افزونه میتوانید به راهنمای آن مراجعه کنید.
به طور حتم برایتان پیش آمده است که بعد از زیادشدن حجم کد، قادر نباشید که یک بخش از کد خود را پیدا کنید. این افزونه برای قالببندی فایلهایی مانند HTML مورد استفاده قرار میگیرد. با Beautify کدهای که نوشتهاید با ظاهری زیباتر نمایش داده شود و آنها را خواناتر میکند. کلید میانبر دستی زیباسازی این فایلها، برای مک میانبر cmd+shift+L و برای ویندوز ctrl+shift+L است. Prettier دیگر افزونهی مشابه با این افزونه است.
بعد از نصب این افزونه، با استفاده از کلیدهای ترکیبی ctrl+shift+p بخش Command pallete در ویژوال استودیو کد نمایش داده میشود و اگر در همانجا عبارت Quokka را تایپ کنید، لیستی از تمام دستورات این افزونه را میبینید. از این لیست دستورات، گزینهی New Javascript File را انتخاب کنید تا یک فایل جاوا اسکریپت جدید و سازگار با این افزونه ساخته شود. Quokka یک افزونهی جالب است که همزمان با تایپ کردن کد در ویرایشگر، کدها را اجرا کرده و خروجی را به شما نشان میدهد. اگر کد دارای خطا یا هشدار باشد نیز همانجا به شما نمایش داده و شما را راهنمایی میکند.
اگر فردی هستید که دوست دارد کدهایش در یک فایل همتراز باشد، باید از این افزونه استفاده کنید. شما میتوانید بخشهای تعریف متغیر و declarationهای مختلف را با هم تراز کنید، نظرات و بخشهای کد را دنبال کنید و… . برای درک این که افزونهی Better Align چقدر مفید است، هیچ راهی بهتر از نصب نیست!
اگر در توسعهی بخش فرانتاند کار میکنید، حتما با رنگها و استفاده از کدهای رنگی آشنا هستید. متاسفانه برای بسیاری از توسعه دهندگان، به خاطر سپردن کدهای رنگی کار سختی است. افزونهی Color Picker کمک میکند تا راحتتر از رنگها در کد خود استفاده کنید.
با استفاده از این افزونه میتوانید از کد خود اسکرینشات بگیرید و آن را به اشتراک بگذارید. وقتی که از Polacode استفاده میکنید، این افزونه تم و فونت شما را حفظ میکند. اغلب دموهای تصویری موجود در اینترنت که بخشی از کد را نشان میدهند، با استفاده از Polacode گرفته شدهاند.
اگر روی توسعهی بخش بک اند(backend) یک وب سایت کار میکنید، پس حتما با مفاهیم فایل سر و کار دارید. روش معمول برای استفاده از یک فایل، خواندن مسیر واقعی در پوشهی فایلها، کپی کردن آن مسیر و جایگذاری آن در کد مورد نظر و در VS Code است. این افزونه برای نشان دادن فایلهای موجود در یک مسیر مشخص استفاده میشود. این کار زمانی مفید خواهد بود که بر روی پروژهای کار کنید که تعداد زیادی فایل در آن وجود دارد. توسعه دهندگان زیادی از Path Intellisense استقبال میکنند و تاکنون بالای ۳ میلیون بار دانلود شده است.
در توسعهی برنامههای تحت وب باید برنامهی اجرایی را در مرورگر ببینید تا از طراحی ظاهری و درستی عملکرد توابع آن مطمئن شوید. اگر از جابهجایی مداوم بین محیط ویرایشگر و مرورگر به ستوه آمدهاید، به سراغ Browser Preview بروید. این افزونه برای بازکردن یک مرورگر واقعی درون ویرایشگر ویژوال استودیو کد و برای عیبیابی و بررسی تغییرات، به جای چک کردن آنها روی مرورگر مورد استفاده قرار میگیرد.
چند بار برای شما اتفاق افتاده است که نیاز داشته باشید یک کد را دوباره و در مکانی دیگر از فایل تایپ کنید؟ خوشبختانه افزونهی JavaScript (ES6) Code Snippets به طور قابل توجهی به تایپ کردن کد مشابه کمک میکند. به این ترتیب کاربر میتواند تا با صرفهجویی در زمان، بر کد واقعی تمرکز کند. نامگذاری این افزونه نشان میدهد که با جاوا اسکریپت (ES6) سازگار است.
این افزونه به منظور ذخیره کردن تنظیمات شما در ویرایشگر برای بازیابی آنها در ماشین جدید (به جای پیکربندی دوبارهی آنها) استفاده میشود. این قابلیت میتواند در ایجاد یک محیط توسعهی سفارشی برای برنامه نویسان مفید باشد. با استفاده از Settings Sync، میتوانید تنظیمات را همراه با پروژهی موردنظر در گیتهاب آپلود کنید تا سایرین بتوانند از آن تنظیمات روی سیستم خود استفاده کنند.
با استفاده از این افزونه میتوانید بفهمید که خط مورد نظر از کد، توسط چه کسی و در چه تاریخی تغییر کرده است، تاریخچهی کامیتها را بررسی کنید و… .
افزونههای مشابه با Git Lens عبارتند از:
اگر یک توسعه دهندهی وب هستید، پس باید با REST یا GraphQL سر و کار داشته باشید. به طور معمول از ابزارهایی مانند Postman یا Soap UI برای تست وب سرویسها و بررسی جواب بازگشتی از سمت سرور استفاده میشود. اما با Rest Client، این عملیات سادهتر و قدرتمندتر است و پاسخ بازگشتی از سرور، در خود ویرایشگر VS Code قابل مشاهده است.
در ضمن این افزونه از ارسال فرمان curl هم پشتیبانی میکند.
این افزونه برای بهبود خوانایی و متمایز کردن انواع کامنتهایی که به منظورهای مختلف نوشته میشوند، مانند هشدارها، خطاها، هایلایتها و شرح کارایی یک تابع استفاده میشود. شما میتوانید اطلاعات دقیق مربوط به این افزونه را در صفحهی Better Comments پیدا کنید.
کار با براکتها و پرانتزها برای تمامی برنامه نویسان یک تجربهی دردناک است. به خصوص اگر یک کد جاوا اسکریپت با بسیاری از فراخوانیهای تو در تو داشته باشید، مدیریت پرانتز میتواند یک کار چالش برانگیز باشد. در بسیاری از موارد این اتفاق میافتد که فقط بخشی از کد را حذف کردهاید، اما زمان زیادی را برای بررسی درستی نوع پرانتزگذاریها به هدر دادهاید. خوشبختانه، Bracket Pair Colorizer میتواند به شما کمک کند تا با رنگیکردن براکتها و پرانتزها، آنها را راحتتر کنترل کنید.
این افزونه برای بررسی املای درست عبارت، چه برای انگلیسیزبانها و چه افرادی که انگلیسی زبان نوشتاریشان نیست، استفاده میشود. آیا تا به حال پیش آمده است که به دلیل اشتباهات احمقانهی املایی و بیدقتی در نوشتن حروف، در برابر همکارانتان شرمنده شده باشید؟ خوشبختانه با فعالسازی Code Spell Checker، در صورت وجود اشتباهات املایی، بلافاصله یک هشدار دریافت خواهید کرد.
پروژههای وب شامل فایلهای مختلفی هستند: HTML، CSS، جاوا اسکریپت و بسیاری از انواع دیگر. آیا میدانستید که میتوانید آیکونهای زیبایی برای انواع مختلف فایل داشته باشید؟ اگر افزونهی VSCode Icons را نصب کنید، با استفاده از آیکونها به عنوان پسوند نوع فایل، میتوانید سریعتر انواع مختلف فایل را شناسایی کنید. این افزونه نیز بالای 3.5 میلیون بار دانلود شده است.
بهترین افزونههای ویژوال استودیو کد: در توسعهی برنامههای وب، چه در بخش فرانت اند(frontend) و چه در بخش بک اند(backend) با API سروکار دارید. ساختار دادهی متداول در کار با APIها، جیسون (JSON) است. از طرفی در کلاسهای موجود در پروژه باید ویژگیهای اشیا را به گونهای تعریف کنید که منطبق با دادهی جیسون باشد. پس باید ساختار جیسون را بخوانید و سپس ویژگیهای آن را در کلاس خود کپی کنید. با افزونهی Paste JSON as Code میتوانید به راحتی در جاوا اسکریپت یا تایپ اسکریپت، کلاس خود را منطبق با ساختار دادههای جیسون بسازید. بنابراین میتوانید از ویرایش دستی و خستهکنندهی کد فرار کنید.
ممکن است که به عنوان یک توسعه دهنده همزمان در چند پروژه مشغول به کار باشید. آیا میدانستید که به جای باز کردن پروژههای مختلف از یک پوشه، میتوانید پروژههای خود را به شیوهای بهتر با افزونهی Project Manager مدیریت کنید؟ این افزونه یک نوار کناری اضافی در ویرایشگر VS Code برای پروژههای شما اضافه میکند. شما میتوانید پروژه را از پوشهی موردنظر انتخاب کرده و سریعتر بین پروژهها جابهجا شوید. این افزونه همچنین با ایجاد امکانات ویژه، انجام پروژههای دورکاری را آسانتر میکند.
بهترین افزونههای ویژوال استودیو کد: همانطور که میدانید در React از JSX استفاده میشود. JSX بسیار شبیه به HTML است و باید تگهای موردنظر خود را باز کنید و در انتها ببندید. یکی از کارهایی که با گذشت زمان و تکرار زیاد موجب آزار شما میشود، قرار دادن تگهاست. در بسیاری از مواقع میتوانید از ابزارهایی برای ساخت سریع تگهای تو در تو استفاده کنید. برای مثال، میخواهید وقتی تگ ابتدایی را تغییر میدهید، در همان لحظه تگ پایانی هم تغییر کند و دیگر به انجام کار تکراری نیازی نباشد. برای این منظور میتوانید از دو افزونهی Auto rename tags و Auto close tags استفاده کنید و سرعت کدنویسی خود را افزایش دهید. افزونههای مشابه عبارتند از:
بهترین افزونههای ویژوال استودیو کد: داکر یکی از ابزارهای متنباز و محبوب چند سال اخیر است. این سرویس به شما کمک میکند محیط خود را به چند بخش تقسیم کرده و در هر بخش یک برنامهی مجزا را اجرا کنید. داکر محیطهای مستقلی به نام Container ایجاد میکند که هر Container میتواند شامل بستههای نرم افزاری مختلفی باشد. میتوانید داخل داکر کانتینرهای مختلفی ایجاد کنید و پروژههای خود را به طور مستقل روی هر کدام اجرا نمایید. این کار بازدهی سیستم را تا حد زیادی بالا میبرد. افزونهی Docker کمک میکند تا از این امکان در ویرایشگر ویژوال استودیو کد استفاده کنید.
این افزونه وظیفه دارد تا اطلاعات دروغین یا به اصطلاح فیک (Fake) را به پروژهی شما اضافه کند. VSCode Faker ابزار مناسبی برای طراحان سایت است و به آنها اجازه میدهد بدون اینکه از ویژوال استدیو کد خارج شوند، اطلاعات غیرواقعی را به فرمها و دیگر بخشهای سایت خود اضافه کنند. اطلاعاتی مانند نام، آدرس، شماره تماس، مقادیر تصادفی، تصویر و… که به صورت گسترده در پروژههای طراحی وب سایت به کار گرفته میشوند.
همانطور که از نام این افزونه میتوانید حدس بزنید، Minify برای بهینه کردن و فشرده سازی کدهای HTML، CSS و جاوا اسکریپت استفاده میشود. به این ترتیب با استفاده از این افزونه هم سرعت سایتی که نوشتهاید بالاتر میرود و هم در پهنای باند کاربران آن صرفهجویی میشود. این افزونه تنظیمات مختلفی برای فشرده کردن فایل در نظر گرفته است و قابلیتهای متنوعی دارد.
جمعبندی
در این مقاله با افزونههای مفید در ویژوال استودیو کد آشنا شدیم. این ویرایشگر در جامعهی برنامه نویسی و به خصوص طراحی و توسعهی وب بسیار محبوب میباشد و طرفداران زیادی دارد. VS Code بسیار سریع است و با استفاده از افزونههای زیاد آن میتوانید دقت کدنویسی خود را افزایش دهید. همچنین در صورت تمایل میتوانید محیط ویرایشگر را سفارشی کرده و از کدنویسی در محیط آن لذت ببرید. اگر از ویژوال استودیو کد یا افزونههای بینظیرش استفاده نکردهاید، حتما افزونههای معرفی شده در این مقاله را امتحان کنید. مطمئن باشید که پشیمان نخواهید شد.
تاکنون هزاران افزونه برای این ویرایشگر محبوب ساخته شده و هر روز به تعداد آنها اضافه میشود. شما از چه افزونههایی در ویژوال استودیو کد استفاده میکنید؟ اگر سوال یا تجربهای در کار با افزونهها دارید، آن را با ما و سایر کاربران سون لرن به اشتراک بگذارید.
اگر به یادگیری بیشتر در زمینه HTML , CSS و طراحی وب علاقه مند هستی با شرکت در دوره آموزش طراحی وب ، در کمتر از یکسال به یک طراح وب همه فن حریف تبدیل میشوی که آمادهی استخدام، دریافت پروژه و کسب درآمد هستی.
برای من موقع دانلود لایو اکستنشن سرور ارور XHR timeout: undefindems میده.نمیدونم مشکل چیه و چطور میتونم این افزونه رو instsll کنم.
ممنون میشم راهنماییم کنید.
بخاطر وضعیت فعلی نت باید از vpn برای دانلود استفاده کنید و خطایی که میگیرید به همین دلیل هست.