5 مورد از بهترین VS Code Extension ها برای توسعه‌دهندگان جاوااسکریپت (بخش اول)
ایمان مدائنی

جاوااسکریپت یکی از محبوب‌ترین زبان‌های برنامه‌نویسی است که دارای کامپوننت‌ها، فریم‌ورک‌ها و ابزارهای مختلف است. یکی از محبوب‌ترین ویرایشگرها ویژوال استودیو یا VS Code است، که یک ویرایشگر کد سبک است.

 

 

موفقیت ویژوال استودیو عمدتا به دلیل توانایی ارائه ثبات و عملکرد می‌باشد. علاوه‌براین، ویژگی‌های بسیار مورد نیاز، از جمله IntelliSense را فراهم می‌کند که فقط در IDEهایی فول سایز مثلVisual Studio 2017 یا Eclipse در دسترس است.

قدرت ویژوال استودیو کد از جامعه open-source تامین می‌شود زیرا اکنون قادر است تقریبا از هر زبان برنامه‌نویسی، فناوری توسعه و فریم‌ورکی پشتیبانی کند. علاوه‌براین از های‌لایت‌سازی سینتکس، ویژگی‌های IntelliSense وEmmet  و اسنیپت‌ها پشتیبانی می‌کند.

موارد زیر برخی از محبوب‌ترین اسنیپت اکستنشن‌های جاوااسکریپت است.

1. StandardJS JavaScript code snippets: برای توسعه‌دهندگانی که سبک قرارداد StandardJS را انتخاب می‌کنند بسیار مناسب است. اسنیپت‌ها هیچ سیمیکالونی ندارند.

2. JS Code snippets: در حال حاضر با بیش از 3 میلیون نصب محبوب‌ترین است. سینتکس ES6 را برای JavaScript، HTML، React، TypeScrip دارد. همه اسنیپت‌ها دارای سیمیکالون نهایی هستند.

3. اسنیپت‌های جاوااسکریپت Nathan Chapman: مجموعه‌ای از اسنیپت‌های JS با تقریبا 33000 نصب است. اکستنشن پشتیبانی از فریم‌ورک‌های BDD Testing، یعنی Jasmine، Mocha و Node.js را فراهم می‌کند.

4. JavaScript Standardjs Styled Snippets توسط Capaj: این محبوب‌ترین اسنیپت استاندارد دارای 72000 نصب است. در اصل از اسنیپت‌های Atom StandardJS است. اسنیپت‌ها از JavaScript، React و TypeScript پشتیبانی می‌کنند.

5. Atom JavaScript Snippet ساخته شده توسط Saran Tanpituckpong: با بیش از 26000 نصب، از اکستنشن atom/ JavaScript منتقل شده‌اند.

Linter Extensions

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

JSHint. با بیش از یک میلیون نصب، به یک فایل پیکربندی jshintrc. نیاز دارد.

ESLint. با بیش از هشت میلیون نصب محبوب‌ترین است. برای نصب نیاز به پکیج‌ها و پلاگین‌ها دارد. شما همچنین باید قوانینی را برای eslintrc. تعریف کنید که اکستنشن برای linting کد (یافتن خطاهای احتمالی) استفاده می‌کند.

JSLint که JSLint library linting را ارائه می‌دهد. می‌توانید jslint را به صورت لوکال یا به صورت سراسری نصب کنید. در حال حاضر بیش از 109000 نصب دارد.

Standard JavaScript Style. با بیش از 259000 نصب، Standard JavaScript Style را با JS Standard Style در VS Code ادغام می‌کند. standard یا semiStandard باید به عنوان وابستگی توسعه (dev dependency) بر روی پروژه شما نصب شوند. شما به فایل پیکربندی نیاز ندارید زیرا فقط باید اعتبارسنج (validator) داخلی VS Code را غیر فعال کنید.

Syntax Highlighting Extension

در حال حاضر جدیدترین ویژوال استودیو کد برای پشتیبانی بهتر رنگ‌بندی سینتکس‌ها با استانداردهای گرامری اتم مطابقت دارد. اکستنشن‌هایی مثل JS Atom Grammar دیگر مورد نیاز نیستند.

با این حال، برخی از اکستنشن‌های فایل و هایت‌لایت کردن‌های سینتکس برای برخی از پروژه‌ها سودمند هستند. تعدادی از آن‌ها عبارتند از:

DotENV. با بیش از 833000 نصب، پشتیبانی از محیط‌هایی را ارائه می‌دهد که های‌لایت‌سازی سینتکس را تنظیم می‌کنند.

Bracket Pair Colorizer 2. با بیش از 730000 نصب، رنگ‌ها را مطابق با براکت‌ها های‌لایت می‌کند تا به شما در شناسایی بلوک متعلق به براکت کمک کند.

Babel JavaScript. با بیش از 550000 نصب، های‌لایت‌سازی سینتکس را برای ES201، FlowType، JS و GraphQL فراهم می‌کند.

Node Package Management Extensions

هر پروژه جاوااسکریپت باید روی یک پکیج npm باشد. برخی از اکستنشن‌های VS Code به شما کمک می‌کنند تا پکیج‌های npm را به راحتی مدیریت کنید، از جمله:

NPM by Egamma. با بیش از 2.3 میلیون نصب، از package.json برای تأیید پکیج‌های نصب‌شده استفاده می‌کند و در صورت از دست رفتن چیزی یا متناسب نبودن ورژن‌ها، گزینه‌های قابل کلیک را ارائه می‌دهد. می‌توانید اسکریپت‌های npm تعریف‌شده در package.json را داخل ویرایشگر اجرا کنید.

Path Intellisense extension. با بیش از 2.7 میلیون نصب، نام فایل‌ها را به صورت خودکار تکمیل کرده و در فایل‌های CSS و HTML کار می‌کند.

NpmIntelliSense. با بیش از 1.9 میلیون نصب، ماژول‌های تکمیل خودکار npm را در ایمپورت‌ها وارد می‌کند.

Vide Node package. با بیش از 55000 نصب، امکان مشاهده سورس پکیج Node و همچنین داکیومنت را در هنگام کار با کد فراهم می‌کند.

Formatting Extensions

گاهی اوقات، ما کدی را می‌نویسیم که با بقیه کدها هم‌تراز نیست. شما باید برگردید و تو رفتگی‌ها را در هر خط کد برطرف کنید و مطمئن شوید که تگ‌ها و بریس‌ها در یک فرمت خوانا فرمت‌بندی شده‌اند. این کار می‌تواند خسته‌کننده باشد. در عوض از اکستنشن‌هایی استفاده کنید که باعث تسریع این کار می‌شود. به خاطر داشته باشید که اکستنشن‌های Beautify و Prettier نمی‌توانند با هم فعال شوند.

Beautify. Beautify اکستنشنی از jsBeauitifier است و از JSON، JavaScript، HTML و CSS پشتیبانی می‌کند. سفارشی‌سازی می‌تواند از طریق فایل jsbeautifyrc. انجام شود. تا به امروز 4.4 میلیون نصب داشته است که در حال حاضر دومین فرمتر محبوب است.

JS Refactor extension. از ریفکتور برای کد JS استفاده می‌کند، مانند اکسترکت کردن متغیرها/متدها، کانورت کردن کدهای موجود، اکسپورت کردن توابع. تا به امروز بیش از 140000 نصب داشته است.

Prettier Code Formatter. محبوب‌ترین اکستنشنی که از جاوااسکریپت، فرمت کردن، CSS و تایپ‌اسکریپت پشتیبانی می‌کند. توصیه می‌شود آن را به عنوان وابستگی‌های توسعه به صورت لوکال نصب کنید.

JavaScript Booster extension. ویژگی‌های آن شامل چندین عمل کدگذاری است، مانند تبدیل var به const یا let. ادغام initialization (مقداردهی اولیه) و declaration (اعلان)، و حذف دستورات اضافی else. بیش از 74000 نصب دارد.

Framework Extensions

برای بیشتر فریم‌ورک‌های بزرگ، VS Code از طریق اکستنشن‌ها پشتیبانی می‌شود. با این وجود چندین فریم‌ورک وجود دارد که هنوز اکستنشن آن‌ها به طور کامل توسعه نیافته است. برخی از اکستنشن‌های VS Code که عملکرد قابل توجهی را ارائه می‌دهند به شرح زیر است:

Angular 8 Snippets. اسنیپت‌هایی برای انگولار ورژن 2 تا 7، همچنین 8 بتا دارد. از HTML، TypeScript، PWA، Flex Layout، و Angular Material ngRx پشتیبانی می‌کند. دارای 242 اسنیپت انگولار و بیش از 1.35 میلیون نصب است.

Angular Snippets version 9. با بیش از 1.7 میلیون نصب، محبوب‌ترین اکستنشن اسنیپت برای توسعه‌دهندگان AngularJS است. اسنیپت‌هایی برای فایل‌های Docker، RxJS، TypeScript و HTML دارد.

React Native tools. برای پروژه‌های React Native ویژگی‌های IntelliSense، دیباگینگ و کامند را ارائه می‌دهد. تا به امروز بیش از 1.2 میلیون نصب داشته است.

React-Native/Redux/React snippets. دارای اسنیپت‌های سینتکس  storybook، ES6/ES7 React در Redux ،ES6/ES7، و React Native با بیش از 371000 نصب است.

Vetur extension. های‌لایت‌سازی سینتکس، Emmet، linting، اسنیپت‌ها، IntelliSense، فرمتینگ و پشتیبانی از دیباگینگ برای Vue را فراهم می‌کند. دارای داکیومنت منتشر شده بر روی GitBook، با بیش از 4 میلیون نصب است.

ES7 React/GraphQL/React-Native/Redux snippets. دارای اسنیپت‌هایی برای JS و TypeScript، Redux، Graphql، و React با سینتکس ES7 است. این اکستنشن بیش از یک میلیون نصب دارد.

Cordova Tools. از فریم‌ورک‌ها و پلاگین‌های Cordova پشتیبانی می‌کند. IntelliSense، دیباگینگ، همچنین سایر ویژگی‌های پروژه‌های مبتنی بر Cordova را فراهم می‌کند. تا به امروز بیش از 272000 نصب داشته است.

Ember. با بیش از 18000 نصب، پشتیبانی و IntelliSense برای Ember را فراهم می‌کند. همه دستورات ember cli بعد از نصب از طریق لیست فرمان‌های VS Code در دسترس هستند.

jQuery Code Snippets. اسنیپت‌های کد جی‌کوئری را بیش از 130000 مورد دارد. با بیش از 700000 نصب، توسط پیشوند jq فعال می‌‌شود.

نظرات کاربران در رابطه با این دوره

جهت ثبت نظر باید در سایت عضو شوید و یا وارد سایت شده باشید .
logo-samandehi