۱۵ مورد از بهترین افزونه های VSCode برای برنامه نویسی بهتر در سال ۲۰۲۱

17 تیر 1400, خواندن در 10 دقیقه

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

VSCode یک ابزار قدرتمند است، اما اگر به درستی مدیریت نشود می‌تواند دردسرساز باشد. مثلاً فکر کنید که مجبور به استفاده از XCode، Android Studio، Chrome و VSCode هستید، قطعاً بعد از چند دقیقه یک چیزی منفجر خواهد شد؛ مگر اینکه بهترین لپتاپ‌ها یا ماشین‌های دنیا را داشته باشید. اما اکثر ما چنین امکاناتی را در اختیار نداریم.

بنابراین زمان آن رسیده تا برخی از موارد موجود در جعبه ابزار VSCode خود را پاکسازی کنید. از این مقاله به عنوان مرجعی برای ابزارهایی که باید نگه دارید استفاده کنید.

با بیش از ۴ سال سابقه‌ی کار به عنوان یک توسعه دهنده حرفه‌ای، این ۱۵ افزونه برتر VSCode را با شما به اشتراک میگذارم. خودم سال‌هاست که از آن‌ها استفاده می‌کنم. این افزونه‌ها تنها برای بهره وری نیستند، بلکه به بسیاری از توسعه دهندگان کمک می‌کنند تا به برنامه نویسان بهتری تبدیل شوند.

نیل گرشنفلد گفته است:« به مردم عادی ابزارهای مناسب بدهید تا شگفت انگیزترین چیزها را طراحی کرده و بسازند.»

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

Auto-Close Tag

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

این افزونه به یک دلیلی ۴ میلیون دانلود داشته است. می‌توانید آن را به طور مستقیم از طریق VSCode خود نصب کنید.

Terminal

این افزونه بیش از ۲۹۶,۸۵۳ دانلود داشته است.

ترمینال توسط Jun Han نوشته شده است. این خالق، افزونه های دیگری مثل auto-close tag و auto-rename tag را نیز ساخته است. VSCode از قبل ترمینال داخلی خود را دارد که کاربران مک می‌توانند با استفاده از ctrl+’ آن را باز کنند.

اما دارای یک سری از میانبرهاست که باعث سرعت بخشیدن به کارها می‌شود. این قابلیت‌ها را بررسی کنید:

  • تمام دستورات را در ویرایشگر متن اجرا کنید
  • دستورات انتخاب شده را در ویرایشگر متن اجرا کنید
  • دستورات در حال اجرا را متوقف کنید
  • خروجی را در پنجره خروجی مشاهده کنید
  • ترمینال مجتمع را در دایرکتوری فایل فعلی باز کنید
  • روشی سریع برای تغییر وضعیت ترمینال مجتمع

می‌توانید آن را مستقیماً از طریق VSCode خود نصب کنید.

Bracket Pair Colorizer

این افزونه بیش از ۴.۵ میلیون دانلود داشته است.

Bracket Pair Colorizer یک ابزار ضروری در جعبه ابزار VSCode شماست.

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

می‌توانید آن را مستقیماً از طریق VSCode خود نصب کنید.

Prettier

بیش از ۱۰.۸ میلیون دانلود داشته و یکی از محبوب‌ترین افزونه های VSCode است.

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

تنظیم آن بسیار آسان است و بلافاصله پس از فشردن دکمه‌ی save به صورت خودکار فرمت می‌شود. می‌توانید آن را مستقیماً از طریق VSCode خود نصب کنید.

Path Intellisense

این افزونه بیش از ۴.۲ میلیون دانلود داشته است.

به عنوان مثال این افزونه می‌تواند در تکمیل خودکار واردات یا مسیر فراخوانی یک مولفه به شما کمک کند. این ابزار برای من بسیار کاربرد داشته است. چرا باید تمام مسیرهای فایل‌ها را به خاطر داشته باشیم؟ این فقط هدر دادن منابع است؛ در حالی که این افزونه می‌تواند این کار را برای ما انجام دهد.

می‌توانید مستقیماً آن را از طریق VSCode خود نصب کنید.

Javascript ES6 Code Snippets/ Snippets

این افزونه بیش از ۴. ۸۸ میلیون دانلود داشته است.

تمام توسعه دهنده‌های جاوا اسکریپت باید این افزونه را داشته باشند. این افزونه با یک پشتیبانی پیش ساخت برای Javascript ES6، Vue، Reactjs، Typescript و HTML همراه است.

اسنیپت‌ها واقعاً عالی هستند. به عنوان مثال دیگر لازم نیست که یک الگو را بارها و بارها بنویسید، با نوشتن ۳ کلمه الگو یا قالب مورد نیاز شما نمایش داده می‌شود.

شما می‌توانید این افزونه را مستقیماً از VSCode خود نصب کنید.

GitLens

این افزونه بیش از ۸ میلیون دانلود داشته است.

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

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

می‌توانید مستقیماً آن را از طریق VSCode خود نصب کنید.

VSCode Themes

این افزونه بیش از ۳.۲ میلیون دانلود داشته است.

این مورد یکی از همان افزونه هایی است که هر توسعه دهنده‌ای به دنبال آن است. اینکه vscode خود را براساس علاقه‌هایمان طراحی کنیم، فقط بخش جالب این ماجراست. تِم متریال فقط یکی از صدها موضوع موجود در بازار است، شما همیشه می‌توانید موضوع مربوط و مناسب به خودتان را انتخاب کنید. من خیلی تم‌های تاریک را دوست دارم. اگر کنجکاو هستید، تم فعلی من "Community Material Theme Palenight Contrast" است.

می‌توانید مستقیماً آن را از طریق VSCode خود نصب کنید.

NPM Intellisense

این افزونه بیش از ۲.۸ میلیون دانلود داشته است.

این افزونه عملکردی مشابه به Path Intellisense دارد اما آن‌ها این ابزار را برای پکیج‌های npm خلق کرده‌اند. مطمئناً شکی در استفاده بیش از حد NPM از حافظه نیست، اما با این وجود هنوز چیزهای زیادی در آن وجود دارد که پیگیری کردن آن‌ها کمی دشوار است.

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

می‌توانید مستقیماً آن را از طریق VSCode خود نصب کنید.

Auto Rename Tag

این افزونه بیش از ۴.۶ میلیون دانلود داشته است.

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

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

می‌توانید مستقیماً آن را از طریق VSCode خود نصب کنید.

Better Comments

این افزونه بیش از ۱.۴ میلیون دانلود داشته است.

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

می‌توانید مستقیماً آن را از طریق VSCode خود نصب کنید.

Code Spell Checker

این افزونه بیش از ۲.۲ میلیون دانلود داشته است.

یک جستجوگر املایی که با کد camelCase به خوبی کار می‌کند. عملکرد اصلی این افزونه کمک به شما در پیدا کردن خطاهای املایی رایج است. مطمئناً هنگام برنامه نویسی این آخرین کاری است که می‌خواهیم آن را انجام دهیم.

می‌توانید مستقیماً آن را از طریق VSCode خود نصب کنید.

VSCode Icons

این افزونه بیش از ۷.۱ میلیون دانلود داشته است.

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

به نظر من این افزونه مفید است زیرا با استفاده از آیکون‌ها، تشخیص نوع فایل مورد نظر آسان‌تر است. حال آن فایل می‌تواند Javascript، CSS، SASS، PHP، Docker، Phyton، عکس و یا خیلی چیزهای دیگر باشد. این ابزار تشخیص فایل‌ها را آسان‌تر می‌کند و به دنیای تاریک ما رنگ می‌بخشد.

می‌توانید مستقیماً آن را از طریق VSCode خود نصب کنید.

Settings Sync

این افزونه بیش از ۲.۲ میلیون دانلود داشته است.

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

می‌توانید مستقیماً آن را از طریق VSCode خود نصب کنید.

Import Cost

این افزونه ۰۰۵,۹۶۴ دانلود داشته است.

من به تازگی با این افزونه آشنا شده‌ام. این ابزار اندازه‌ی واردات شما را محاسبه می‌کند و به نظرم می‌تواند مفید باشد. حالا می‌توانم تصمیم بگیرم که کل پکیج را وارد کنم یا اینکه تنها ماژول‌های خاصی را به آن اضافه کنم. مطمئناً این ابزار به درد شما خواهد خورد و وقتی در یک پروژه‌ی بزرگ مشغول به کار شوید، قدردان آن خواهید بود.

می‌توانید مستقیماً آن را از طریق VSCode خود نصب کنید.

منبع

چه امتیازی به این مقاله می دید؟
خیلی بد
بد
متوسط
خوب
عالی

دیدگاه‌ها و پرسش‌ها

برای ارسال دیدگاه لازم است، ابتدا وارد سایت شوید.

در حال دریافت نظرات از سرور، لطفا منتظر بمانید

در حال دریافت نظرات از سرور، لطفا منتظر بمانید

آفلاین
user-avatar
علیرضا داداشی @Pemi.razmi
دنبال کردن

گفتگو‌ برنامه نویسان

بخشی برای حل مشکلات برنامه‌نویسی و مباحث پیرامون آن وارد شو