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

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

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

۱. GITLENS

GitLens به شما کمک می‌کند کد را بهتر درک کنید و ببینید که چگونه یک خط یا بلوک کد تغییر کرده است. علاوه بر این به شما امکان می‌دهد بدون دردسر تاریخچه و تکامل یک پایگاه کد را کشف کنید.

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

تعداد دانلود: ۵،۹۷۲،۱۱۷

۲. PRETTIER

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

تعداد دانلود: ۷،۶۷۶،۷۳۸

۳. ESLINT

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

تعداد دانلود: ۱۰،۲۳۶،۲۹۳

۴. QUOKKA.JS

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

تعداد دانلود: ۷۵۴،۹۷۸

۵. PATH INTELLISENCE

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

تعداد دانلود: ۳،۳۱۸،۱۵۶

۶. PATH AUTOCOMPLETE

این افزونه تکمیل مسیر را برای vscode فراهم می‌کند، بنابراین نیازی نیست مسیرهای طولانی را بخاطر بسپارید.

تعداد دانلود: ۵۵۸،۸۶۸

۷. VISUAL STUDIO INTELLICODE

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

تعداد دانلود: ۶،۴۰۱،۹۴۳

۸. IMPORT COST

این افزونه به صورت درون خطی در پکیج وارد شده ویرایشگر نمایش داده می‌شود. برنامه داخلی از یک بسته وب به همراه babili-webpack-plugin برای شناسایی اندازه وارد شده مورد استفاده قرار می‌گیرد.

تعداد دانلود: ۷۱۰،۲۹۸

۹. FILESIZE

اندازه فایل متمرکز را در نوار وضعیت ویرایشگر نمایش می‌دهد.

تعداد دانلود: ۱۹۸،۸۰۷

۱۰. LIVE SERVER

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

تعداد دانلود: ۶،۵۴۱،۴۶۸

۱۱. PROJECT MANAGER

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

تعداد دانلود: ۱،۰۹۰،۲۵۴

۱۲. CODE SPELL CHECKER

یک بررسی کننده املای کد برای چندین زبان برنامه نویسی.

تعداد دانلود: ۱،۵۹۶،۸۶۲

۱۳. BRACKET PAIR COLORIZER

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

تعداد دانلود: ۱،۱۵۴،۲۲۶

۱۴. REMOTE – SSH

افزونه Remote - SSH به شما امکان می‌دهد از هر دستگاه راه دور دارای سرور SSH به عنوان محیط توسعه خود استفاده کنید.

تعداد دانلود: ۱،۶۰۵،۷۳۴

۱۵. REST CLIENT

این افزونه به شما امکان می‌دهد درخواست‌های HTTP را ارسال کرده و پاسخ را در Visual Studio Code مستقیما مشاهده کنید.

تعداد دانلود: ۱،۰۲۵،۷۰۰

۱۶. JAVASCRIPT (ES۶) CODE SNIPPETS

این افزونه شامل کد اسنیپت برای جاوااسکریپت در سینتکس ES۶ برای ویرایشگر vscode است و از JavaScript و TypeScript پشتیبانی می‌کند.

تعداد دانلود: ۳،۷۸۹،۷۹۳

۱۷. CODE RUNNER

Code Runner یک اسنیپت اجرای کد یا یک فایل کد برای چندین زبان است که برای اجرای کد ویرایشگر متن فعلی از طریق منوی فایل اکسپلورر مفید می‌باشد. همچنین می‌توانید قطعه کد انتخاب شده را در ویرایشگر متن اجرا کنید. به علاوه با اجرای کد در ترمینال مجتمع از REPL پشتیبانی می‌کند.

تعداد دانلود: ۴،۵۴۹،۵۴۶

۱۸. DOCKER

این افزونه ساخت، مدیریت و استقرار برنامه‌های دارای کانتینر را آسان می‌کند. همچنین با یک کلیک دیباگینگ کدهایNode.js ، Python و NET Core. را در داخل یک کانتینر فراهم می‌آورد. این ابزار فضاهای کاری را که از محبوب‌ترین زبان‌های توسعه (C # ، Node.js ، Python ، Ruby ، Go و Java) استفاده می‌کنند، شناسایی کرده و فایل‌های Docker تولید شده را بر اساس آن سفارشی سازی می‌کند. به علاوه Docker View به شما امکان می‌دهد assetهای داکر را بررسی و مدیریت کنید که شامل کانتینرها، تصاویر، شبکه‌ها و رجیسترها می‌باشد.

تعداد دانلود: ۵،۱۳۶،۰۱۴

۱۹. BETTER COMMENTS

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

تعداد دانلود: ۹۶۰،۹۲۷

۲۰. DEBUGGER FOR CHROME

دیباگر یک افزونه vscode برای عیب یابی کد جاوااسکریپت شما در مرورگر گوگل کروم یا سایر اهداف پشتیبانی شده توسط پروتکل Chrome DevTools است. این امر به رفع اشکالات اسکریپت‌های eval، تگ‌های اسکریپت و کدهای که به صورت پویا اضافه می‌شوند و تنظیم نقاط شکست از جمله در فایل‌های منبع کد کمک می‌کند.

تعداد دانلود: ۱،۶۱۷،۳۱۱

۲۱. MARKDOWN ALL IN ONE

این افزونه تمام آنچه که برای عملیات علامت گذاری (میانبرهای صفحه کلید، فهرست مطالب، پیش نمایش خودکار و موارد دیگر) لازم دارید را در اختیارتان می‌گذارد. همچنین از سینتکس‌های مختلف علامت گذاری نیز پشتیبانی می‌کند.

تعداد دانلود: ۵،۱۳۶،۰۱۴

۲۲. SEARCH NODE_MODULE

Search node modules یک پلاگین ساده برای VS Code است که به شما امکان می‌دهد به سرعت فایل‌ها را در دایرکتوری node_modules پروژه خود جستجو کنید.

تعداد دانلود: ۵۷۱،۰۴۰

۲۳. SETTINGS SYNC

این ابزار به شما امکان می‌دهد تنظیمات، اسنیپت‌ها، تم‌ها، آسکون‌ها، کلیدهای کیبورد، فضای کاری و افزونه ها را با استفاده از یک Gist ساده همگام سازی کنید. همچنین از GitHub Enterprise، برنامه‌های کاربردی با کلمات کلیدی sync@ پشتیبانی می‌کند: هاست، سیستم‌عامل و .... آپلود و دانلود با یک کلیک به سادگی انجام می‌شود و این امکان را برای شما فراهم می‌کند تا هر فایلی را در دستگاه‌های خود همگام سازی کنید.

تعداد دانلود: ۱،۸۷۰،۱۶۱

۲۴. NPM

این افزونه از اجرای اسکریپت‌های npm تعریف شده در فایل package.json و اعتبارسنجی ماژول‌های نصب شده در برابر وابستگی‌های تعریف شده در package.json پشتیبانی می‌کند. همچنین اسکریپت‌ها را می‌توان هم در ترمینال یکپارچه و هم در یک پنجره خروجی اجرا کرد.

بارگیری تعداد دانلود: ۲،۷۴۸،۳۲

جمع بندی

Visual Studio Code در سال ۲۰۱۹ ماهانه ۴.۹ میلیون کاربر فعال داشت و بدون شک بهترین ویرایشگر کد حال حاضر است. یکی از بهترین ویژگی‌های ارائه دهنده چندین برنامه افزودنی می‌باشد که آن را دقیقا متناسب با نیازهای شما تنظیم کرده و به شما در نوشتن کد با کیفیت بالا کمک می‌کند.

در این مقاله افزونه های VSCode را برای توسعه دهندگان فرانت-اند که با CSS ،HTML ، JavaScript و فریمورک‌هایی مانند Angular ، ReactJS و VueJS کار می کنند، توصیه می‌کنیم.

هرچند این یک مجموعه کامل نیست و افزونه ها لزوما بهترین نیستند، اما امیدواریم که به شما کمک کند تا بهترین ابزارها را برای نوشتن کد با کیفیت بالا و تبدیل شدن به بهترین توسعه دهنده وب انتخاب کنید.

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

ویرایش شده