۱۰ پلاگین فوق العاده برای VS Code که حتما لازمتون میشه!

  1. خانه
  2. کامپیوتر
  3. برنامه نویسی وب
  4. ۱۰ پلاگین فوق العاده برای VS Code که حتما لازمتون میشه!
VS Code Plugin - پلاگین

بعنوان یه برنامه نویس وب، شخصا همیشه دنبال راهی هستم که کد نوشتن رو راحت تر کنه، چون این کار زمان کمتری از آدم میگیره و باعث میشه دد لاین ها رعایت بشن و پروژه ها به موقع به پایان برسن. (توی کارای شخصی و تفریحی، این قضیه برعکسه. یعنی دوست دارم که به چالش کشیده بشم و کارها رو از روش سختشون انجام بدم! یه جور خودآزاری لذت بخش *_* )

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

اما در هر صورت، اگه شما هم مثل من از VS Code استفاده میکنید (البته با عرض پوزش از یوزرهای Atom!)، میتونید از پلاگین های متعددی استفاده کنید که بهره وری رو بالا می بره و میتونه توی پروژه های پیچیده بهتون کمک کنه.

استفاده از پلاگین و ابزارهای خوب، کیفیت کد شما رو هم تغییر میده و بهتر میکنه و به مرور، حتی خودتون رو هم تغییر میده.

به قول جف بیزوس: ما ابزارهامون رو تغییر میدیم و بعد، نوبت این ابزار هاست که ما رو تغییر بدن!

 

توی این مطلب، چندتا پلاگین خوب رو معرفی میکنم که بدرد برنامه نویس های وب میخوره و همه شون هم به صورت رایگان از Visual Studio Marketplace قابل دانلود هستن. و خب طبیعیه که میتونید اونارو از بخش Extensions ویرایشگرتون هم دانلود کنید.

۱. Visual Studio Intellicode

این افزونه با بیش از ۳ میلیون و چهارصد هزار بار نصب (تا زمان نگارش این مطلب) یکی از پرطرفدارترین افزونه های VS Code محسوب میشه. و به نظر من، یکی از مفیدترین ابزارهای این ادیتور هست.

افزونه Visual Studio Intellicode به برنامه نویس ها ویژگی “کامل کردن اتوماتیک کد” رو ارائه میده و خیلی جاها با پیشنهادات بدرد بخورش بهتون کمک میکنه و خوبیش اینه که زبان های زیادی رو هم پشتیبانی میکنه: از پایتون و C++ گرفته، تا جاوااسکریپت! (قبلا یه مقاله درمورد اینکه جاوا اسکریپت چیه و چجوری به اینجا رسیده یه مطلب مفصل نوشتم. اگه دوست داشتید از اینجا بخونیدش)

اما بخش هیجان انگیز این پلاگین، اینه که از یادگیری ماشینی استفاده میکنه! Visual Studio Intellicode با بررسی و اسکن هزار پروژه “منبع باز” (open-source) توی گیت هاب، الگوهای مختلف کد نویسی رو پیدا میکنه و موقع کار بهتون پیشنهاد میده!

VS Code Plugin - پلاگین

۲. Git Blame

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

پلاگین Git Blame بهتون میگه که آخرین بار، کدوم تغییر توسط کدوم یکی از اعضای تیم اعمال شده و کدوم commit تغییرات رو اعمال کرده. فقط کافیه که روی اون خط از کد کلیک کنید!

VS Code Plugin - پلاگین

۳. Prettier

این پلاگین رو خودم خیلی دوست دارم.

همون طور که میدونید، تمیز و خوانا بودن کد خیلی مهمه. این قضیه، هم شما رو حرفه ای تر نشون میده، هم باعث میشه کار اصلاح و ویرایش کدها راحت تر انجام بشه. هم اینکه وقتی یه شخص یا گروه دیگه بخواد روی کدی که نوشتین کار کنه، پوستش پاره نمیشه!

پلاگین Prettier این کار رو به راحتی براتون انجام میده. اینجوری،‌ حداقل خود من موقع نوشتن دیگه نیاز نیست خیلی به نظم و انضباط کدها دقت کنم و به ترتیبی که توی ذهنم دارم اونا رو می نویسم و در نهایت، این افزونه با زدن دوتا دکمه یا حتی موقع ذخیره کردن،‌ کار مرتب سازی رو انجام میده.

البته هممون میدونیم که یه پلاگین، هر چقدر هم که قدرتمند باشه،‌ بازم نمیتونه یه فاجعه رو به معجزه تبدیل کنه! پس در قدم اول، خود ماها باید توی نوشتن کدها دقت داشته باشیم و در نهایت، خوشگل کردنش رو به این افزونه بسپاریم!

پلاگین Prettier خیلیاز زبان های مورد استفاده توسط توسعه دهنده های وب رو پشتیبانی میکنه،‌مثل این موارد: HTML – CSS – JavaScript – TypeScript – GraphQL – ReactJS و…

VS Code Plugin - پلاگین

۴. JavaScript (ES6) Code Snippets

تمام توسعه دهنده های وب،‌ احتمالا یه بار گذرشون به جاوااسکریپت و کتابخونه ها و فریم ورک های متعددش افتاده (برنامه نویس های فرانت اند که رسما باهاش زندگی میکنن) الانم با توجه به روی بورس بودن جاوااسکریپت ورژن ۶ (ES6)،‌باید حتما بتونید با این ورژن کار کنید.

پلاگین JavaScript (ES6) Code Snippets با استفاده از امکاناتی که داره، میتونه خیلی روی سرعت و دقت شما تاثیر بذاره و با قطعه کد های آماده ای که داره، بخش های زیادی از برنامه شما رو تکمیل میکنه و همین قضیه،‌ حداقل ریسک غلط های تایپی رو کمتر میکنه! (و قطعا سرعت رو هم بالا می بره)

VS Code Plugin - پلاگین ES6

۵. Sass

این پلاگین بیشتر بدرد برنامه نویس های فرانت اند میخوره و همونطور که از اسمش هم مشخصه،‌ توی نوشتن استایل ها با پیش پردازنده Sass به کارتون میاد.

این افزونه،‌ با تکمیل کردن خودکار و تصحیح Syntax کد، باعث میشه که بتونین روی خود کد و هدفی که دارید تمرکز کنید و درگیر جزئیات ریز و وقت گیر نشید.

البته یه افزونه دیگه هم وجود داره که میتونه این یکی رو تکمیل کنه:‌ Live Sass! با استفاده از این یکی هم میتونید به راحتی توی محیط VS Code فایل های استایل رو که با استفاده از پیش پردازنده نوشتید،‌ اجرا کنید. (قبلا یه دوره برای آموزش Sass نوشتم توی سایت که میتونید استفاده کنید.)

VS Code Plugin - پلاگین Sass

۶. Path Intellisense

یکی دیگه از افزونه های مورد علاقه من! وقتی که دارید با تعداد زیادی فایل کار میکنید که قراره به هم متصل بشن، نوشتن و پیدا کردن آدرس هر فایل، تبدیل به یه کار وقت گیر میشه. (این اتفاقات مخصوصا توی ری اکت زیاد می افته، چون اونجا توی اکثر پروژه ها با تعداد زیادی Component سر و کله میزنیم)

پلاگین Path Intellisense کمک میکنه که خیلی سریع آدرس فایل های دیگه رو توی کدتون وارد کنید و از بخش Import کردن خیلی سریع رد بشید.

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

VS Code Plugin - پلاگین

۷. Debugger for Chrome

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

افزونه Debugger for Chrome که توسط خود شرکت مایکروسافت (سازنده VS Code) طراحی شده، محیط دیباگر کروم رو توی خود ادیتور بهتون ارائه میده و همونجا میتونید همه کارا رو انجام بدید.

اینجوری، دیگه نیاز نیست مدام بین مرورگر و ادیتور جابجا بشید. (توی پرانتز باید اعلام کنم که مرورگر مورد علاقه خود من، اپراست ^ـ^)

VS Code Plugin - پلاگین

۸. ESLint

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

ویژگی مثبت دیگه ای که این پلاگین داره،‌ امکان شخصی سازی اونه که میتونید با توجه به خواست و نیازتون، تغییرش بدین!

VS Code Plugin - پلاگین ESLint

۹. SVG Viewer

استفاده از فرمت SVG توی تکنولوژی وب داره فراگیر میشه و خب امکانات زیادی هم برای دولوپرها فراهم میکنه. بخاطر همین، VS Code از طریق این افزونه،‌تصمیم گرفته که به شما اجازه نمایش فایل های SVG رو بده!

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

VS Code Plugin - پلاگین SVG

۱۰. پوسته ها و تم ها

تم تیره بین برنامه نویسا به شکل ترسناکی محبوبه (برای خود منم همینطور! البته یکی دو بار سعی کردم تم روشن و سفید رو امتحان کنم ولی خیلی ارتباط برقرار نکردم :/ )

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

خوشبختانه گزینه های رایگان زیادی برای خوشگلتر کردن VS Code وجود داره که میتونید از مارکت ویژوال استودیو اونا رو دانلود کنید و لذت ببرید. مثل:‌ One Monokai –  One Dark ProMaterial Icon – و …

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

مطالب مشابه

۱ دیدگاه. دیدگاه جدید بگذارید

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

Fill out this field
Fill out this field
لطفاً یک نشانی ایمیل معتبر بنویسید.
You need to agree with the terms to proceed

فهرست