بهترین افزونه های Visual Studio Code برای Javascript - قسمت 1

در این مطلب بهترین و معروفترین افزونه‌های ویرایشگر Visual Studio Code یا به اختصار VSCode رو در اختیارتون قرار میدیم که بیشتر مرتبط با Javascript هستند و سرعت توسعه دادن کدهاتون رو بسیار بیشتر میکنن و لذت کدنویسی رو بالا میبرن.

بهترین افزونه‌های Visual Studio Code برای Javascript

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

هزاران افزونه برای این ویرایشگر محبوب ساخته شده و هر روز به تعداد اونا اضافه میشه. در اینجا تعدادی از بهترین و کاربردی‌ترین افزونه‌ها رو بهتون معرفی میکنیم که بهتره از اون استفاده کنید.

Quokka.js

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

بعد از اینکه این افزونه رو نصب کردید، شما میتونین کلیدهای ترکیبی ctrl+shift+p رو بزنید تا Command pallete ویرایشگر VSCode نمایش داده بشه و در اونجا کلمه Quokka رو تایپ کنید تا لیستی از تمام دستورات این افزونه رو ببینید. از این لیست گزینه New Javascript FIle رو انتخاب کنید تا یک فایل Javascript جدید با ویژگی خاص برای شما ساخته بشه. حالا شما میتونین در فایل جدید ساخته شده کدهای مورد نظر خودتون رو بنویسید و همزمان که دارید تایپ میکنید خروجی کدها نمایش داده میشه و اگر اروری هم وجود داشته بهتون نشون میده.

افزونه‌های مشابه:

• Code runner: این افزونه زبانهای مختلفی رو پشتیبانی میکنه مثل C و Java و Javascript و PHP و Python و Perl و ...
• Runner

Bracket pair colorizer و Indent rainbow

همونطور که میدونین استفاده از {} و پرانتز عضو جدایی ناپذیری از بیشتر زبانهای برنامه نویسی می‌باشد. در یک فایل که کدهای Javascript زیادی قرار داده شده تعداد زیادی براکت و پرانتز وجود داره که بصورت تو در تو می‌باشند و نمیشه به خوبی تشخیص داد که کدوم براکت در کجا باز میشه و در کجا بسته میشه و نیاز داره مقداری کدهای رو بررسی و بالا و پایین کنیم تا انتهای اون رو تشخیص بدیم. بعضی وقتا هم اشتباه پاک میکنیم و باعث به وجود اومدن مشکل میشه. در اینجا شما میتونین از دو افزونه Bracket pair colorizer و Indent rainbow استفاده کنید که اگرچه دو افزونه جداگانه هستند ولی به خوبی میشه اونا رو در کنار یکدیگر استفاده کرد و ترکیب خوبی هستند.

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

بعد از استفاده از این افزونه ها، کدها بصورت زیر میشن:

به همین راحتی.

Snippets

Snippet همون تکه کدهایی هستند که با استفاده از خلاصه نویسی و با سرعت میتونیم اونا رو تولید کنیم. مثلا بجای نوشتن کل عبارت import React from 'react'; میتونین کلمه imr رو تایپ کنید و Tab رو فشار بدین و کل عبارت قرار میگیره و شما میتونین تغییرات مورد نظرتون رو انجام بدین. مثلا اگر clg رو تایپ کرده و Tab بزنید به console.log تبدیل میشه.

Snippet‌های مختلف و زیادی برای کتابخانه‌های مختلف وجود داره مثل React و Angular و Vue و زبانهای برنامه نویسی دیگر و ...

اگر زیاد با Javascript سر و کار دارید پیشنهاد میکنم که از این Snippet‌ها استفاده کنید تا سرعت کدنویسی خودتون رو افزایش بدین. بعضی از افزونهای خوب در این زمینه رو معرفی میکنیم:

• JavaScript (ES6) code snippets
• React-Native/React/Redux snippets for es6/es7
• React Standard Style code snippets

Todo Highlighter

بیشتر وقتا پیش میاد که مثلا شما یک تابع رو به وجود میارید و پیش خودتون فکر میکنید که راه بهتری برای انجام این کار هست. در این مواقع شما مثلا یک Comment مثل // TODO: Needs Refactoring رو به کدهاتون اضافه میکنید و برای خودتون یک یادآور میزارید که مثلا اینجای کدها رو باید درست کنید. اما بعضی اوقات این Comment‌ها رو فراموش میکنید و کدهاتون رو به محیط Production میفرستید تا کاربران از اون استفاده کنن. با استفاده از افزونه Todo Highlighter دیگه این اتفاق نمیوفته.

این افزونه همه Todo هایی که در کدهاتون قرار میدید رو بصورت رنگی در میاره و میتونین اونا رو مشاهده کنید. یک گزینه بنام List highlighted annotation وجود داره که با استفاده از اون همه Todo‌ها برای شما لیست میشن و میتونین اونا رو مشاهده کنید.

افزونه‌های مشابه:

• Todo+
• Todo Parser

Import cost

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

Rest Client

هر توسعه دهنده وبی نیاز داره که با Rest API کار کنه و استفاده از اون رو بلد باشه. برای بررسی مسیرهای مختلف و بررسی جواب اونا از سمت سرور میتونیم از ابزارهایی مثل Postman استفاده کنیم. افزونه Rest Client امکاناتی رو در اختیارتون قرار میده که شما رو از Postman بی نیاز میکنه. با استفاده از افزونه Rest Client میتونین درخواستهای HTTP رو به سمت سرور بفرستید و جواب رو در VSCode مشاهده کنید.

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

امیدوارم از این موارد خوشتون اومده باشه.

Source

نویسنده

محمد اسفندیاری

بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.