10 افزونه‌ی فوق‌العاده Visual Studio Code برای توسعه‌دهندگان Frontend
ﺯﻣﺎﻥ ﻣﻄﺎﻟﻌﻪ: 3 دقیقه

10 افزونه‌ی فوق‌العاده Visual Studio Code برای توسعه‌دهندگان Frontend

Visual Studio Code در سال 2017 به طور ماهانه 6.2 میلیون کاربر فعال داشت. این آمار طبق آخرین ارقام رسمی بود که توانستم پیدا کنم اما مطمئناً تا الان این اعداد بیشتر شده است. قطعا این بهترین ویرایشگر کد حال حاضر است.

یکی از بهترین قابلیت‌های آن Market Place است که چندین افزونه را برای شخصی‌سازی دقیق با نیازهای شما ارائه می‌دهد. این ابزار به شما در نوشتن کدهایی با کیفیت کمک خواهد کرد. من در این مقاله برای مهندسان بخش frontend که با زبان‌های جاوا اسکریپت، CSS، HTML و فریمورک‌هایی مانند VueJS یا ReactJS کار می‌کنند، 10 افزونه‌ی VS Code را توصیه می‌کنم.

فهرست مطالب

  • JavaScript Code Snippets
  • NPM
  • Prettier
  • CSS Peek
  • Vetur
  • ESLint
  • Live Sass Compiler
  • Debugger for Chrome
  • Live Server
  • Beautify

JavaScript Code Snippets

این افزونه توسط Charalampos Karypidis ساخته شده و تاکنون ۴.۵ میلیون بار دانلود شده است. این افزونه چند Code Snippet را برای نوشتن Typescript، HHTML، JavaScript، Vue، React و غیره فراهم می‌کند. همچنین از سینتکس ES6 نیز پشتیبانی می‌کند.

NPM

هر توسعه‌دهنده‌ای NPM را می‌شناسد. این افزونه به شما کمک می‌کند تا بتوانید Package.json خود را مدیریت کنید. در صورت عدم نصب وابستگی‌ها، پیام‌های هشداری را ارسال می‌کند و به شما در کنترل نسخه نیز کمک خواهد کرد.

Prettier

این افزونه‌ی بسیار زیبا توسط Esben Petersen ساخته شده است که قبلاً نزدیک به 14 میلیون بار دانلود شده است. این افزونه به شما در قالب‌بندی کدهایتان کمک می‌کند و کلمات کلیدی رنگی را برای خواناتر شدن به شما ارائه می‌دهد.

CSS Peak

این افزونه با شناسایی و شمارش استایل‌های مختلفی که از قبل اعمال شده، به شما هنگام کار در نشانه‌گذاری کلاسِ زبان‌ها و شناسه کمک می‌کند. این موضوع بسیار اهمیت دارد چون دیگر لازم نیست که دائماً به فایل‌های HTML و CSS مراجعه کنید.

Vetur

این افزونه‌ی رسمی VueJS است و قبلاً بیش از 20 میلیون بار دانلود شده است. این افزونه قابلیت بررسی خطا، ویژگی‌های تکمیل خودکار و اسنیپت‌های Vue را برای شما فراهم می‌کند. اگر شما هم مثل من یک توسعه‌دهنده Vue باشید، این افزونه می‌تواند برای شما خیلی کاربردی باشد.

ESLint

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

Live Sass Compiler

این یک افزونه‌ی کوچک اما قدرتمند است که می‌تواند فایل‌های SASS و SCSS شما را فوراً در فایل‌های CSS کامپایل کند. همچنین یک پیش نمایش زنده از استایل‌های کامپایل شده را در مرورگر شما ارائه می‌دهد.

Debugger for Chrome

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

Live Server

این افزونه درست مانند افزونه‌ی Live Sass Compiler توسط Ritwick Dey ساخته شده است. این افزونه یک سرور توسعه‌ی محلی در Visual Studio Code به وجود می‌آورد تا به سایت‌های استایتک و پویای شما خدمات رسانی کند. با استفاده از دکمه «go-live» در ویرایشگر می‌توانید فوراً کدهای خود را ارائه دهید. این افزونه از بارگیری زنده نیز یشتیبانی می‌کند.

Beautify

این افزونه نیز مانند Prettier یک گزینه بسیار عالی برای قالب‌بندی کدهاست. این افزونه تقریباً 12 میلیون دانلود داشته و می‌توانید کدهای نوشته شده با CSS، JSON، JavaScript، Sass و HTML را قالب‌بندی کنید.

نتیجه‌گیری

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

منبع

چه امتیازی برای این مقاله میدهید؟

خیلی بد
بد
متوسط
خوب
عالی
4.57 از 7 رای

/@Pemi.razmi
علیرضا داداشی
دانشجوی مهندسی پزشکی

دیدگاه و پرسش

برای ارسال دیدگاه لازم است وارد شده یا ثبت‌نام کنید ورود یا ثبت‌نام

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

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

علیرضا داداشی

دانشجوی مهندسی پزشکی

مقالات برگزیده

مقالات برگزیده را از این قسمت میتوانید ببینید

مشاهده همه مقالات