۱۰ افزونه ضروری VSCode برای توسعه‌دهندگان JavaScript

JavaScript یکی از محبوب‌ترین زبان‌های برنامه‌نویسی است که دارای کامپوننت‌ها، فریم‌ورک‌ها و ابزار‌های مختلف است. یکی از محبوب‌ترین ویرایشگر‌های کد Visual Studio و نسخه سبک‌تر آن VS Code است که قابلیت‌های زیادی را از ویرایشگر‌های کد دیگر مانند: Atom یا Sublime Text قرض گرفته است؟

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

قدرت Visual Studio Code از جامعه متن‌باز به دست می‌آید زیرا اکنون قادر است تقریبا از هر زبان برنامه‌نویسی، توسعه فریم‌ورک و تکنولوژی‌های مختلف پشتیبانی کند. علاوه بر این‌ها، کتاب‌خانه‌ها از قابلیت‌هایی مانند syntax highlighting, IntelliSense, Emmet و snippets پشتیبانی ‌می‌کنند.

افزونه‌های VS Code: بر اساس طبقه‌بندی

افزونه‌های Snippet

هنگامی که برای اولین بار VS Code را نصب می‌کنید، با بسته‌های داخلی Snippet برای JavaScript و همچنین TypeScript ارائه می‌شود. Snippetها در نوشتن کد‌های تکراری به کمک ما می‌آیند. با استفاده از پیکربندی زیر می‌توانید snippetها را نمایش دهید:

{
 "editor.snippetSuggestions" : "top"
}

در زیر برخی از محبوب‌ترین افزونه‌های Snippets جاوااسکریپت قرارگرفته است.

1. StandardJS JavaScript code snippets: این افزونه یک انتخاب عالی برای توسعه‌دهندگانی است که سبک StandardJS را دوست دارند. در این snippet، سمیکالن وجود ندارد.
2. JavaScript (ES6) code snippets: این افزونه با بیش از ۳.۷ میلیون نصب، یکی از محبوب‌ترین snippetهایی است که دارای سینتکس ES6 برای JavaScript, HTML, React, TypeScript است. در پایان تمام Snippetها سیمیکالن وجود دارد.
3. JavaScript Snippets: یک مجموعه از snippet‌های جاوااسکریپت با ۴۲ هزار نصب است و این افزونه از BDD Testing FrameWorks, namely jasmine, mocha و Node.js پشتیبانی می‌کند.
4. JavaScript standardjs styled snippets: این افزونه ۸۵ هزار بار نصب شده. در اصل از Atom StandardJS snippets آمده و از JavaScript, React و TypeScript پشتیبانی می‌کند.
5. Atom JavaScript Snippet: با ۲۸ هزار نصب، این افزونه از افزونه atom/language-JavaScript به VS Code پورت شده است.

افزونه‌های Linter

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

1. jshint: با بیش از ۱.۳ میلیون نصب، این افزونه به فایل پیکربندی .jshintrc نیاز دارد.
2. ESLint: با ۱۰ میلیون نصب بسیار محبوب است، این افزونه به پکیج‌ها و پلاگین‌هایی برای نصب نیاز دارد. شما همچنین باید قوانینی را در .eslintrc مشخص کنید زیرا از این فایل برای linting استفاده می‌کند.
3. jslint: باید jslint را به‌صورت لوکال یا گلوبال نصب کنید، در حال حاضر بیش از ۱۲۰ هزار نصب دارد.
4. StandardJS – JavaScript Standard Style: با بیش از ۲۹۶ هزار نصب، این افزونه با VS Code یکپارچه شده است. استاندارد یا نیمه استاندارد باید به عنوان وابستگی توسعه در پروژه شما نصب شود. در این افزونه به فایل پیکربندی نیازی نخواهید داشت اما باید اعتبارسنجی داخلی VS Code را غیر ‌فعال کنید.

افزونه Syntax Highlighting

آخرین نسخه VS Code به استاندارد‌های قواعدی Atom برای رنگ بندی بهتر سینتکس، نزدیک‌تر شده، دیگر به افزونه‌هایی مانند JS Atom Grammer نیازی نیست.

با این وجود برخی از افزونه‌های Syntax highlighting برای فایل‌هایی با پسوندهای مختلف در پروژه وجود دارند مثلا پسوند: .env. چند مورد از آنها عبارتند از:

1. DotENV: با بیش از یک میلیون نصب، این افزونه از تنظیم Syntax Highlighting برای محیط توسعه پشتیبانی می‌کند.
2. Bracket Pair Colorizer 2: با بیش از ۱.۱ میلیون نصب، این افزونه براکت‌های مربوط به‌هم را به یک رنگ در می‌آورد تا در تشخیص بلوک‌هایی که با براکت ساخته‌ شده‌اند، کمک کند.
3. Babel JavaScript: با بیش از ۶۶۲ هزار نصب، این افزونه Syntax highlighting را برای ES201, FlowType, GraphQl و کدهای JavaScript ارائه می‌دهد.

افزونه‌های NPM (Node Package Manager)

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

1. npm: با بیش از ۲.۷ میلیون نصب، این افزونه از package.json برای اعتبارسنجی پکیج‌هایی که نصب شده‌اند، استفاده می‌کند و گزینه‌هایی که به راحتی با یک کلیک فعال یا غیر فعال می‌شوند را برای هرچیزی که شاید از دست رفته باشد یا در ورژن هم‌خوانی نداشته باشد ارائه می‌دهد. شما می‌توانید npm scriptهایی که در package.json تعریف شده است را در ویرایشگرکد، آن را اجرا کنید.
2. Path Intellisense: با بیش از ۳.۲ میلیون نصب، این افزونه برای تکمیل نام فایل‌ها مورد استفاده قرار می‌گیرد و در فایل‌های HTML و CSS کار می‌کند.
3. npm Intellisense: با بیش از ۲.۲ میلیون نصب، کارایی این افزونه تکمیل‌کردن خودکار نام ماژول‌های NPM، در هنگام import است.
4. View Node Package: با بیش از ۶۰ هزار نصب، این افزونه به شما کمک می‌کند که منابع پکیج Node را به راحتی دیدن مستندات، در حین کد نویسی ببینید.
5. node-readme: با بیش از ۶۴ هزار نصب، این امکان را ایجاد می‌کند که به صورت مستقیم در یک تب جداگانه VS Code بتوانید مستندات پکیج npm را باز کنید.
6. Node.js Exec: با بیش از ۲۰۵ هزار نصب، این افزونه به شما این قابلیت را می‌دهد که برای اجرای پرونده فعلی فقط با فشردن کلید F8، آن را با Node.js اجرا کنید. همچنین می‌توانید برای توقف فرایند اجرا از کلید F9 استفاده کنید.
7. Import Cost: با بیش از ۷۰۰ هزار نصب، این افزونه فضایی که هر پکیج به خود اختصاص داده را هنگام import، نشان می‌دهد.
8. Search node_modules: با بیش از ۵۶۴ هزار نصب، این افزونه پوشه node_modules را که به‌صورت پیش‌فرض در پروژه‌های جاوااسکریپتی وجود دارد، از جستجوی داخلی VS Code خارج می‌کند و مرور و بازکردن سریع فایل‌های node_modules را از طریق ساختار درختی پوشه در اختیار شما قرار می‌دهد.

افزونه‌های Formatting

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

1. Beautify: این افزونه از JSON، JavaScript، HTML و CSS پشتیبانی می‌کند. شخصی سازی‌ها می‌توانند در فایل .jsbeautifyrc پیکربندی شوند، این افزونه تا به امروز بیش از ۵.۱ میلیون نصب داشته و دومین افزونه محبوب formatting محسوب می‌شود.
2. JS Refactor: این افزونه برای refactor کردن کدهای جاوااسکریپت، مانند: extracting variables/methods, تبدیل کد موجود به template literals یا arrow function و exporting functions مورد استفاده قرار می‌گیرد. تا به امروز ۱۶۵ هزار نصب داشته است.
3. Prettier – Code formatter: محبوب‌ترین افزونه‌ای که از JavaScript، formatting، CSS و TypeScript پشتیبانی می‌کند و توصیه می‌شود، که آن را به صورت محلی به عنوان وابستگی در طول توسعه نصب کنید. این افزونه بیش از ۷.۵ میلیون نصب دارد.
4. JavaScript Booster: این افزونه ویژگی‌هایی مانند تبدیل var به const یا let، ادغام اولیه (merging initialization) و declaration، حذف بلوک‌های اضافی else statements را در اختیار ما قرار می‌دهد و بیش از ۱۰۲ هزار نصب دارد.

افزونه‌های مربوط به فریم‌ورک‌ها

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

1. Angular 8 Snippets: این افزونه snippetهایی برای ورژن ۲ تا ۷ و نسخه ۸ بتا Angular، ارائه می‌دهد. همچنین از HTML, TypeScript, PWA, Flex Layout و Angular Material NgRx پشتیبانی می‌کند. ۲۴۲ snippet برای Angular ارائه می‌دهد و بیش از ۱.۴ میلیون نصب دارد.
2. Angular Snippets (Version 9): با بیش از ۲ میلیون نصب، این افزونه یکی از مشهورترین افزونه‌های snippet برای توسعه‌دهندگان AngularJS است و از RxJS, TypeScript, Docker files وHTML پشتیبانی ‌می‌کند.
3. React Native Tools: این افزونه IntelliSense, دیباگینگ و ویژگی‌های دستوری را برای پروژه‌های React Native ارائه می‌دهد. تا به امروز، بیش از ۱.۳ میلیون نصب داشته است.
4. React-Native/React/Redux snippets: این افزونه دارای snippetهای سینتکسی ES6/ES7 برای React است، همچنین storybook ES6/ES7 و Redux, React Native را به صورت snippet ارائه می‌دهد. این افزونه بیش از ۴۴۳ هزار نصب داشته است.
5. Vetur: این افزونه Syntax highlighting, Emmet, Linting, snippets, intelliSense, formatting و دیباگینگ را برای فریم‌ورک Vue ارائه می‌دهد، همچنین مستندات این افزونه در GitBook در دسترس است و بیش از ۵.۱ میلیون کاربر آن را نصب کرده‌اند.
6. ES7 React/Redux/GraphQL/React-Native snippets: این افزونه snippetهایی برای JavaScript, TypeScript, Redux, GraphQl و React با سینتکس ES7 ارائه می‌کند. این افزونه بیش از ۱.۶ میلیون نصب دارد.
7. The Cordova Tools: این افزونه از پلاگین‌ها و فریم‌ورک‌ Cordova پشتیبانی می‌کند. ویژگی‌هایی مانند IntelliSense، debugging را در پروژه‌های Cordova ارائه می‌دهد و تا به امروز بیش از ۲۹۱ هزار کاربر از آن استفاده کرده‌اند.
8. Ember Cli in Visual Studio Code: با بیش از ۱۹ هزار نصب، این افزونه ویژگی IntelliSense را برای Ember فراهم می‌کند. پس از نصب این افزونه تمام دستورهای Ember cli از طریق لیست دستورهای VS Code در دسترس شما قرار می‌گیرد.
9. jQuery Code Snippets: این افزونه بیش از ۱۳۰ snippet برای jQuery ارائه می‌دهد و بیش از ۲۱۹ هزار نصب دارد که با نوشتن پسوند jq در ویرایشگرکد فعال می‌شود.

افزونه‌های مرورگر

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

1. Debugger for Chrome: با بیش از ۶ میلیون نصب، این افزونه به شما اجازه می‌دهد که کد‌ها را در مرورگر خود یا در پروتکل‌های دیگری که این افزونه پشتیبانی می‌کند، دیباگ کنید.
2. Live Server: این افزونه به شما این قابلیت را می‌دهد که یک سرور محلی را با ویژگی live Reload برای صحفه‌های استاتیک و پویا راه‌اندازی کنید.
3. PHP Server: در حالی که این افزونه برای پروژه‌های PHP ساخته شده، اما برای تست client-side کد‌های JavaScript مفید است. تا به امروز بیش از ۲۷۷ هزار نصب داشته است.
4. Preview on Web Server: این افزونه یک وب سرور و همچنین پیش‌نمایش زنده فایل HTML را ارائه می‌دهد. این ویژگی را می‌توان از طریق ویرایشگر یا از طریق منوی برنامه فراخوانی کرد. این افزونه دارای بیش از ۱۴۲ هزار نصب است.
5. REST Client: به‌جای استفاده از مرورگر یا برنامه CURL برای آزمایش REST API endpointها، این افزونه بعد از نصب می‌تواند درخواست‌های HTTP شما در ویرایشگر اجرا کند.

افزونه‌های Testing

یکی از مولفه‌های حیاتی توسعه نرم‌افزار، testing است. در ادامه چندین افزونه مشهور برای testing در VS Code را معرفی می‌کنیم.

1. ES6 Mocha Snippets: این افزونه سینتکس ES6 را همراه Mocha snippet ارائه می‌دهد و بر روی تکرار نشدن کد‌ها، در صورت امکان حذف کردن براکت‌هایی که توسط دستور if ایجاد می‌شوند و arrow فانکشن‌ها تمرکز کرده است. می‌تواند به گونه‌ای پیکربندی شود که سمیکالن فعال شود. این افزونه بیش از ۴۱ هزار بار نصب شده است.
2. Jasmine Code Snippets: با بیش از ۳۳ هزار نصب، این افزونه snippetهایی برای فریم‌ورک تست Jasmine ارائه می‌دهد. این افزونه در ۳ سال اخیر به‌روزرسانی نشده است.
3. Mocha sidebar: با کتاب‌خانه Mocha، این افزونه تست‌های لازم را به‌طور مستقیم بر روی کدها اجرا می‌کند و خطاها را نشان می‌دهد. البته مشکل‌هایی وجود دارند که هنوز در این افزونه برطرف نشده‌اند.
4. Protractor Snippets: این افزونه snippetهای مورد نیاز تست end-to-end را ارائه می‌دهد، با بیش از ۲۰ هزار نصب، از JavaScript و TypeScript پشتیبانی می‌کند.
5. TDD Snippets: این افزونه از JavaScript و پروژه‌های Node که test-driven هستند پشتیبانی می‌کند. علاوه‌ براین‌ها می‌تواند هر زمان که منابع به‌روز شوند، باعث ایجاد تست خودکار شود.

افزونه‌های دیگر

1. Paste JSON as Code: این افزونه با بیش از ۵۳۲ هزار نصب، این قابلیت را برای شما فراهم می‌کند که داده‌های JSON خود را سریعا به کد‌های جاوااسکریپت و … تبدیل کنید.
2. Quokka.js: با بیش از ۷۴۷ هزار نصب، این افزونه ابزاری برای دیباگینگ نمونه اولیه کدهای جاوااسکریپت به شمار می‌رود.
3. CodeMetrics: این افزونه با بیش از ۲۸۰ هزار نصب، به شما کمک می‌کند پیچیدگی کد‌های جاوااسکریپت و TypeScript را بسنجید.

بسته‌های افزونه

فروشگاه افزونه‌های VS Code، یک دسته بندی برای بسته‌های افزونه دارد. در این بسته‌های افزونه یک سری افزونه‌های VS Code در کنار هم به یک بسته تبدیل شده‌اند تا فرایند نصب، آسان‌تر شود.

• VS Code for Node.js: این مجموعه دارای افزونه‌های NPM IntelliSense, ESLint, Docker, Code Metrics, Chrome Debugger و Import Cost است.
• Vue.js Extension Pack: در این مجموعه، افزونه‌های جاوااسکریپت و vue قرار دارند. در حال حاضر ۱۲ افزونه VS Code در آن قرار گرفته از جمله auto-close-tag و auto-rename-tag. تا به امروز بیش از ۱۷۴ هزار نصب داشته است.
• Node.js Extension Pack: با بیش از ۳۴۰ هزار نصب، این مجموعه افزونه‌های npm, ESLint, Search node_modules, JS snippets, Path IntelliSense, MPN IntelliSense را دربر می‌گیرد.
• Ionic Extension Pack: این مجموعه شامل چندین افزونه برای Angular, RxJS, Ionic, HTML و توسعه Cordova است. تا به امروز بیش از ۸۱ هزار نصب داشته است.

خلاصه

VS Code افزونه‌های بسیار با کیفیتی دارد که این ویرایشگر کد را در بین توسعه‌دهندگان با زبان جاوااسکریپت و همچنین Vue, ReactJS, Node.js بسیار محبوب کرده است. نوشتن کدهای مفید جاوااسکریپت هرگز به این مقدار آسان نبوده که امروزه به کمک این افزونه‌ها، بسیاری از فرایند توسعه کاهش یافته است. افزونه ESLint، به توسعه‌دهندگان کمک می‌کند تا از انجام اشتباه‌های رایج خودداری کنند در حالی که Debugger for chrome کمک می‌کند فرایند دیباگینگ برنامه ساده‌تر شود.

افزونه‌های Node.js، با قابلیت‌های IntelliSense کمک می‌کنند ماژول‌ها به درستی import شوند یا ابزار‌های REST client و Live Server کمک می‌کنند، بدون نیاز به ابزارهای خارجی، یک پروژه را تکمیل کنیم. VS Code برای اضافه کردن تم‌ها و ویژگی‌‌های جدید بسیار عالی است. این ویرایشگرکد بسیار سبک، سریع و قدرتمند است. شرکت Microsoft این برنامه را به صورت cross-platform برای نوشتن برنامه‌های وب و همچنین برنامه‌های ابری طراحی کرده است.

دلیل اصلی محبوبیت این ویرایشگر کد این است که انتظارات توسعه‌دهنده را رفع کرده و همچنین ویژگی‌های مضاعف بسیار مفیدی دارد.

منبع: https://stackify.com/top-10-must-have-vs-code-extensions-for-javascript-developers