برنامه های افزودنی ضروری در مقابل کد برای توسعه دهندگان وب

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

1. زیباتر – فرمت کننده کد

بررسی اجمالی

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

امکانات

• بسیاری از زبان های برنامه نویسی را پشتیبانی می کند.
• با اکثر ویرایشگرها ادغام می شود.
• قابل تنظیم از طریق فایل های پیکربندی.
• می تواند به عنوان یک ابزار CLI اجرا شود.

نصب و راه اندازی
برای نصب Prettier، نمای Extensions را با کلیک کردن بر روی نماد مربع در نوار کناری یا فشار دادن باز کنید. Ctrl+Shift+X، سپس “Prettier” را جستجو کنید و روی “Install” کلیک کنید.

پیکربندی

می توانید Prettier را از طریق a پیکربندی کنید .prettierrc فایل در ریشه پروژه خود در اینجا یک نمونه پیکربندی آمده است:

{
  "singleQuote": true,
  "trailingComma": "all",
  "printWidth": 80,
  "tabWidth": 2
}

2. ESLint

بررسی اجمالی

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

امکانات

• قابل اتصال و تنظیم
• از طیف گسترده ای از قوانین پشتیبانی می کند.
• با اکثر ویرایشگرها ادغام می شود و سیستم می سازد.
• می تواند به طور خودکار بسیاری از مشکلات را برطرف کند.

نصب و راه اندازی

برای نصب ESLint، “ESLint” را در نمای Extensions جستجو کنید و روی “Install” کلیک کنید.

پیکربندی

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

{
  "extends": "eslint:recommended",
  "env": {
    "browser": true,
    "node": true,
    "es6": true
  },
  "rules": {
    "semi": ["error", "always"],
    "quotes": ["error", "single"]
  }
}

3. رنگ‌ساز جفت براکت 2

بررسی اجمالی

Bracket Pair Colorizer 2 اجازه می دهد تا براکت های مطابق با رنگ ها شناسایی شوند. این پسوند می‌تواند به‌ویژه در فایل‌های کد بزرگ که ردیابی براکت‌ها با یکدیگر مطابقت دارند دشوار باشد.

امکانات

• رنگ های قابل تنظیم
• پشتیبانی از انواع براکت (گرد، مربع، مجعد).
• از براکت های تو در تو پشتیبانی می کند.

نصب و راه اندازی

برای نصب Bracket Pair Colorizer 2، “Bracket Pair Colorizer 2” را در نمای Extensions جستجو کنید و روی “Install” کلیک کنید.

پیکربندی

می توانید رنگ های استفاده شده توسط Bracket Pair Colorizer 2 را در تنظیمات VS Code خود پیکربندی کنید:

{
  "bracketPairColorizer.colorMode": "Independent",
  "bracketPairColorizer.colors": [
    "Gold",
    "Orchid",
    "LightSkyBlue"
  ]
}

4. مسیر هوشمندانه

بررسی اجمالی

Path Intellisense تکمیل خودکار مسیرهای فایل در پروژه شما را فراهم می کند. این پسوند به شما کمک می کند تا فایل ها را سریع و دقیق اضافه کنید و احتمال خطا را کاهش دهید.

امکانات

• مسیرهای فایل را با تایپ خودکار تکمیل می کند.
• از مسیرهای نسبی و مطلق پشتیبانی می کند.
• با سبک های وارداتی مختلف کار می کند.

نصب و راه اندازی

برای نصب Path Intellisense، “Path Intellisense” را در نمای Extensions جستجو کنید و روی “Install” کلیک کنید.

5. سرور زنده

بررسی اجمالی

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

امکانات

• بارگذاری مجدد در زمان واقعی
• از HTML، CSS، جاوا اسکریپت و غیره پشتیبانی می کند.
• تنظیمات سرور قابل تنظیم

نصب و راه اندازی

برای نصب Live Server، “Live Server” را در نمای Extensions جستجو کنید و روی “Install” کلیک کنید.

استفاده

پس از نصب، می‌توانید با کلیک راست روی یک فایل HTML در Explorer و انتخاب «Open with Live Server» سرور را راه‌اندازی کنید.

6. GitLens – Git سوپرشارژ شده

بررسی اجمالی

GitLens قابلیت‌های Git داخلی VS Code را افزایش می‌دهد. با ارائه بینش Git غنی به درک بهتر کد کمک می کند.

امکانات

• اطلاعات نویسندگی کد در یک نگاه
• تغییرات کد را در طول زمان تجسم کنید.
• به طور یکپارچه در مخازن Git پیمایش و کاوش کنید.

نصب و راه اندازی

برای نصب GitLens، “GitLens” را در نمای افزونه ها جستجو کنید و روی “Install” کلیک کنید.

7. مشتری REST

بررسی اجمالی

پسوند REST Client به شما امکان می دهد درخواست های HTTP را ارسال کنید و پاسخ ها را مستقیماً در VS Code مشاهده کنید. این به ویژه برای آزمایش API ها مفید است.

امکانات

• درخواست های پروتکل HTTP، HTTPS و فایل ارسال کنید.
• جزئیات پاسخ از جمله سرصفحه ها، کوکی ها و بدنه را مشاهده کنید.
• ذخیره و سازماندهی درخواست ها در فایل ها

نصب و راه اندازی

برای نصب REST Client، “REST Client” را در نمای Extensions جستجو کنید و روی “Install” کلیک کنید.

استفاده

می توانید یک فایل درخواست HTTP با استفاده از .http یا .rest برنامه افزودنی، درخواست های خود را بنویسید و با استفاده از دکمه “ارسال درخواست” که در بالای درخواست ظاهر می شود، آنها را ارسال کنید.

8. داکر

بررسی اجمالی

پسوند Docker ایجاد، مدیریت و استقرار برنامه های کاربردی کانتینری را از داخل VS Code آسان می کند.

امکانات

• تصاویر، کانتینرها و رجیستری های Docker را مدیریت کنید.
• از Docker Compose پشتیبانی می کند.
• رابط کاربری بصری برای دستورات Docker.

نصب و راه اندازی

برای نصب Docker، “Docker” را در نمای Extensions جستجو کنید و روی “Install” کلیک کنید.

9. تم نماد مواد

بررسی اجمالی

Material Icon Theme مجموعه ای زیبا از آیکون ها را بر اساس تم طراحی متریال ارائه می کند. این به تشخیص بصری فایل ها و پوشه ها در پروژه شما کمک می کند.

امکانات

• بیش از 1000 آیکون
• قابل تنظیم از طریق پیکربندی
• از تم های مختلف پوشه پشتیبانی می کند.

نصب و راه اندازی

برای نصب Material Icon Theme، “Material Icon Theme” را در نمای Extensions جستجو کنید و روی “Install” کلیک کنید.

10. تغییر نام خودکار برچسب

بررسی اجمالی

تگ تغییر نام خودکار به طور خودکار تگ های HTML/XML جفت شده را تغییر نام می دهد. این یک افزونه کوچک اما قدرتمند است که می تواند در زمان زیادی صرفه جویی کند.

امکانات

• به طور خودکار برچسب های جفت شده را تغییر نام می دهد.
• با HTML، XML، PHP، Vue و غیره کار می کند.

نصب و راه اندازی

برای نصب برچسب تغییر نام خودکار، “تغییر نام خودکار برچسب” را در نمای افزونه ها جستجو کنید و روی “نصب” کلیک کنید.

11. برچسب بستن خودکار

بررسی اجمالی

وقتی برچسب باز را تایپ می کنید، برچسب بستن خودکار به طور خودکار برچسب های بسته شدن را اضافه می کند. این پسوند به ویژه برای فایل های HTML و XML مفید است.

امکانات

• به طور خودکار برچسب های بسته شدن را اضافه می کند.
• پشتیبانی از چندین زبان

نصب و راه اندازی

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

12. قطعه کد جاوا اسکریپت (ES6).

بررسی اجمالی

قطعه کد جاوا اسکریپت (ES6) مجموعه ای از قطعات مفید جاوا اسکریپت را برای نحو ES6 در اختیار شما قرار می دهد.

امکانات

• از نحو و ویژگی های ES6 پشتیبانی می کند.
• شامل قطعاتی برای الگوها و ابزارهای رایج است.

نصب و راه اندازی

برای نصب تکه کدهای جاوا اسکریپت (ES6) در نمای افزونه ها عبارت “تجزیه کد جاوا اسکریپت (ES6)” را جستجو کنید و روی “نصب” کلیک کنید.

13. نمادهای کد VS

بررسی اجمالی

VS Code Icons یکی دیگر از پسوندهای تم نماد است که مجموعه ای از آیکون های فایل را برای VS Code فراهم می کند و به شما کمک می کند پروژه خود را به صورت بصری هدایت کنید.

امکانات

• آیکون های قابل تنظیم
• پشتیبانی از انواع فایل ها و پسوندها
• به روز رسانی های مکرر با آیکون های جدید.

نصب و راه اندازی

برای نصب VS Code Icons، “VS Code Icons” را در نمای Extensions جستجو کنید و روی “Install” کلیک کنید.

14. ساس

بررسی اجمالی

Sass افزونه ای برای ویرایش فایل های Sass است. برجسته سازی نحو و پرده برای Sass فراهم می کند.

امکانات

• برجسته سازی نحو برای فایل های Sass/SCSS.
• پرزدگی و بررسی خطا.

نصب و راه اندازی

برای نصب Sass، “Sass” را در نمای Extensions جستجو کنید و روی “Install” کلیک کنید.

15. استایلینت

بررسی اجمالی

Stylelint یک لینت مدرن است که به شما کمک می کند از اشتباهات جلوگیری کنید و قراردادها را در سبک های خود اجرا کنید.

امکانات

• CSS، SCSS، Less و دیگر شیوه نامه ها را Lints می کند.
• قوانین و تنظیمات قابل تنظیم
• با سایر ابزارها و ویرایشگرها ادغام می شود.

نصب و راه اندازی

برای نصب Stylelint، “Stylelint” را در نمای Extensions جستجو کنید و روی “Install” کلیک کنید.

پیکربندی

می توانید Stylelint را از طریق a پیکربندی کنید .stylelintrc فایل در ریشه پروژه خود در اینجا یک نمونه پیکربندی آمده است:

{
  "extends": "stylelint-config-standard",
  "rules": {
    "indentation": 2,
    "string-quotes": "single"
  }


}

16. Markdown All in One

بررسی اجمالی

Markdown All in One افزونه‌ای است که از ویرایش Markdown، از جمله برجسته‌سازی نحو، قالب‌بندی و پیش‌نمایش پشتیبانی می‌کند.

امکانات

• برجسته سازی نحو.
• تکمیل خودکار
• پیش نمایش زنده

نصب و راه اندازی

برای نصب Markdown All in One، “Markdown All in One” را در نمای افزونه ها جستجو کنید و روی “Install” کلیک کنید.

17. ALL برجسته

بررسی اجمالی

TODO هایلایت موارد TODO، FIXME و سایر حاشیه نویسی ها را در کد شما برجسته می کند.

امکانات

• کلمات کلیدی قابل تنظیم
• حاشیه نویسی ها را با رنگ های مختلف برجسته کنید.

نصب و راه اندازی

برای نصب TODO Highlight، “TODO Highlight” را در نمای Extensions جستجو کنید و روی “Install” کلیک کنید.

18. نظرات بهتر

بررسی اجمالی

Better Comments با فعال کردن کدگذاری رنگی، خوانایی نظرات در کد شما را بهبود می بخشد.

امکانات

• رنگ های مختلف برای انواع نظرات.
• از برچسب ها و سبک های سفارشی پشتیبانی می کند.

نصب و راه اندازی

برای نصب Better Comments، “Better Comments” را در نمای Extensions جستجو کنید و روی “Install” کلیک کنید.

19. ورود به سیستم کنسول توربو

بررسی اجمالی

Turbo Console Log تجربه کنسول شما را با قابلیت های ثبت و اشکال زدایی پیشرفته ارتقا می دهد.

امکانات

• سیاهههای مربوط به کنسول با کد رنگی برای وضوح.
• به طور موثر سیاهههای مربوط را بر اساس نوع فیلتر کنید: اطلاعات، هشدار، خطا.
• سطوح و قالب‌های ورود به سیستم را با توجه به ترجیحات خود سفارشی کنید.

نصب و راه اندازی

برای نصب Turbo Console Log، “Turbo Console Log” را در نمای Extensions جستجو کنید و روی “Install” کلیک کنید.

نتیجه

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