افزونه های کاربردی VSCode برای فول‌استک‌ها

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

همه جا به کار بیا:

Material Icon Theme:

این افزونه آیکون فایل‌هاتون رو خیلی خوشگل‌تر و دلچسب‌تر میکنه

Atom Keymap:

من از atom به VSCode مهاجرت کردم، از دید من keymap اتم خیلی دلچسب تر هست و راحت‌تر میتونم از میانبرهای کیبورد استفاده کنم، من که خیلی باهاش راحت‌تر هستم.

Atom One Dark Theme:

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

Better Align:

همونطور که می‌بینید خیلی چینش رو بهتر میکنه، از شلوغی کد خیلی کمتر میشه

Bracket Pair Colorizer:

این افزونه با رنگی کردن بین براکت باز و بسته، محدوده‌ی کد رو مشخص میکنه، توی تمام زبان‌ها احتمالا به جز پایتون به کار میاد (;

Code Spell Checker:

موس دستتون هست بذارید زمین این رو نصب کنید اول! اشتباه‌های املاییتون رو توی کد تشخیص میده، علاوه بر خوانا شدن خیلی بیشتر کد، گاهی ممکنه به جای state مثلا بنویسید steta و یک ساعت دنبال خطای کد بگردید و اشکالی پیدا نکنید. این خیلی خیلی بهتون کمک میکنه

Code Time:

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

Comment Anchors:

این افزونه رو هم خیلی بهتون پیشنهاد میکنم، به منوی سمت چپ یه آیکون اضافه میکنه که میتونید بین کامنت‌هایی که گذاشتید جا به جا بشید. لیست کامنت‌هاتون رو مثل یک ToDo لیست خوب براتون میچینه که همیشه بهش دسترسی داشته باشید

EditorConfig for VS Code:

شاید شما هم وقتی یه پروژه رو از گیت‌هاب کلون کردید یه فایل ادیتور کانفیگ دیدید. این یک استاندارد هست تقریبا که ادیتور شما رو (سایز تب، داشتن semicolon یا single quote/double quote بودن و…) مثل بقیه‌ی توسعه دهنده‌ها تنظیم میکنه. با نصب این افزونه این امکان رو میتونید روی وی‌اس‌کد داشته باشید.

final-newline:

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

Indenticator:

این افزونه تو رفتگی کدها رو خیلی بهتر نشون میده بهتون

Path Intellisense:

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

وب (HTML, CSS, JS):

Auto Close Tag:

بستن خودکار تگ پایان

Auto Complete Tag:

تکمیل خودکار اسم تگ‌ها

Auto Rename Tag:

تغییر نام خودکار تگ باز و بسته

Beautify:

خوشگل کننده‌ی خودکار javascript, JSON, CSS, Sass, HTML

CSS Peek:

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

IntelliSense for CSS class names in HTML:

از دید من مهم‌ترین افزونه‌ی این قسمت هست این. بهتون اسم کلاس‌های css فایل‌های لینک شده به صفحه‌تون رو پیشنهاد میده.

JavaScript (ES6) code snippets:

اگر از JavaScript 2015 به بعد استفاده می‌کنید، این افزونه بهتون کمک می‌کنه. این البته به کار دسته‌ی بعدی هم میاد ولی خوب برای طراحی وب سنتی هم کارآمد هست

ری‌اکت / ری‌اکت نیتیو و ابزارهای مدرن وب:

Auto Import:

وقتی اسم یه کتابخونه رو صدا بزنید، خودکار براتون ایمپورتش میکنه به صفحه

Babel ES6/ES7:

کتابخونه‌ی Babel ابزار خیلی قدرتمند و معروفی هست که کد ES6 به بعد شما رو به ES5 تبدیل میکنه. اینطوری شما با تازه‌ترین ویژگی‌های جاوااسکریپت برنامه مینویسید اما روی قدیمی‌ترین مرورگرها هم کار میکنه کدتون. این افزونه رنگ‌بندی مناسب es6 رو برای شما اعمال میکنه

CSS to JSS:

همونطور که میدونیم ری‌اکت از JSX و JSS به جای html, css توی کامپوننت‌ها استفاده میکنه. این ابزار css شما رو مستقیما به jss تبدیل میکنه و میتونید به صورت inline به راحتی ازش استفاده کنید

DotENV:

فایل .env (مخفف environment)، فایل شناخته شده و کاربردی هست که ثابت‌های برنامه‌هامون رو خارج از کد برنامه داخلش میذاریم. فرض کنید که توکن‌هامون رو میذاریم داخلش و این باعث میشه یه وقت موقع پوش کردن کد فراموش نکنیم توکن‌ها رو ازش حذف کنیم و کسی هم دنبال جایگزین کردن توکن و رمز و… توی کدها نخواد بگرده. یه استاندارد خوب هست برای این چنین چیزهایی. این افزونه نوشته‌های توی این فایل رو رنگی منگی میکنه و بهتر میشه ازش استفاده کرد

ES7 React/Redux/GraphQL/React-Native snippets:

این ابزار هم کلی مخفف کاربردی بهتون میده که خیلی کمک کننده هست. مثلا با rafc (مخفف React Arrow Function Component) و اینتر زدن، خیلی سریع یه کامپوننت ری‌اکت میسازه برای من

ESLint:

بدون این افزونه نباید کد زد اصلا! ESLint ابزار فوق‌العاده کاربردی هست که یک سری قوانین رو برای کدهای شما مشخص میکنه. میتونید بهش بگید فانکشن‌هایی که منسوخ شدن رو نذاره استفاده کنید یا بهتون اخطار بده و…

Flow Language Support:

جاوااسکریپت به صورت پیش‌فرض نیازی به مشخص کردن نوع متغییرها نداره یا اصطلاحا Dynamic هست، این ممکنه بعضی مواقع مشکلاتی به همراه داشته باشه، این افزونه پشتیبانی از static type checker flow رو براتون فراهم میکنه.

Prettier – Code formatter:

افزونه‌ی خیلی کاربردی برای مرتب کردن و سر و سامون دادن به کدهاتون

React Snippet و ES7 React/Redux/GraphQL/React-Native snippets و React-Native/React/Redux snippets for es6/es7:

اینا هم یک سری دسترسی مخفف هستن برای کارهای طولانی، من همشون رو دارم ولی شما ببینید کدوم بیشتر به کارتون میاد. من از هر کدوم به یکی دوتا “مخفف‌کد”ش عادت کردم همه رو با هم دارم

وردپرس:

Autocomplete WordPress Hooks:

اگر افزونه برای وردپرس مینویسید این کاربردی‌ترین ابزاری هست که میشناسم براش. هوک‌های وردپرس رو بهتون پیشنهاد میده

WordPress Devlopment:

این هم یک سری “مخفف‌کد” بهتون میده که سریع تر کار کنید

WordPress Snippets:

این هم مخفف‌کد میده و علاوه بر اون کامل‌کردن‌خودکار هم بهتون میده.

پی‌اچ‌پی و لاراول:

PHP Debug:

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

PHP IntelliSense:

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

phpfmt – PHP formatter:

این هم یک افزونه‌ی خوب برای سر و سامون دادن به کدهاتون هست، بر خلاف JavaScript که کلی افزونه برای این کار میشه براش پیدا کرد، برای php خیلی انتخابی نیست ولی ایشون از خوباشون هستن

Laravel Artisan:

این افزونه امکان کار کردن با Artisan رو بدون کامندلاین فراهم میکنه، برای من بیشتر کمک میکنه وقتی دنبال یه قابلیت آرتیسان هستم سریع پیداش کنم وگرنه کامندلاین رو ترجیح میدم معمولا

Laravel Assist:

دستیار شخصی شما برای لاراول کد زدن! کلی قابلیت خوب مثل پیشنهاد روت‌ها و کار با بلید و…

Laravel Blade Snippets:

“مخفف‌کد”های بلید لاراول همراه با آخرین مواردی که توی هر ورژن لاراول اضافه میشه. البته شاید یه کم کار کردن باهاش متفاوت باشه اگر قبلا از PHP Storm استفاده میکردید ولی اگر بهش عادت کنید خیلی ابزار خوبیه

Laravel Docs:

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

Laravel Extra Intellisense:

این به شما کنترلرها، روت‌ها و ویوهاتون رو پیشنهاد میکنه موقع نوشتن

Laravel Go to view:

خیلی ساده و کاربردی وقتی روی فراخوان یک ویو کلیک میکنید، اون ویو رو براتون باز میکنه

laravel-goto-controller:

اینم همون بالایی هست ولی برای کنترلرهاتون

Laravel Snippets:

اینم بدون شک یکی از بهترین هاست! از احرازهویت و کوکی و دیتابیس گرفته تا فرم‌ها و کانفیگ‌ها و هلپرها کنار شماست!

۴۴ تا افزونه‌ای که من استفاده میکردم به ته رسید! ولی افزونه‌های خوب ته نداره… شما هم افزونه‌هایی که کاربردی هست براتون رو بهم معرفی کنید