تخفیف ویژه

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

دسته بندی: آموزش
زمان مطالعه: 4 دقیقه
۳۱ فروردین ۱۳۹۷

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

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

Auto close tag و Auto rename tags

همونطور که میدونین در React از JSX استفاده میشه و بسیار شبیه به HTML هست و باید تگهای مورد نظرتون رو باز کنید و در انتها ببندید. یکی از کارهایی که با گذشت زمان و تکرار زیاد انجام دادنش باعث اذیت میشه همین قرار دادن تگ‌ها هست. در بسیاری از مواقع میتونیم از ابزارهایی برای ساخت سریع تگ‌های تو در تو استفاده کنیم. Emmet یک افزونه خیلی خوب در این زمینه هست که بصورت پیش فرض در VSCode مورد استفاده قرار میگیره. هرچند که در بعضی از موارد هم شما میخواید یک کار ساده انجام بدین. مثلا میخوایم کاری کنیم که وقتی تگ ابتدایی رو تغییر میدیم در همون لحظه تگ پایانی هم تغییر کنه و دیگه نیاز نباشه که کار تکراری انجام بدیم.

برای این منظور شما میتونین از دو افزونه Auto rename tags و Auto close tags استفاده کنید و سرعت کدنویسی خودتون رو افزایش بدین. در تصاویر زیر میتونین کاربرد این افزونه‌ها رو ببینید:

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

GitLens

با استفاده از این افزونه قابلیتهای Git در ویرایگشر VSCode خیلی بیشتر میشه و میتونین تمامی چیزهای مربوط به Git رو در VSCode انجام بدین. با استفاده از این افزونه میتونین بفهمید که چه خطی رو چه کسی و در چه تاریخی عوض کرده است و اینکه در History و Commit‌ها جستجو کنید و ...

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

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

  • Git history: مشاهده نموداری زیبا از تاریخچه Git و موارد دیگر. استفاده از این افزونه پیشنهاد میشه.
  • Git Blame: این افزونه به شما اجازه میده که اطلاعات مربوط به Git blame خط انتخاب شده فعلی رو در Status bar مشاهده کنید.
  • Git indicators: این افزونه به شما میگه که کدون فایلها تغییر داشتن و اینکه چند خط اضافه یا حذف شده است.

Git project manager

Git project manager به شما اجازه میده که Repository‌های مختلفی رو بصورت همزمان باز کنید و بر روی اونا کار کنید و دیگه نیازی نباشه که پروژه فعلی بسته بشه. با اینکار میتونین در VSCode پروژه‌های مورد نظرتون رو انتخاب کنید و بر روی اونا کار کنید. کد زیر رو ببینید:

{
    "gitProjectManager.baseProjectsFolders": [
        "/home/user/nodeProjects",
        "/home/user/personal/pocs"
    ]
}

با این روش میتونیم مسیر پروژه‌های خودمون رو درون آرایه قرار بدیم و به VSCode بفهمونیم. یک افزونه مشابه و معروف بنام Project manager وجود داره که میتونین از اون هم استفاده کنید.

Indenticator

این افزونه هر جا که Cursor قرار داشته باشه عمق Indent یا تورفتگی اونجا رو مشخص میکنه. پس بهتر میشه فهمید که هر بلاک کجا شروع میشه و کجا به پایان میرسه. برای مطالعه بیشتر در مورد این افزونه به این لینک مراجعه کنید. همچنین میتونین از افزونه Guides هم استفاده کنید.

VSCode icons

VSCode icons آیکونهای متناسب با هر نوع فایل و فرمت و پوشه رو برای شما فراهم میکنه و بهتر میتونن فایلها رو تشخیص بدین و ویرایشگر زیباتر میشه. از VSCode great icons و Studio icons هم میتونین استفاده کنید.

تم Dracula

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

پیشنهادات دیگه برای افزونه‌های این ویرایشگر:

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

Source

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

نظرات کاربران

فلاح نژاد

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

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

خواهش میکنم موفق باشید دوست عزیز

ارسال دیدگاه
خوشحال میشیم دیدگاه و یا تجربیات خودتون رو با ما در میون بذارید :