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



visibility  
mode_comment   ۰

در این مطلب بهترین و معروفترین افزونه های ویرایشگر Visual Studio Code یا به اختصار VSCode رو در اختیارتون قرار میدیم که بیشتر مرتبط با Javascript هستند و سرعت توسعه دادن کدهاتون رو بسیار بیشتر میکنن و لذت کدنویسی رو بالا میبرن.بهترین افزونه های Visual Studio Code برای 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

متخصص وردپرس
دوست داری از طریق برنامه نویسی کسب درآمد کنی؟ اگر می خوای با برنامه نویسی وب و موبایل کسب درآمد کنی، جایی استخدام شی و یا حتی اینکه درامد ارزی داشته باشی، حتما دوره های متخصص سون لرن رو یه نگاه بنداز : متخصص شو arrow_back

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

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

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

Todo Highlighter

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

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

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

Import cost

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

Rest Client

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

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

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

Source

comment دیدگاه کاربران

نیاز به لاگین

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