معرفی 40 افزونه یا پلاگین کاربردی VSCode

در این پست می خواهیم برترین افزونه های VS Code  را برای شما معرفی کنیم امیدوارم از این پست لذت ببرید.

هنگام ایجاد کد، یک فضای کاری مولد فراتر از یافتن ویرایشگر کد مناسب است. VS Code برای توسعه دهندگان توسط توسعه دهندگان ساخته شده است. طبق نظرسنجی StackOverflow در سال 2021، 71.06٪ از همه پاسخ دهندگان از Visual Studio Code به عنوان IDE انتخابی استفاده می کنند.

چیزی که VS Code را بسیار محبوب می کند، تعداد افزونه های موجود در بازار است. با بیش از 30000 افزونه در گردش، گزینه ها تقریباً بی حد و حصر – و در عین حال بسیار زیاد به نظر می رسند.

طبق گفته WakaTime، یک ابزار ردیابی زمان برای برنامه نویسان، Visual Studio Code در سال 2020 در بیش از 18 میلیون ساعت از برنامه نویسی کار کرد. علاوه بر این، Visual Studio Code 46٪ از کل زمان ردیابی شده در تمام ویرایشگرهای مورد استفاده توسط توسعه دهندگان را به خود اختصاص داده است.

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

در اینجا بیش از 40 افزونه VS Code وجود دارد که به شما کمک می کند بهره وری خود را افزایش دهید و به عنوان یک توسعه دهنده مؤثرتر شوید.

1-GraphQL

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

این افزونه توسط بنیاد رسمی GraphQL نگهداری می شود، به این معنی که به طور فعال پشتیبانی می شود و آخرین پیاده سازی را حفظ می کند.

2-Tabnine

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

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

3-YAML

راه اندازی YAML ممکن است مشکل باشد. یک فضای سرگردان یا برگه نادرست می تواند منجر به یک فایل YAML نامعتبر شود. پلاگین YAML توسط Red Hat نگهداری می شود و به عنوان یک ابزار اعتبار سنجی عمل می کند.

4-Remote – SSH

Remote SSH که در سال 2019 منتشر شد، به بیش از 5 میلیون دانلود رسیده است. این برنامه افزودنی به شما امکان می دهد از یک سرور راه دور به عنوان محیط توسعه خود استفاده کنید. اتصال شما از طریق SSH ایمن باقی می‌ماند و با Remote – SSH، می‌توانید آن را مستقیماً در VS Code انجام دهید.

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

5-Settings Sync

همگام سازی تنظیمات
روی چندین دستگاه کار می کنید؟ Settings Sync مشکل آزاردهنده عدم تنظیم فضای کاری شما را حل می کند. با تنظیمات همگام‌سازی، می‌توانید با کمک GitHub Gists، قطعه‌ها، تم‌ها، نمادهای فایل، اتصال‌های کلید و افزونه‌ها را به هر کجا که نیاز دارید ببرید.

بهترین بخش Settings Sync این است که کاملا رایگان، منبع باز است و بیش از 2 میلیون نصب دارد.

6-Auto Rename Tag

تغییر نام خودکار برچسب
با حمایت TabNine، تغییر نام خودکار برچسب برای اولین بار در بازار در سال 2016 راه اندازی شد. از آن زمان به بیش از 6 میلیون دانلود رسیده است و به طور گسترده توسط توسعه دهندگان برای کمک به کار ساده و در عین حال آزاردهنده تغییر نام تگ های جفت شده HTML/XML استفاده می شود.

7-CSS Peek

اگر در فرانت اند کار می کنید، CSS بخشی اجتناب ناپذیر از گردش کار است. همانطور که پروژه رشد می کند، استایل شما برای مطابقت با الزامات نیز افزایش می یابد. CSS طبیعتاً خطی است، که می تواند خسته کننده باشد، به خصوص اگر بخواهید بدون نیاز به پیمایش و پیمایش در بین فایل های مختلف، استایل را بررسی کنید تا آنچه را که دنبال آن هستید پیدا کنید.

CSS Peek یک افزونه VS Code است که به شما امکان می دهد تنها با چند کلیک ساده به تعریف و نماد CSS در فضای کاری بروید.

8-Code Runner

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

با حمایت TabNine، این برنامه افزودنی صرفه جویی در زمان توسط توسعه دهندگان لذت می برد و بیش از 9 میلیون بار نصب شده است.

این برنامه با پشتیبانی نحو داخلی Kubernetes ارائه می شود و دارای پنج ویژگی اصلی است – اعتبار سنجی، ترسیم سند، تکمیل خودکار، پشتیبانی بیش از حد برای نمایش توضیحات در صورت ارائه طرح و فرمت.

9-Material Icon Theme

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

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

10-Bracket Pair Colorizer

بیایید صادق باشیم – همه ما در مقطعی براکت ها و براکت های خود را گم کرده ایم. وقتی با شرایط لانه سازی و منطقی سر و کار دارید، بدتر می شود. Bracket Pair Colorizer مشکل شکار جفت براکت را در کد ما با چسباندن رنگ های مختلف به هر جفت حل می کند.

این بدان معنی است که اگر چند براکت دارید، برای راحتی و بهره وری کد ما به راحتی رنگ مطابقت دارد.

11-Peacock

گاهی اوقات، شما نیاز دارید که چندین نمونه از VS Code را باز کنید. ممکن است به طور همزمان روی چندین پایگاه کد کار می کنید یا نیاز به جابجایی سریع بین پروژه ها بدون نیاز به باز و بسته کردن آنها دارید.

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

12-Colorize

استفاده از رنگ ها یک ابزار قدرتمند بهره وری است. وقتی در کد شما گنجانده شود، می تواند گردش کار شما را سرعت بخشد. Colorize با در نظر گرفتن CSS ایجاد می شود و به شما کمک می کند فوراً رنگ های CSS را از طریق پس زمینه رنگی برای متغیرهای css، متغیرهای پیش پردازنده، رنگ های hsl/hsla، رنگ های متقابل مرورگرها، exa، rgb، rgba و argb تجسم کنید.

پشتیبانی از CSS, SASS, LESS, post CSS, stylus, and XML.

13-vscode-icons

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

14-Icon Fonts

آیا در پروژه های خود از Font Awesome استفاده می کنید؟ یا از آیکن اندروید استفاده می کنید؟ آیا می‌خواهید بدون نیاز به مراجعه سریع به اسناد، نمونه‌سازی اولیه کنید؟ Icon Fonts یک ابزار کار بهره وری است که تکمیل خودکار و IntelliSense را برای گنجاندن طیف گسترده ای از فونت های نماد در HTML ظاهر شما ترکیب می کند.

افزونه Icon Font با پشتیبانی از فونت‌های آیکون اصلی مانند فونت‌های Creative Commons Icon، Font Logos و Bootstrap Glyphicons یکی از ضروریات است.

15-Live SASS Compiler

SASS یک راه فوق العاده برای متمرکز و سازماندهی CSS شما است. با این حال، زمانی که بارگذاری مجدد زنده ندارید، می تواند دردسرساز باشد. Live SASS Compiler به شما این امکان را می دهد که ببینید چگونه تغییرات شما بر خروجی بصری شما تأثیر می گذارد.

این افزونه VS Code فایل‌های SASS و SCSS شما را در زمان واقعی با بارگذاری مجدد زنده خودکار و بدون نیاز به انجام کار اضافی، کامپایل/تغییر می‌کند.

16-Live Server

Live Server یکی از نصب شده ترین افزونه های VS Code در بازار با بیش از 15 میلیون نصب است. چرا؟ زیرا به شما امکان می دهد ویرایشگر VS Code خود را به یک IDE کاملاً کاربردی تبدیل کنید.

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

17-GitLens

GitLens پس از Live Server با بیش از 11 میلیون نصب و امتیاز 5 ستاره تقریباً عالی در مسیر محبوبیت قرار دارد. GitLens ایجاد شده است تا به توسعه دهندگان کمک کند تا به سرعت حرکت کنند و بفهمند که چگونه کد آنها تغییر می کند، ویرایش می شود، تغییر می کند و باعث تضاد می شود.

گاهی اوقات، روند برخورد با git در کنسول می تواند طاقت فرسا باشد. GitLens بار ذهنی  ما را از طریق فایل‌های git در کنسول با انتقال آنها به فضای کاری ما کاهش می‌دهد.

18-Git History

Git History یک افزونه VS Code است که به شما امکان می دهد به تاریخچه نگاه کنید و commit ها، پیام ها، شاخه ها، فایل ها و نویسندگان را به راحتی جستجو کنید. علاوه بر این، به شما این امکان را می‌دهد تا با چند کلیک و دستورات ساده، cherry-pick commit‌ها، مقایسه فایل‌ها، بازنشانی نرم و سخت، برگرداندن، ادغام و تغییر پایه را انجام دهید.

19-Code Time

آیا تا به حال به این فکر کرده اید که چه مدت برای کدنویسی وقت می گذارید؟ علیرغم تغییر به کار از راه دور، هنوز هم می‌توانیم به راحتی حواس‌مان را از چیزهای زندگی مانند بچه‌ها، تحویل بسته‌ها و حتی سگ پرت کنیم – همانطور که وقتی در دفتری از طریق همکاران و جلسات بداهه می‌نشینیم. Code Time با ردیابی زمان شما را مسئول بهره وری خود نگه می دارد و می تواند به شما کمک کند روی کدام پروژه بیشتر کار می کنید تقسیم بندی کنید.

ویژگی‌هایی مانند «Enter Flow Mode» می‌تواند به شما کمک کند از زمان خود محافظت کنید و معیارهای توسعه را پیگیری کنید تا معیارهای کدگذاری خود را به عنوان یک روند آماری ببینید.

20-Polacode

می خواهید یک قطعه کد را به اشتراک بگذارید؟ آیا می خواهید حرفه ای به نظر برسد؟ Polacode یک پلاگین کوچک جالب است که به شما امکان می دهد بدون نیاز به از بین بردن ابزار snipping، “polaroids” کد خود را بردارید. کد مورد نظر خود را هایلایت می کنید و به طور خودکار یک فایل کد فرمت شده ایجاد می کند.

21-Docker Explorer

داکر اکسپلورر
Docker یک ایده خارق‌العاده است، اما نگه داشتن تمام تصاویر، هاب‌ها و رجیستری‌های شما می‌تواند پیچیده باشد. Docker Explorer این کار را آسان‌تر کرده و مستقیماً برای مدیریت زنده به رجیستری کانتینر Azure متصل می‌شود.

22-Remote Development

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

23-Prettier

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

24-Beautify

زیبا کردن
اگر می خواهید یک شورشی باشید، Beautify جایگزین شما برای زیباتر است. با بیش از 7 میلیون نصب، Beautify یکی دیگر از «زیباکننده» کدهای جامد است که کد شما را با کمترین مداخله پرده و فرمت می کند.

خرید هاست وردپرس ایران

25-TODO Highlight

همه ما یک لیست کاری از کارهایی که باید در کد انجام دهیم داریم. همچنین اغلب یادداشت هایی برای خود و دیگران به صورت کامنت می گذاریم. با این حال، نظرات اغلب محو می شوند و در پس زمینه محو می شوند. TODO Highlight یک افزونه VS Code است که به ما امکان می دهد از نظرات موجود در کد خود به دلایل بهره وری استفاده کنیم. با برجسته کردن حاشیه‌نویسی‌های کد و جفت‌کردن رنگ آن‌ها با فهرست اصلی کارها کار می‌کند.

26-Better Comments

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

خرید هاست لینوکس

27-Excel Viewer

نمایشگر اکسل
اگر با داده ها کار می کنید، احتمال زیادی وجود دارد که با یک صفحه گسترده اکسل نیز به شکلی مواجه شوید. Excel Viewer با قالب‌بندی رشته‌های بلند و جدا شده با کاما در قالب جدول، کار با داده‌های اکسل را در ویرایشگر کد VS شما آسان می‌کند. این می تواند برای پسوندهای csv.، tsv.، و .tab شما معجزه کند.

28-Markdownlint

مارک داونلینت
به نوعی، markdown HTML جدید است. با این حال، زمانی که علامت‌گذاری شما یک *، # یا فاصله را از دست می‌دهد، می‌تواند دشوار باشد. markdownlint با ناهماهنگی های قالب بندی که با نوشتن علامت گذاری به وجود می آید، سروکار دارد. همچنین با هشدار دادن به شما در صورت نقض قوانین نشانه‌گذاری به شما کمک می‌کند تا علامت‌گذاری صحیح را یاد بگیرید.

29-ESLint

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

خرید سرور مجازی ایران

30-Code Spell Checker

رفع اشتباهات املایی کدها
همه ما این کار را انجام داده ایم – همه ما در جایی اشتباه تایپی داشته ایم و دقایق گرانبهایی را صرف شکار آنها کرده ایم. Code Spell Checker یک بررسی املای مفید و پرکاربرد است که با کد camelCase نیز کار می کند.

این افزونه VS Code به بیش از 3 میلیون کاربر نصب شده کمک کرده است تا اشتباهات املایی را قبل از اینکه در جریان کار کدنویسی مشکل ساز شوند، پیدا کنند.

31-JavaScript Debugger

اشکال زدا جاوا اسکریپت
چندین دیباگر جاوا اسکریپت در بازار ویژوال استودیو وجود دارد. یک پسوند افزونه قوی که باید بررسی کنید جاوا اسکریپت Debugger است. این دیباگر جاوا اسکریپت مبتنی بر DAP می تواند Node.js را با فرآیندهای نمایش داده شده در ترمینال اشکال زدایی کند.

32-urbo Console Log

لاگ های کنسول می توانند بهره وری شما را افزایش دهند یا از بین ببرند. Turbo Console Log یک افزونه فعال برای VS Code است که به شما امکان می دهد متغیر را برای موضوع اشکال زدایی خود انتخاب کنید و به طور خودکار پیام های گزارش را به نزدیکترین خط نسبت اضافه می کند. این به شما امکان می دهد بدون نوشتن کد console.log به سرعت اشکال زدایی کنید.

33-Regex Previewer

Regex گاهی اوقات ممکن است گیج کننده باشد. به همین دلیل است که Regex Previewer یک ابزار افزونه افزونه مفید برای تنظیم VS Code شما است. مطابقت عبارات منظم را با یک پنجره کنار هم با به روز رسانی زنده بر اساس regex شما در زمان واقعی نشان می دهد.

34-Task Explorer

npm، grunt، sass، yarn، docker و هر چیز دیگری که در حال اجرا نیاز دارید را می توان به طور موثر و کارآمد از طریق Task Explorer انجام داد. این افزونه VS Code نوار کناری و/یا کاوشگر شما را با توانایی اجرای وظایف گسترش می دهد. بنابراین اکنون، برای انجام کارها نیازی به دور شدن از فضای کاری VS Code خود نیست.

35-Test Explorer UI

رابط کاربری Explorer را تست کنید
تست می تواند یک فرآیند دستی باشد، اگر پیچیده نباشد. TEST Explorer UI افزونه‌ای است که به توسعه‌دهندگان یک رابط کاربری برای اجرای تست‌های خود در Visual Studio Code ارائه می‌دهد. این افزونه از هزاران زبان پشتیبانی می‌کند و شامل جاوا اسکریپت، ABAP، C، C++، Exlir، Elm، Go، Haxe، جاوا، پایتون، روبی، REST/GraphQL و سایر زبان‌ها و پیاده‌سازی‌های محبوب است.

36-Python

پایتون
افزونه Python برای VS Code یک پشتیبانی غنی است که شامل Pylance IntelliSense، linting، اشکال زدایی، ناوبری کد، قالب‌بندی کد، refactoring و کاوشگر متغیر است.

37-JavaScript Code Snippets

علاوه بر پشتیبانی از جاوا اسکریپت، قطعه کد جاوا اسکریپت از کدهای TypeScript، TypeScript React، Html و Vue نیز پشتیبانی می کند.

38-Quokka.js

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

39-Import Cost

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

40-Docker

Docker با بیش از 11 میلیون نصب، افزونه افزونه ای است که در Visual Studio Code برای هر چیزی که مربوط به Docker است، استفاده می شود. این برنامه افزودنی به شما امکان می دهد به راحتی برنامه های کانتینری را بسازید، مدیریت کنید و استقرار دهید و اشکال زدایی با یک کلیک را فراهم می کند. شما به راحتی می توانید فایل های docker را با Docker ویرایش و تولید کنید.