معرفی 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
این افرونه که از بسیاری از زبان ها پشتیبانی میکند کد های شما را بصورت خودکار مرتب و منظم میکند.
این افزونه باعث بالا تر رفتن نظم پروژه و خوانایی بالاتر کد ها میشود .
2.javaScript (ES6) code snippets
در تایپ کردن کد های جاوااسکریپت به شما کمک میکند.
جهت سهولت در کدنویسی جاوااسکریپت و صرفه‌جویی در زمان و تمرکز بالاتر بر روی اصل کد با پشتیبانی از جاوا اسکریپت (ES6).
🔗لینک دانلود افزونه javaScript (ES6) code snippets
3.Git Lens
هنگام کار گروهی و استفاده از سیستم گیت با این افزونه میتوان پیداکرد کدام خط کد، توسط چه عضوی از گروه و در چه تاریخی تغییر کرده است همچنین تاریخچه‌ی کامیت‌ها را بررسی کنیم.
4.live server
جهت راه انداختن یک سرور لوکال یا محلی برای نمایش همزمان صفحات به صورت داینامیک و استاتیک از live server استفاده میکنیم.
در روند پروژه شما تغیرات ذخیره میشود و به صورت خودکار live server صفحه ی شما را رفرش میکند و تغیرات را به شما نشان میدهد . به صورت کلی برای طراحان وب استفاده از این افزونه ضرروری است.
تصحیح خطا ها و آنالیز کد های جاوااسکریپت توسط این افرونه قدرتمند انجام میشود.
5.ES Lint
اهمیت این افزونه بعلت نداشتن کامپایلر و اجرای مستقیم کدها در جاوااسکریپت بسیار بالاست. بعنوان مثال این افزونه بررسی میکند تا :
تمام توابع getter خروجی را return کنند
تمام کد های غیر قابل دسترس را چک میکند.
با قرار دادن شرط مناسب از حلقه های بینهایت جلوگیری میکند.
از قرار دادن log جلوگیری میکند.
6. Live Preview
جهت عیب یابی و بررسی تغیرات و برای بازکردن یک مرورگر واقعی در ویژوال استودیو کد استفاده میگردد. همچنین ظاهر طراحی و عیب یابی توابع را مورد بررسی قرار میدهد.
7.Rainbow Brackets
کنترل براکت ها و پرانتز ها با رنگی کردن و هایلایت کردن براکت یا پرانتز مرتبط جهت دسترسی سریع تر به بخش های مرتبط کد با یکدیگر و بالا بردن سرعت خوانایی کد و ویرایش سریع بخش ها.
🔗دانلود افزونه Rainbow brackets
8.VSCode Icons
جهت ایجاد و نمایش آیکون مرتبط با هر فایل استفاده میشود . در روند ایجاد پروژه های بزرگ و کار روی فایل های زیاد برای یافتن سریع تر فایل ها و نمایش واضح تر هر فایل استفاده از آن توصیه میگردد.
9.Auto close tag و Auto rename tags
بالا بردن سرعت کد نویسی با استفاده از این دو افزونه . با استفاده از این دو افزونه زمان ایجاد تگ تگ بسته آن بصورت خودکار ایجاد شده و تگ بسته میشود و برای تغیر یک تگ تنها نیاز است تگ باز آن را تغییر دهیم این افزونه در روند بهینه سازی زمان بسیار سودمند است .
🔗دانلود افزونه Auto rename tags
10.Docker
یکی از محبوب ترین افزونه های ویژوال استدیو کد داکر میباشد . این سرویس متن باز و محبوب
در روند توسعه نرم افزار به ما کمک میکند تا برنامه را به چند بخش تقسیم نموده و هر بخش را به صورت مجزا اجرا کنیم.
داکر container یا محل های مستقلی ایجاد میکند و هر کدام شامل بسته های نرم افزاری مختلفی است و میتوان هر بخش از برنامه را روی کانتیر جدای ایجاد شده اجرا نمود تا این استقلال اجرای هر برنامه باعث بالا رفتن بازدهی سیستم گردد.
⭐ جهت آشنایی بیشتر با داکر حتما این پست رو مطالعه کنید.
Docker چیست و چه کاربردهایی دارد؟
داکر پلتفرمی منبع‌باز است که به توسعه‌دهندگان کمک میکند تا با استفاده از قابلیت مجازی‌سازی در سطح سیستم‌عامل، نرم‌افزارها را در قالب بسته‌هایی با عنوان «کانتینر» ارائه دهند. اگر توسعه‌دهنده نرم‌افزار باشید حتما این پست از بلاگ وایلدکدر رو مطالعه کنید.
11.Code Spell Checker
این افزونه جهت بررسی املای کلمات استفاده میشود.
بی‌دقتی در نوشتن حروف گاهی باعث گم کردن کد ها یا عدم اجرای توابع میشود و در روند توسعه اخلال ایجاد میکند.
🔗دانلود افزونه Code Spell Checker
12.Live Sass compiler
افزونه‌ی Live Sass compiler برای کامپایل فایل‌های SCSS به CSS استفاده میشود
زیرا که مرورگر ها تنها فایل های CSS را میخاند.واگر شما به زبان انگولار ، ری اکت و ... کار میکنید بهتر است از scss استفاده کنید برای تبدیل scss به CSS از این افزونه استفاده کنید.
🔗دانلود افزونه Live Sass compiler
13.Paste JSON as Code
افزونه‌ی Paste JSON as Code می‌توانید به راحتی در جاوا اسکریپت یا تایپ اسکریپت، کلاس خود را منطبق با ساختار داده‌های جیسون بسازید
در توسعه برنامه های وب در بخش بک اند و یا فرانت اند با API ها برخورد داریم . درون کلاس‌های موجود در پروژه باید ویژگی‌های اشیا را به گونه‌ای تعریف کنید که منطبق با داده‌ی جیسون باشد. پس استفاده از این افزونه سودمند خواهد بود.
🔗دانلود افزونه Paste JSON as Code
14.VSCode Faker
ایجاد اطلاعات فیک یا دروغین درون باکس ها یا فرم های طراحی شده جهت تست فرم یا فضای در نظر گرفته شده برای نوشته ها . با استفاده ازاین افزونه در زمان صرفه جویی کنید و اطلاعاتی چون نام، آدرس، شماره تماس، مقادیر تصادفی، تصویر و را در سایت خود استفاده کنید…
15.Path Intellisense
جهت استفاده از یک فایل، خواندن مسیر واقعی در پوشه‌ی فایل‌ها، کپی کردن آن مسیر و جای‌گذاری آن در کد مورد نظر و در VS Code است و بیشتر هنگام توسعه‌ی بخش بک اند(backend) مورد استفاده قرار میگیرد.
🔗دانلود افزونه Path Intellisense
VS Code بسیار سریع و قدرتمند است . استفاده از افزونه‌های کاربردی و مفید آن می‌توانید دقت کدنویسی خود را افزایش دهید. حتی می‌توانید محیط ویرایشگر را سفارشی کرده و از کدنویسی در محیط آن نهایت لذت را ببرید.
تگ های مرتبط
