برترین افزونه‌های VSCode برای JavaScript، در جهت توسعه سریع‌تر

گردآوری و تالیف : عرفان کاکایی
تاریخ انتشار : 22 شهریور 1397
دسته بندی ها : آموزشی

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

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

Quokka.js

Quokka.js یک محیط نمونه سازی سریع برای JavaScript و TypeScript است. به عبارتی Quokka.js به محض این که کد را تایپ می‌کنید، آن را اجرا کرده و نتایج اجرایی مختلفی را در ویرایشگر کد شما نمایش می‌دهد.

پس از نصب این افزونه، می‌توانید کلیدهای ترکیبی Ctrl / Cmd + Shift + P را بفشارید، تا command palette این ویرایشگر را نمایش دهید، و سپس دستور Quokka را تایپ کنید تا لیست دستورهای موجود را ببینید. دستور New JavaScript File را انتخاب کرده، و اجرا کنید. همچنین می‌توانید کلیدهای Ctrl / Cmd + K + J را بفشارید، تا مستقیما فایل را باز کنید. هر چیزی که در این فایل بنویسید، سریعا اجرا خواهد شد.

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

  • Code Runner - از زبان‌های مختلفی مانند C، C++، Java، JavaScript، PHP، Python، Perl، Perl 6 و... پشتیبانی می‌کند.
  • Runner

Bracket Pair Colorizer و Indent Rainbow

براکت‌ها و پرانتزها یک بخش جدا نشدنی از بسیاری از زبان‌های برنامه‌نویسی هستند. در زبانی مانند JavaScript، یک صفحه تنها می‌تواند زلزله‌ای از این کاراکترها، بدون هیچ‌گونه مکانیزم برای تشخیص باز شدن و بسته شدن پرانتزها داشته باشد. به Bracket Pair Colorizer و Indent Rainbow خوش‌آمد بگویید. این‌ها دو افزونه جدا هستند. گرچه به همراه یکدیگر، یک جفت بسیار عالی می‌سازند. این افزونه‌ها ویرایشگر شما را پر از رنگ خواهند کرد، و باعث خواهند شد که بلوک‌های VSCode شما قابل تشخیص شده، و به چشم زیبا به نظر برسند. پس از این که به آن‌ها عادت کنید، VSCode بدون آن‌ها دلنشین نخواهد بود.

قطعه کدها

قطعه کدها در یک ویرایشگر، حکم مختصر کننده کد را دارند. پس به جای نوشتن import React from ‘react’;، می‌توانید بنویسید imr و سپس دکمه Tab را بفشارید تا این قطعه کد را گسترش دهید. یا مثلا، clg تبدیل به console.log خواهد شد.

تعداد زیادی قطعه کد برای همه نوع کد وجود دارد: JavaScript، React، Redux، Angular، Vue، Jest.

برخی از بهترین افزونه‌های قطعه کد:

برجسته‌ساز Todo

دفعات زیادی پیش می‌آیند که یک تابع را می‌نویسید، و سپس فکر می‌کنید که احتمالا راه بهتری برای انجام همین کار وجود دارد. در اینگونه موارد، کامنتی مانند «نیاز به بازسازی» را در آنجا قرار می‌دهید. اما سپس این نکته را فراموش کرده، و کد خود را به بخش تولید می‌رسانید. با استفاده از Todo Highlighter، دیگر این اتفاق نخواهد افتاد.

این افزونه، کامنت‌های شما یا هر نوع حاشیه نویسی دیگر در کد شما را در رنگ‌های روشن قرار خواهد داد، تا همیشه قابل دیدن باشند. یکی از امکانات عالی آن Lost Highlighted annotations است، که تمام یادداشت‌های شما را در کنسول خروجی لیست می‌کند.

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

  • Todo+ - ابزاری قدرتمندتر از Todo Highlighter، با امکاناتی بیشتر.
  • Todo Parser

Import Cost

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

REST Client

به عنوان یک توسعه دهنده وب، معمولا باید با APIهای REST کار کنیم. برای بررسی URLها و بررسی پاسخ‌ها، از ابزاری مانند Postman استفاده می‌شود. اما وقتی که ویرایشگر شما می‌تواند همین کار را انجام دهد، چرا یک برنامه جداگانه نصب کنید؟ به REST Client خوش‌آمد بگویید. این افزونه شما را قادر می‌سازد تا درخواست‌های HTTML را ارسال کرده، و پاسخ‌ها را مستقیما در Visual Studio Code مشاهده کنید.

Auto Close Tag و Auto Rename Tag

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

همچنین این افزونه‌ها با زبان‌های دیگر مانند XML، PHP، Vue، JavaScript، TypeScript و TSX نیز کار می‌کند.

Auto Rename Tag:

Auto Close Tag:

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

Git Project Manager

Git Project Manager شما را قادر می‌سازد تا مستقیما از پنجره VSCode، صفحه‌ای را باز کنید که یک مخزن را هدف قرار می‌دهد. اساسا، حال می‌توانید بدون ترک کردن VSCode، یک مخزن جدید را باز کنید.

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

مثال

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

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

  • Project Manager - این افزونه بیش از ۱ میلیون نصب دارد، پس بهتر است آن را نیز امتحان کنید.

Identicator

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

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

آیکون‌های VSCode

آیکون‌هایی برای جذاب‌تر کردن ویرایشگر خود!

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

تم Dracula

یک تم جذاب!

منبع

مقالات پیشنهادی

بررسی VSCode برای توسعه‌دهندگان Front-End

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

4 نکته مهم برای تبدیل شدن به یک توسعه‌دهنده

همه ما با یکسری از توقعات وارد دنیای کدنویسی شده‌ایم. مطمئنا باید بدانید که این مسئله ساده نیست و لازم است که برای آن سخت کار کنید. شما آماده‌اید که ز...

۵ ابزار برای توسعه سریع‌تر در Vue.js

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

منابع تازه برای توسعه دهندگان Front-end - سری 9

امروزه ابزار ها ، کتابخانه ها و فریمورک های مختلفی بصورت روزانه برای توسعه دهنگاه Front-end ارائه می شود تا آنها بتوانند سریع تر ، بهتر و راحتر پروژه...