آموزش رایگان برنامه نویسی در کانال یوتیوب yasharhabibimedia
سبد خرید
0

هیچ محصولی در سبد خرید نیست.

افزونه های vscode بهترین ویرایشگر کد برای جاوااسکریپت

افزونه های vscode بهترین ویرایشگر کد برای جاوااسکریپت

مطلب پیشنهادی:آموزش رایگان برنامه نویسی

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

vscode، بهترین ویرایشگر کد برای جاوااسکریپت

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

به غیر از vscode، ویرایشگرهای دیگه‌ای هم هستن ولی برای js کارا خیلی مناسب نیستن. مثلا اگه بخواین با sublime text کد js بزنین، کارتون سخت و کند میشه. ولی توی vscode به راحتی می‌تونید با باز کردن محیط کامند، نتیجه کدهاتون رو همون جا توی ویرایشگر ببینید. که در ادامه افزونه مناسب این کار رو بهتون معرفی می‌کنم. راستی vscode رو می تونید از لینک زیر دانلود کنید.

دانلود ویرایشگر کد vscode

افزونه‌های کاربردی vscode

افزونه های زیادی برای vscode ایجاد شده که هرکدوم کاربرد خاص خودش رو داره. برای مثال برای سریع شدن کدنویسی از افزونه ای استفاده کنید که به صورت خودکار کدها رو سیو کنه. یا این که افزونه ای رو نصب کنید که کدهای یه زبان خاص رو براتون به صورت خودکار کامل کنه. مثلا شما با تایپ کردن حرف اول یک تابع یا کلمه کلیدی، لیستی از پیشنهادات رو می بینید که کلمه شما رو کامل می‌کنن و می‌تونید هر کدوم رو که خواستید انتخاب کنید. در ادامه تاپ‌ترین افزونه‌های vscode برای js کارا رو می‌خوام معرفی کنم که باعث می‌شن کارتون سریع‌تر پیش بره.

افزونه Quokka.js

این افزونه برای js کارا خیلی خوب و مناسبه. چون کارشون رو سریع و ساده می‌کنه. وقتی دارید با js کار می‌کنید و می‌‎خواین نتیجه کدتون رو ببینید، دیگه نیازی نیست مرتب مرورگر رو باز کنید. فقط کافیه این افزونه رو نصب کنید. خودش خیلی سریع نمونه‌سازی اولیه رو انجام می‌ده و نتیجه رو توی خود ویرایشگر می‌تونید ببینید.

بعد از نصب این افزونه توی vscode، محیط کامند ادیتور رو باز کنید و دستور Quokka رو تایپ کنید. با این دستور می‌تونید لیستی از کامندهای قابل استفاده رو ببینید. همچنین با باز کردن یک فایل جاوااسکریپیتی جدید، هر دستوری که تایپ می‌کنید، بلافاصله اجرا می‌شه و نتیجه در کامند قابل دیدن هست. افزونه‌هایی مثل Runner و Code Runner هم شبیه به این افزونه عمل می‌کنن.

افزونه Bracket Pair Colorizer and Indent Rainbow

یکی از رایج ترین خطاهایی که توی برنامه نویسی وجود داره، خطاهای سینتکسی هست(Syntax). به این معنی که قواعد اون زبان رو درست رعایت نکردیم و یک جایی غلط املایی داشتیم. بیشترین جایی که باعث خطا میشه، درست نذاشتن براکت‌ها و پرانتزهاست. این افزونه دقیقا برای حل همین مشکل ایجاد شده.

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

بدون bracket pair

با bracket pair

افزونه Snippets

اگر دوست دارید که حرفه‌ای و سریع کد بزنید، این افزونه می‌تونه یکی از کاربردی‌ترین افزونه‌هایی باشه که نصب می‌کنید. با استفاده از این افزونه شما به راحتی به زدن یک شورتکات کوچیک و چند حرفی می تونید یه تیکه کد رو سریع بنویسید. برای مثال وقتی دارید کد ری اکت (Reactjs) می زنید، برای import کردن react نیازی نیست کد کاملش رو بنویسید. فقط کافیه از imr استفاده کنید.

با وارد کردن این سه تا حروف، قطعه کد مربوط به امپورت کردن کتابخانه ری اکت براتون کامل نوشته می‌شه. یا مثلا هر وقت خواستید، از کد کنسول لاگ استفاده کنید، فقط کافیه clg رو بنویسید تا console.log رو به صورت خودکار کامل کنه. افزونه‌های کاربردی دیگه‌ای هم هستن که شبیه به این افزونه کار می‌کنن. مثل افزونه‌های Javascript (ES6) code snippets، React Standard Style Code Snippets.

افزونه Todo Highlighter

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

این افزونه چنین کامنت‌هایی رو هایلات می‌کنه تا برنامه‌نویس اونو ببینه. کامنتی که در کنار این کدها نوشته میشه معمولا //TODO: Needs Refactoring هستش. Todo Highlighter این کامنت‌ها رو هایلات و برجسته می‌کنه تا درون کد دیده بشن.

افزونه Import Cost

این افزونه حجم ماژول‌هایی که ایمپورت می‌کنید رو بهتون نشون می‌ده. این افزونه کمک زیادی به بسته‌های نرم افزاری از جمله وب پک (webpack) می‌کنه. با کمک این افزونه می‌تونید دقیقا بفهمید که دارید کل کتابخونه رو ایمپورت می‌کنید یا این که نه، فقط یک ابزار خاصی رو ایمپورت کردید.

فقط یه نکته‌ای در مورد این افزونه وجود داره، این هست که برای فایل‌ها و ماژول‌های کاستوم یا شخصی‌سازی شده کار نمی‌کنه و چیزی رو نشون نمیده. افزونه Import Cost یکی از افزونه‌هایی هست که پیشنهاد میشه نصب کنید. خصوصا اگر react کار می‌کنید.

افزونه REST Client

برنامه نویسان وب، همیشه از RESR API استفاده می‌کنن. اغلب اونا برای بررسی درخواست‌ها و پاسخ‌ها از برنامه postman استفاده می‌کنند. با نصب این افزونه، دیگه نیازی به استفاده از postman ندارید. وقتی که افزونه به دردبخوری مثل REST Client وجود داره، دیگه چه کاریه از برنامه دیگه‌ای استفاده کنیم؟ با استفاده از این افزونه می‌تونید درخواست‌های http خودتون رو ارسال کنید و همون‌جا توی ویرایشگر، نتیجه رو به صورت مستقیم ببینید.

افزونه Auto close Tag and Auto Rename Tag

این دو افزونه به برنامه‌نویسا کمک می‌کنن که توی وقتشون صرفه جویی کنن و دیگه کارای کسل کننده نوشتن کامل یک تگ و تغییر نام رو انجام ندن. با نصب این دو افزونه تگ مورد نظر شما خیلی سریع تولید میشه و اگر خواستید اسمش رو عوض کنید خیلی سریع و کوتاه هم تگ باز و هم تگ بسته همزمان اسمشون عوض می شه. برای html، php، js، XML و JSX می تونید از این افزونه‌ها استفاده کنید. به جز این دو افزونه، برنامه نویسا از Emmet هم استفاده می‌کنند. ولی این افزونه‌ها، خیلی ساده و سبک هستن و پیچیدگی خاصی ندارن.

افزونه GitLens

برنامه‌نویس این افزونه گفته که افزونه GitLens امکانات بیشتری رو به قابلیت‌های گیت در vscode اضافه می‌کنه. این افزونه تعداد زیادی ویژگی با کاربردهای خاص داره. مثل commit search، تاریخچه و اکسپلورگیتلنس. یکی از ویژگی‌های دیگه‌ای که این افزونه داره نمایش دادن نام نویسنده کد هست.

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

افزونه Git Project Manager

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

gitProjectManager.baseProjectsFolders

جمع بندی

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

امتیاز 4.5 از 2 رای

20

من یاشار حبیبی 15 سال تو حوزه برنامه نویسی وب در حال فعالیت هستم و اینجا قراره تجربیاتم رو باشما به اشتراک بزارم و باهم کلی چیز یادبگیریم و لذت ببریم

دیدگاه کاربران
  • mesahg13 7 خرداد 1400 / 2:49 ب.ظ

    یادگیری ویم برای برنامه نویس نون از شب واجبتره

ارسال دیدگاه

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

توسط
تومان