وبلاگ

10 افزونه برتر VS Code برای توسعه دهندگان جاوا اسکریپت

10 Must-have VS Code Extensions for JavaScript Developers
برنامه نویسی طراحی وب

10 افزونه برتر VS Code برای توسعه دهندگان جاوا اسکریپت

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

ویرایشگر  visual studio Code

بدون شک محبوب‌ترین و سبک‌ترین ویرایشگر کد در حال حاضر است. این ویرایشگر در واقع تأثیر زیادی از دیگر ویرایشگرهای معروف مانند سابلایم تکست و اتوم گرفته است. با این حال، موفقیت VS Code به‌طور اصلی به دلیل قابلیت ارائه عملکرد و پایداری بهتر است. علاوه بر این، این ویرایشگر ویژگی‌های ضروری مانند اینتلی‌سنس را نیز فراهم می‌کند که قبلاً فقط در محیط‌های توسعه یکپارچه (IDE) بزرگ مانند اکلیپس یا ویژوال استودیو 2017 در دسترس بودند.
این ویرایشگر در حال حاضر قادر است تقریباً هر زبان برنامه‌نویسی، چارچوب و فناوری توسعه را پشتیبانی کند.

افزونه های VS Code بر اساس دسته

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

افزونه های snippet(قطعه)

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

اینجا چندین افزونه پرطرفدار برای برنامه‌نویسان جاوااسکریپت نام میبرم . اما به خاطر سادگی، توصیه می‌کنم فقط یکی از آن‌ها را نصب کنید.

  • افزونه JavaScript (ES6) code snippets، توسط Charalampos Karypidis، در حال حاضر پرطرفدارترین افزونه جاوااسکریپت با بیش از 3 میلیون نصب است. این افزونه دستورات ES6 را برای جاوااسکریپت، تایپ‌اسکریپت، اچ‌تی‌ام‌ال، ری‌اکت و ویو فراهم می‌کند. تمامی قطعات کد شامل نقطه‌ویرگول پایانی هستند.
  • افزونه JavaScript (ES6) code snippets in StandardJS style، توسط James Vickery، عملاً یک نسخه تغییریافته از افزونه فوق برای کسانی است که از قوانین استاندارد استایل JS استفاده می‌کنند؛ به این معنا که قطعات کد دارای نقطه‌ویرگول نیستند.
  • کد های قطعه جاوا اسکریپت استاندارد، توسط capaj. یک مجموعه بزرگ از قطعه های کاربردی را شامل می شود و از جاوا اسکریپت، تایپ اسکریپت و ری اکت پشتیبانی می کند.
    قطعه های جاوا اسکریپت، توسط Nathan Chapman. یک مجموعه از قطعه های جاوا اسکریپت با بیش از 33 هزار نصب تاکنون است. این افزونه قطعه کد پشتیبانی می کند Node.js، فریمورک های آزمایشی BDD مانند Mocha و Jasmine.
  • قطعه کد جاوا اسکریپت Atom، توسط Saran Tanpituckpong. با بیش از 26 هزار نصب تاکنون، قطعه های کد در این افزونه از atom/language-javascript منتقل شده است.

افزونه های Syntax Highlighting

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

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

  • Babel JavaScript، توسط مایکل مک‌درموت ایجاد شده. با بیش از ۵۵۰ هزار نصب تا تا به امروز، این افزونه برای برجسته‌سازی سینتکس جاوا اسکریپت ES201x، ری‌اکت، فلوتایپ و کد GraphQL استفاده می‌شود.
  • DotENV، توسط ۸۳۳ هزار و ۷۳۷ نصب. با بیش از ۸۳۳ هزار نصب تا به امروز، این افزونه پشتیبانی از برجسته‌سازی سینتکس برای تنظیمات محیطی – به عبارت دیگر، فایل‌های .env – را فراهم می‌کند.
  • Bracket Pair Colorizer 2، با بیش از ۷۳۰ هزار نصب، این افزونه با رنگ‌های مختلف پرانتزهای متناظر را برجسته می‌کند و به شما کمک می‌کند بفهمید هر پرانتز به کدام بلوک تعلق دارد.

افزونه های Linter

آیا تا به حال با هم تیمی های خود در مورد زبانه ها در مقابل فاصله یا نقطه ویرگول در مقابل بدون نقطه ویرگول وارد بحثی شده اید؟ متوجه خواهید شد که مردم نظرات قوی در مورد سبک کدنویسی دارند. با این وجود، همه افراد یک تیم بدون در نظر گرفتن نظرشان باید از یک سبک کدنویسی استفاده کنند.

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

در اینجا افزونه هایی موجود است:

  • ESLint، توسط Dirk Baeumer. با بیش از 8 میلیون نصب، این پلاگین پرطرفدارترین پلاگین است که پشتیبانی از کتابخانه ESLint را فراهم می کند. برای کار کردن این پلاگین، پروژه شما باید پکیج ها و پلاگین های ESLint را نصب کند. همچنین باید یک فایل .eslintrc مشخص کنید که قوانینی که پلاگین برای لینت کردن کد شما استفاده می کند را مشخص می کند.

 

  • JSHint، توسط Dirk Baeumer. با بیش از 1.2 میلیون نصب، این پلاگین پشتیبانی از لینت کردن کد با کتابخانه JSHint را فراهم می کند. برای لینت کردن کد شما، یک فایل پیکربندی .jshintrc لازم است.

 

  • StandardJS – JavaScript Standard Style، توسط Sam Chen. این پلاگین (با بیش از 259 هزار نصب) به سادگی استایل استاندارد جاوااسکریپت را در VS Code یکپارچه می کند. شما باید standard یا semiStandard را به عنوان یک وابستگی توسعه در پروژه خود نصب کنید. هیچ فایل پیکربندی لازم نیست. برای کار این پلاگین، شما باید اعتبارسنج داخلی VS Code را غیرفعال کنید.

 

  • JSLint، توسط اندرو هایندمن درست شده است. این افزونه با کتابخانه JSLint پرده سازی می کند. برای اینکه برنامه افزودنی کار کند، باید jslint را به صورت محلی یا سراسری نصب کنید. تا به امروز 109 هزار نصب داشته است.

افزونه های Node Package Management

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

  • برنامه npm، توسط egamma توسعه داده شده است. با بیش از 2.3 میلیون نصب، این افزونه از فایل package.json برای اعتبارسنجی پکیج‌های نصب شده استفاده می‌کند. اگر هر چیزی از بین برود یا نسخه‌ها با هم مطابقت نداشته باشند، افزونه گزینه‌های قابل کلیکی را برای رفع مشکل به شما ارائه می‌دهد. علاوه بر این، شما همچنین می‌توانید اسکریپت‌های npm که در فایل package.json تعریف شده‌اند را مستقیماً در داخل ویرایشگر اجرا کنید.-همچنین، افزونه npm IntelliSense توسط Christian Kohler توسعه داده شده است. با بیش از 1.9 میلیون نصب، این افزونه قابلیت تکمیل خودکار ماژول‌های npm را در استیتمنت‌های import فراهم می‌کند.

npm IntelliSense

  • Path IntelliSense، اثر کریستین کوهلر. با 2.7 میلیون نصب، این پسوند نام فایل ها را به صورت خودکار تکمیل می کند. همچنین در داخل فایل های HTML و CSS کار می کند.
  • “Node exec”، توسط Miramac. با بیش از 168 هزار نصب، این افزونه به شما امکان اجرای فایل فعلی یا کد انتخاب شده خود با استفاده از Node.js را با فشردن کلید F8 در صفحه کلید می‌دهد. همچنین می‌توانید با فشردن کلید F9 عملیات در حال اجرا را لغو کنید.
  • “View Node Package” توسط Dominik Kundel. با بیش از 55 هزار نصب، این افزونه به شما امکان مشاهده سریع منبع و مستندات یک بسته Node در حالی که با کد خود کار می‌کنید را می‌دهد.
  • “Node Readme”، توسط bengreenier. با بیش از 52 هزار نصب، این افزونه به شما امکان باز کردن سریع مستندات یک بسته npm را مستقیماً در ویرایشگر VS Code به عنوان یک تب جداگانه می‌دهد.
  • “Search node_modules”، توسط Jason Nutter. به طور پیش فرض پوشه node_modules از جستجوی داخلی VS Code مستثنی شده است. با بیش از 470 هزار نصب، این افزونه به شما امکان می‌دهد به سرعت درخت پوشه را پیموده و فایل‌ها را در node_modules باز کنید.

Search node_modules

  • Import Cost توسط Wix. این نشان می دهد که یک بسته چه مقدار فضای دیسک را هنگام وارد کردن آن استفاده می کند. افزونه 562 هزار نصب دارد.

افزون های Formatting

معمولاً اغلب مواقع، ما کدی را مینویسیم که با بقیه کد همخوانی ندارد. برای رفع این مشکل، باید به هر خط برگردیم و فرمت بندی داخلی آن را تصحیح کنیم. همچنین، باید از قرار دادن مناسب براکت ها و تگ ها در یک فرمت قابل خواندن اطمینان حاصل کنیم. این فرآیند می تواند به سرعت خسته کننده شود.

خوشبختانه، افزونه هایی وجود دارد که می توانند این کار را برای ما انجام دهند. لطفاً توجه داشته باشید که افزونه هایی مانند Prettier و Beautify نمی توانند همزمان فعال باشند.

  • Prettier Code Formatter، توسط Esben Petersen. این پلاگین محبوب‌ترین ابزاری است که از طریق Prettier قابلیت فرمت‌بندی کد JavaScript، TypeScript و CSS را فراهم می‌کند. تا به امروز بیش از ۵.۷ میلیون نصب داشته است. توصیه می‌شود Prettier را به صورت محلی به عنوان یک وابستگی توسعه‌دهنده نصب کنید.
  • Beautify، توسط HookyQR. یک افزونه jsBeautifier است که قابلیت فرمت‌بندی کدهای JavaScript، JSON، CSS و HTML را دارد. از طریق فایل .jsbeautifyrc قابل سفارشی‌سازی است. هم اکنون دومین فرمت‌بندی محبوب است که بیش از ۴.۴ میلیون نصب دارد.
  • JS Refactor، توسط Chris Stead. این افزونه ابزارها و عملیات مختلفی برای بازسازی کدهای JavaScript ارائه می‌دهد، مانند استخراج متغیرها/متدها، تبدیل کد موجود به استفاده از توابع نشانه‌گذاری شده یا رشته‌های الگو، و صادر کردن توابع. تا به امروز بیش از ۱۴۰ هزار نصب داشته است.
  •  “JavaScript Booster” توسط Stephan Burguchev ساخته شده است. این ابزار یک ابزار جالب برای بهبود کدنویسی است که عملیات مختلفی را انجام می‌دهد مانند تبدیل var به const یا let، حذف دستورات else زائد و ادغام تعریف و مقداردهی. الهام گرفته شده از WebStorm است و تاکنون بیش از 74 هزار نصب دارد.

JavaScript Booster

افزونه های Browser

در صورتی که در حال نوشتن یک برنامه کنسولی در JavaScript نیستید، احتمالاً بیشتر کد JavaScript خود را در داخل مرورگر اجرا خواهید کرد. این بدان معنی است که شما باید به طور مکرر صفحه را بارگذاری کنید تا تأثیر هر به‌روزرسانی کد را مشاهده کنید. به جای انجام این کار به طور دستی همیشگی، چند ابزار وجود دارند که می‌توانند زمان توسعه و فرآیند تکراری شما را به طور قابل توجهی کاهش دهند.

  • افزونه Debugger for Chrome، توسط شرکت مایکروسافت. با بیش از 5.2 میلیون نصب، این افزونه به شما امکان دیباگ کردن کد جاوااسکریپت خود را در مرورگر کروم یا هر هدف دیگری که پروتکل دیباگر کروم را پشتیبانی می‌کند فراهم می‌کند. اگر تازه با این افزونه و دیباگ کردن در VS Code آشنا شده‌اید، حتماً آموزش دیباگ کردن در VS Code و کروم را ببینید.

  • افزونه Live Server، توسط Ritwick Dey. این افزونه به شما اجازه می‌دهد یک سرور توسعه محلی با قابلیت بارگذاری زنده برای صفحات استاتیک و پویا را راه‌اندازی کنید. تا به امروز بیش از 4.6 میلیون نصب داشته است.

Live Server

  • افزونه Preview on Web Server، توسط YuichiNukiyama. این افزونه قابلیت ارائه سرویس وب سرور و پیش‌نمایش زنده HTML را فراهم می‌کند. امکانات آن را می‌توان از منوی محیط یا منوی ویرایشگر فراخوانی کرد. تا به امروز بیش از 120 هزار نصب داشته است.
  • افزونه PHP Server، توسط brapifra. این افزونه برای پروژه‌های PHP ساخته شده است، اما برای تست کد جاوااسکریپتی که فقط باید در سمت مشتری اجرا شود، همچنان مفید است. تا به امروز بیش از 234 هزار نصب داشته است.

افزونه های Framework

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

  • Angular Snippets (نسخه 9) توسط John Papa. با بیش از 1.7 میلیون نصب، این افزونه برای توسعه دهندگان Angular محبوب است. این افزونه برای فایل‌های TypeScript، RxJS، HTML و Docker، قطعات کد Angular را فراهم می‌کند. در زمان نوشتن این متن، این افزونه به روز شده است تا Angular 9 را پشتیبانی کند.
  • این پرونده شامل بریده های کدی برای Angular 8 است که شامل TypeScript ، HTML ، Angular Material ، ngRx ، RxJS و Flex Layout است. این پرونده بریده تا کنون 242 بریده برای Angular دارد و در حال حاضر بیش از 1.35 میلیون نصب دارد.
  • پرونده ES7 React / Redux / GraphQL / React-Native Snippets توسط dsznajder ارائه می شود. با بیش از 1.2 میلیون نصب تاکنون، این افزونه بریده های جاوا اسکریپت و تایپ اسکریپت برای React ، Redux و Graphql را با دستورالعمل های ES7 فراهم می کند.
  • ابزارهای React Native توسط Microsoft ارائه می شود. این ابزار IntelliSense ، دستورات و ویژگی های اشکال زدایی را برای پروژه های React Native فراهم می کند. تاکنون بیش از 1.2 میلیون نصب دارد.
  • بریده های React-Native / React / Redux برای es6 / es7 توسط EQuimper ارائه می شود. این بریده های کدی را با نحو ES6 / ES7 برای React ، React Native ، Redux و storybook فراهم می کند. تاکنون 371 هزار نصب دارد.
  • Vetur، توسط Pine Wu، امکاناتی از قبیل برجسته سازی دستورات، قطعات کد، Emmet، linting، قالب بندی، IntelliSense و پشتیبانی از اشکال زدایی را برای چارچوب Vue فراهم می کند. این افزونه با مستندات مناسبی که در GitBook منتشر شده است همراه است. تاکنون بیش از 4.2 میلیون نصب داشته است.
  • Ember، توسط Felix Rieseberg، امکاناتی از قبیل پشتیبانی از دستورات و IntelliSense برای Ember را فراهم می کند. پس از نصب، تمام دستورات ember cli از طریق لیست دستورات خود VS Code قابل دسترسی هستند. تاکنون بیش از 18 هزار نصب داشته است.
  • Cordova Tools، توسط Microsoft، پشتیبانی از پلاگین های Cordova و چارچوب Ionic را ارائه می دهد و همچنین IntelliSense، اشکال زدایی و سایر امکانات پشتیبانی را برای پروژه های مبتنی بر Cordova فراهم می کند. تاکنون بیش از 272 هزار نصب داشته است.
  • jQuery Code Snippets، توسط Don Jayamanne، بیش از 130 قطعه کد jQuery را فراهم می کند. با استفاده از پیشوند jq فعال می شود و تاکنون بیش از 700 هزار نصب داشته است.

افزونه های Testing

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

  • Mocha sidebar توسط maty: این افزونه پشتیبانی برای تست با استفاده از کتابخانه Mocha را فراهم می‌کند. این افزونه به شما کمک می‌کند تست‌ها را مستقیماً روی کد اجرا کنید و خطاها را به صورت دکوراتور نشان می‌دهد. تا کنون بیش از ۶۸ هزار نصب داشته است. لطفاً توجه داشته باشید که در زمان نوشتن این متن، این افزونه برخی مشکلات حل نشده دارد.
  •  ES6 Mocha Snippets توسط Cory Noonan: این افزونه قطعه‌های کد Mocha را با سینتکس ES6 فراهم می‌کند. هدف اصلی این افزونه حفظ کد خشک است، با استفاده از توابع arrow و حذف کردن پرانتزها هر جا امکان پذیر است. می‌توان آن را تنظیم کرد تا از نقطه‌ویرگول‌ها استفاده کند و تا کنون بیش از ۳۶ هزار نصب داشته است.
  • Jasmine Code Snippets,ت  توسط  Charalampos Karypidis ایجاد شده است. این نسخه تاکنون بیش از ۳۰ هزار نصب داشته است،ا متأسفانه در زمان نگارش این متن، سه سال از آخرین به‌روزرسانی آن می‌گذرد.
  •  افزونه به نام “Protractor Snippets”  که قطعه‌کدهای آزمون end-to-end را برای فریمورک Protractor فراهم می‌کند. این افزونه همچنین از زبان‌های JavaScript و Typescript پشتیبانی می‌کند و تاکنون بیش از ۱۸ هزار نصب داشته است.
  •  افزونه به نام “Node TDD” است که پشتیبانی از توسعه مبتنی بر آزمون (TDD) برای پروژه‌های Node و JavaScript را فراهم می‌کند. این افزونه قابلیت ایجاد یک ساخت آزمون خودکار را در هنگام به‌روزرسانی منابع فراهم می‌کند و تاکنون بیش از ۲۳ هزار نصب داشته است.

افزونه های Awesome

من فقط این دسته از افزونه های VS Code را در دسته “عالی” قرار می دهم، زیرا این به بهترین وجه آنها را توصیف می کند!

  • Quokka.js، توسط Wallaby.js. ابزاری عالی برای اشکال زدایی که برای کد جاوا اسکریپت محیطی سریع برای پروتوتایپ کد فراهم می‌کند. دارای مستندات عالی است و بیش از 641 هزار نصب دارد.
  • Paste as JSON، توسط quicktype. این امکان را به شما می‌دهد تا به سرعت داده‌های JSON را به کد جاوا اسکریپت تبدیل کنید و تا کنون بیش از 430 هزار نصب داشته است.

Paste as JSON

  • Code Metrics، توسط Kiss Tamás. این یک افزونه عالی دیگر است که پیچیدگی کد جاوا اسکریپت و TypeScript را محاسبه می‌کند. تا کنون بیش از 233 هزار نصب داشته است.

Code Metrics

Code Metrics

پکیج های افزونه

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

  • Nodejs Extension Pack: این بسته شامل افزونه‌های ESLint، npm، JavaScript (ES6) snippets، Search node_modules، NPM IntelliSense و Path IntelliSense است. تعداد نصب‌های آن بیش از 293 هزار نصب است.
  • VS Code for Node.js – Development Pack: این بسته شامل افزونه‌های NPM IntelliSense، ESLint، Debugger for Chrome، Code Metrics، Docker و Import Cost است. تعداد نصب‌های آن تا به حال بیش از 103 هزار نصب است.
  • Vue.js Extension Pack: این بسته شامل مجموعه‌ای از افزونه‌های Vue و JavaScript است. در حال حاضر شامل 12 افزونه برای VS Code است که برخی از آنها در اینجا ذکر نشده‌اند، مانند auto-rename-tag و auto-close-tag. تعداد نصب‌های آن تا به حال بیش از 156 هزار نصب است.
  • Ionic Extension Pack: این بسته شامل تعدادی از افزونه‌های VS Code برای توسعه Ionic، Angular، RxJS، Cordova و HTML است. تعداد نصب‌های آن حدود 75 هزار نصب است.

خلاصه

تعداد بسیار زیادی افزونه با کیفیت برای VS Code، این را به یک انتخاب محبوب برای توسعه دهندگان جاوااسکریپت تبدیل کرده است. نوشتن کد جاوااسکریپت با این کارآمدی هرگز به این آسانی نبوده است. افزونه‌هایی مانند ESLint به شما کمک می‌کنند تا از اشتباهات رایج جلوگیری کنید، در حالی که افزونه‌هایی مانند Debugger for Chrome به شما در اشکال زدایی کدتان کمک می‌کنند. افزونه‌های Node.js با ویژگی‌های IntelliSense خود به شما کمک می‌کنند تا ماژول‌ها را به درستی وارد کنید، و در دسترس بودن ابزارهایی مانند Live Server و REST client، وابستگی شما به ابزارهای خارجی برای تکمیل کارتان را کاهش می‌دهد. تمام این ابزارها فرآیند تکامل شما را بسیار آسان‌تر می‌کنند.

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

پرسش‌های متداول درباره افزونه های جاوا اسکریپت VS Code
کدام افزونه جاوا اسکریپت برای VS Code بهتر است؟

تعیین “بهترین” افزونه JavaScript برای Visual Studio Code (VS Code) ممکن است به طور ذاتی وابسته به نیازها و ترجیحات خاص شما باشد. با این حال، چندین افزونه محبوب و پرکاربرد برای توسعه JavaScript در VS Code وجود دارد. برخی از افزونه های قابل توجه عبارتند از ESLint، Prettier، Debugger for Chrome، Auto Import، Path Intellisense، JavaScript (ES6) code snippets و Bracket Pair Colorizer 2.

کدام پسوند جاوا اسکریپت برای VS Code بهتر است؟

Visual Studio Code (VS Code) به عنوان یک انتخاب عالی برای توسعه JavaScript شناخته شده است. طبیعت سبک آن، عملکردی پیوسته را برای هر دو اسکریپت کوچک و پروژه‌های بزرگ فراهم می‌کند. این ویرایشگر IntelliSense قدرتمندی را برای کد نویسی سریعتر و دقیق‌تر ارائه می‌دهد، در حالی که ابزارهای اشکال‌زدایی داخلی و افزونه‌هایی مانند “Debugger for Chrome” فرآیند اشکال‌زدایی را ساده‌تر می‌کنند. با محیط قابل تنظیم، اکوسیستم گستردهٔ افزونه‌ها و یکپارچه‌سازی بی‌درز با سیستم‌های کنترل نسخه مانند Git، VS Code محیطی چند منظوره و کارآمد برای توسعه‌دهندگان JavaScript فراهم می‌کند.

چگونه می توانید جاوا اسکریپت را در VS Code زیبا کنید؟

برای زیباسازی کد جاوا اسکریپت در ویژوال استودیو کد، پسوند Prettier را از بازار پسوندها نصب کنید. پس از نصب، می‌توانید کد خود را با راست کلیک در ویرایشگر و انتخاب “فرمت سند” یا استفاده از دکمه میانبر (معمولاً Shift + Alt + F در ویندوز یا Shift + Option + F در macOS) فرمت کنید. قوانین سفارشی فرمت بندی را می‌توان با ایجاد یک فایل .prettierrc در دایرکتوری اصلی پروژه پیکربندی کرد. به صورت اختیاری، می‌توانید فرمت بندی خودکار در هنگام ذخیره فایل را با تنظیم “فرمت بندی در هنگام ذخیره” در VS Code فعال کنید.

بهترین Linter برای جاوا اسکریپت در VS Code چیست؟

بهترین بررسی کننده (linter) برای جاوااسکریپت در ویژوال استودیو کد (VS Code) بستگی به ترجیحات فردی و نیازهای پروژه دارد. انتخاب‌های محبوب شامل ESLint، JSHint، StandardJS و TSLint (برای تایپ‌اسکریپت) است. ESLint که به خاطر انعطاف‌پذیری و حمایت گسترده از جامعه شناخته شده است، به دلیل قابلیتش برای گرفتن خطاها و اجرای شیوه‌های کدنویسی یکنواخت، گاهاً به عنوان گزینه‌ای مورد علاقه محسوب می‌شود. با این حال، انتخاب شما باید با سبک کدنویسی و نیازهای پروژه شما همخوانی داشته باشد.

آیا VS Code دارای IntelliSense برای جاوا اسکریپت است؟

بله، Visual Studio Code (VS Code) ویژگی IntelliSense را برای JavaScript دارد. IntelliSense پیشنهادات و کمک های مرتبط با متن را در حین نوشتن کد ارائه می دهد. این ویژگی نام های متغیر و تابع را به صورت خودکار تکمیل می کند، امضاهای تابع را نمایش می دهد، واردات ماژول را پیشنهاد می کند، گزینه های خاصیت و متد را نمایش می دهد، راهنمایی مستندات را ارائه می دهد و اطلاعات نوع را نمایش می دهد. این ویژگی با کاهش تایپ دستی و ارائه دسترسی فوری به اطلاعات مرتبط، کارایی و دقت کدنویسی را بهبود می بخشد.

نظر (2)

  1. Sorena

    بسیار عالی و کمک کننده بود

  2. mmd

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

دیدگاه خود را اینجا قرار دهید

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

فیلدهای نمایش داده شده را انتخاب کنید. دیگران مخفی خواهند شد. برای تنظیم مجدد سفارش ، بکشید و رها کنید.
  • عکس
  • شناسه محصول
  • امتیاز
  • قیمت
  • در انبار
  • موجودی
  • افزودن به سبد خرید
  • توضیحات
  • محتوا
  • عرض
  • اندازه
  • تنظیمات بیشتر
  • نویسنده
  • قسمت
  • زبان
Click outside to hide the comparison bar
مقایسه