معرفی 15 افزونه محبوب و کاربردی ویژوال استودیو کد برای توسعه‌ی وب
طراحی وب

معرفی 15 افزونه محبوب و کاربردی ویژوال استودیو کد برای توسعه‌ی وب

معرفی  ویژوال استودیو (Visual Studio)

ویژوال استودیو کد یک IDE از محصولات مایکروسافت و در عین حال یکی از بهترین ویرایشگرهای رایگان متن باز حال حاضر است.

 IDE یا (integrated development environment)محیط توسعهٔ یکپارچه نرم‌افزاری میباشدکه امکانات کاملی را برای برنامه‌نویس جهت توسعهٔ نرم‌افزار فراهم می‌کند.

IDE معمولاً از حداقل یک ویرایشگر کد منبع، ساخت ابزارهای اتوماسیون و یک اشکال زدایی تشکیل شده‌است .ویژوال استودیو Visual Studio Code  یکی از محبوب ترین ها برای برنامه نویسان وب میباشد.

در واقع ویژوال استودیو (Visual Studio) نسخه ایی سبک تر visual studio است و به صورت متن باز و رایگان در اختیار افراد قرارگرفته است.

 

💡 تو این ویدیو میتونید آموزش نصب vscode رو ببینید و اون رو دانلود کنید .

 

بعلت محبوبیت بالای vscode جامعه ی بزرگی از برنامه نویسان همواره در تلاش برای بالا بردن کارایی و افزودن قابلیت ها و افزونه های جدید به این ide  هستند.

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

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

. ctrl + shift + x برای ویندوز

. cmd + shift + x برای مک

میانبر های پنل افزونه ها هستند.

 

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

📌بهترین Extention های ویژوال استودیو (Visual Studio)

 

 

 

1.Prettier – Code formatter

این افرونه که از بسیاری از زبان ها پشتیبانی میکند کد های شما را بصورت خودکار مرتب و منظم میکند.

این افزونه باعث بالا تر رفتن نظم پروژه و خوانایی بالاتر کد ها میشود .

🔗لینک دانلود افزونه Prettier

 

 

 

2.javaScript (ES6) code snippets

در تایپ کردن کد های جاوااسکریپت به شما کمک میکند.

جهت سهولت در کدنویسی جاوااسکریپت و صرفه‌جویی در زمان و تمرکز بالاتر بر روی اصل کد با پشتیبانی از جاوا اسکریپت (ES6).

🔗لینک دانلود افزونه javaScript (ES6) code snippets 

 

 

3.Git Lens

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

🔗لینک دانلود افزونه Git Lens

 

 

 

4.live server

جهت راه انداختن یک سرور لوکال یا محلی برای نمایش همزمان صفحات به صورت داینامیک و استاتیک از live server استفاده میکنیم.

در روند پروژه شما تغیرات ذخیره میشود و به صورت خودکار live server صفحه ی شما را رفرش میکند و تغیرات را به شما نشان میدهد . به صورت کلی برای طراحان وب استفاده از این افزونه ضرروری است.

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

🔗دانلود افزونه Live server

 

 

5.ES Lint

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

تمام توابع getter  خروجی را return  کنند

تمام کد های غیر قابل دسترس را چک میکند.

با قرار دادن شرط مناسب از حلقه های بینهایت جلوگیری میکند.

از قرار دادن log  جلوگیری میکند.

🔗دانلود افزونهES Lint

 

 

6. Live Preview

جهت  عیب یابی و بررسی تغیرات و برای بازکردن یک مرورگر واقعی در  ویژوال استودیو کد استفاده میگردد. همچنین ظاهر طراحی و عیب یابی توابع را مورد بررسی قرار میدهد.

🔗دانلود افزونه Live Preview

 

 

 7.Rainbow Brackets

کنترل براکت ها و پرانتز ها با رنگی کردن و هایلایت کردن براکت یا پرانتز مرتبط جهت دسترسی سریع تر به بخش های مرتبط کد با یکدیگر و بالا بردن سرعت خوانایی کد و ویرایش سریع بخش ها.

🔗دانلود افزونه Rainbow brackets

 

  

8.VSCode Icons

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

 🔗دانلود افزونه VSCode Icons

 

 

9.Auto close tag و Auto rename tags

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

 🔗دانلود افزونه Auto close tag

🔗دانلود افزونه Auto rename tags  

 

 

10.Docker

یکی از محبوب ترین افزونه های ویژوال استدیو کد داکر میباشد . این سرویس متن باز و محبوب

در روند توسعه نرم افزار به ما کمک میکند تا برنامه را به چند بخش تقسیم نموده و هر بخش را به صورت مجزا اجرا کنیم.

داکر container یا محل های مستقلی ایجاد میکند و هر کدام شامل بسته های نرم افزاری مختلفی است و میتوان هر بخش از برنامه را روی کانتیر جدای ایجاد شده اجرا نمود تا این استقلال اجرای هر برنامه باعث بالا رفتن بازدهی سیستم گردد.

🔗دانلود افزونه Docker

جهت آشنایی بیشتر با داکر حتما این پست رو مطالعه کنید. 

Docker چیست و چه کاربردهایی دارد؟

داکر پلتفرمی منبع‌باز است که به توسعه‌دهندگان کمک می‌کند تا با استفاده از قابلیت مجازی‌سازی در سطح سیستم‌عامل، نرم‌افزارها را در قالب بسته‌هایی با عنوان «کانتینر» ارائه دهند. اگر توسعه‌دهنده نرم‌افزار باشید حتما این پست از بلاگ  وایلدکدر رو مطالعه کنید.