۶ افزونه CSS عالی برای VS Code

ترجمه و تالیف : عرفان کاکایی
تاریخ انتشار : 13 خرداد 98
خواندن در 2 دقیقه
دسته بندی ها : آموزشی

یکی از تاثیرگذارترین بخش‌های Visual Studio Code، قابلیت سفارشی‌سازی از طریق افزونه‌ها است. این عملکرد با حضور هزاران توسعه دهنده که در حال ساخت افزونه‌ها هستن، به معنای واقعی بی نهایت است. در اینجا برخی از بهترین افزونه‌ها در VS Code برای نوشتن CSS را مشاهده می‌نمایید.

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

جدول محتوا:

  • پشتیبانی HTML CSS
  • Intellisense for CSS Class Names
  • Autoprefixer
  • CSS Peek
  • Prettier - قالب‌بند کد
  • Bootstrap 4، Font awesome 4، Font awesome 5 Free و قطعه کدهای حرفه‌ای
  • خلاصه

HTML CSS Support

۶ افزونه CSS عالی برای VS Code

HTML CSS Support (و افزونه بعدی در لیست) قابلیت intellisense را در فایل‌های HTML شما، بر پایه CSSای که در پروژه شما شامل شده یا به آن ارجاع شده است، فراهم می‌کند. در اینجا یک لیست کامل از امکانات آن را مشاهده می‌نمایید.

  • تکمیل صفت Class
  • تکمیل صفت Id
  • از تکمیل Zen Coding برای صفات Class و Id پشتیبانی می‌کند
  • پوشه فضای کار را برای فایل‌های CSS و SCSS جستجو می‌کند
  • فایل‌های CSS از راه دور را پشتیبانی می‌کند

یک نکته که در این افزونه خیلی برجسته است، این است که شما می‌توانید فایل‌های CSS از راه دور را به عنوان cache هم مشخص کنید. شما می‌توانید این کار را با اضافه کردن کد زیر به تنظیمات انجام دید. این مثال به فایل Bootstrap 4 CSS ارجاع می‌کند.

"css.remoteStyleSheets": [
  "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"
]

Intellisense for CSS Class Names

۶ افزونه CSS عالی برای VS Code

Intellisense for CSS Class Names عملکرد مشابهی به مانند افزونه بالا فراهم می‌کند. این مورد همچنین به طور خودکار کلاس‌ها را از CSS مرجوع در فایل HTML شما وارد می‌کند. تعریفات کلاس هم در هنگام استفاده از Emmet از طریق intellisense در دسترس خواهند بود.

شما در هر زمان که بخواهید، می‌توانید با باز کردن Command Palette کلاس‌ها را از فایل CSS خود re-cache کنید.

۶ افزونه CSS عالی برای VS Code

Autoprefixer

۶ افزونه CSS عالی برای VS Code

این که مجبور باشیم برخی ویژگی‌های خاص CSS را پیشوند کرده، تا پشتیبانی مرورگر را تضمین کنیم، می‌تواند یک عذاب بزرگ باشد. اگر به خاطر جریانات کاری‌ای که از پیش با Create React App، Angular CLI و... پیکربندی شده‌اند نبود، من اضافه کردن پیشوندها را به کلی فراموش می‌کردم.

Autoprefixer به طور خودکار پیشوندها را اضافه می‌کند، تا تضمین کند که برنامه شما در مرورگرهای مختلف ظاهر خوبی دارد. این کار به شدت ساده است. Command Palette را باز کرده، و دستور Autoprefixer CSS را وارد کنید.

۶ افزونه CSS عالی برای VS Code

CSS Peek

۶ افزونه CSS عالی برای VS Code

اگر شما به هر نحوی شبیه من باشید، متنفرید از این که فایل .css خود را بررسی کنید و ببینید که ویژگی‌ها به یک کلاس یا id متصل شده‌اند یا نه. با CSS Peek، شما می‌توانید یک تصویر شناور از CSS خود را از درون فایل HTML خود ببینید.

۶ افزونه CSS عالی برای VS Code

این افزونه همچنین نام‌های کلاس و idها را تبدیل به یک هایپرلینک می‌کند که شما را مستقیما به تعریف آن کلاس یا id در CSS شما می‌برد.

Prettier - Code Formatter

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

Prettier - Code Formatter برای قالب‌بندی خودکار JavaScript شما به شدت معروف است، اما آیا می‌دانستید که CSS را نیز به طور خودکار قالب‌بندی می‌کند؟

در اینجا یک نمونه کد قبل از قالب‌بندی (با یک قالب بد) را مشاهده می‌نمایید:

۶ افزونه CSS عالی برای VS Code

و پس از همان کد (با قالب‌بندی زیبا):

۶ افزونه CSS عالی برای VS Code

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

Bootstrap 4، Font awesome 4، Font awesome 5 Free و Pro Snippets

۶ افزونه CSS عالی برای VS Code

هر پروژه‌ای از Bootstrap‌ یا Font Awesome‌ استفاده نمی‌کند، اما بسیاری از آن‌ها اینگونه هستند. به همین علت پی بردم که به اشتراک گذاری این افزونه ارزشش را دارد. این افزونه intellisense را برای Bootstrap 4، Font Awesome 4 و Font Awesome 5 فراهم می‌کند.

تعداد زیادی کلاس در Bootstrap وجود دارند که حفظ کردن همه آن‌ها غیر ممکن است. همین مسئله در هنگام کار با Font Awesome هم صدق می‌کند. من هر زمان که می‌خواهم یک آیکون اضافه کنم، باید به دنبال سینتکس مربوطه بگردم؛ اما دیگر اینگونه نیست!

برای فعال کردن قطعه کدها برای Bootstrap، از B4 استفاده کنید:

۶ افزونه CSS عالی برای VS Code

و FA5 برای Font Awesome 5:

۶ افزونه CSS عالی برای VS Code

خلاصه

این شما و این هم برخی از بهترین افزونه‌های CSS برای Visual Studio Code. اگر فکر می‌کنید که ما افزونه‌ای را جا انداخته‌ایم، در بخش نظرات آن را با ما به اشتراک بگذارید.

منبع

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

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