۱۲ اکستنشن Visual Studio Code برای برنامه نویسان وب

Visual Studio Code یکی از محبوب‌ترین ویرایشگرهای کد منبع برای برنامه نویسی وب است که در سال ۲۰۱۵ توسط مایکروسافت به بازار عرضه شد و قابلیت‌های فوق‌العاده‌ای دارد. با لیداوب همراه باشید تا با مهم‌ترین اکستنشن‌های Visual Studio Code آشنا شوید.

Visual Studio Code دارای پشتیبانی پیش‌فرض از GitHub است و شامل یک ابزار هوشمند auto-completion به نام IntelliSense، ابزار رفع باگ پیشرفته و یک ابزار قدرتمند جستجو است. همچنین، می‌توانید Visual Studio Code را به طور کامل کاستومایز کرده و قابلیت‌های آن را براساس نیازهای خود توسعه دهید.

معرفی ۱۲ اکستنشن Visual Studio Code برای برنامه نویسان وب

شما می‌توانید هزاران اکستنشن Visual Studio Code را در Visual Studio Marketplace بیابید که با آن‌ها می‌توانید قابلیت‌های مختلف به این ویرایشگر اضافه کنید. می‌توانید به راحتی آن‌ها را با کلیک کردن بر روی View > Extensions در نوار بالایی نصب کنید.

۱. Front Awesome Codes for HTML

اگر اغلب از آیکون‌های Font Awesome در طراحی‌های خود استفاده می‌کنید، این اکستنشن برای شما عالی خواهد بود. Font Awesome واقعا عالی است چون شما فقط باید از یک کلاس از پیش ساخته CSS برای افزودن آیکون فونت به هر المان HTML استفاده کنید. در حال حاضر، Font Awesome دارای بیش از ۱۰۰۰ آیکون است که حجم زیادی از نیازهای شما را پوشش می‌دهد. البته به دلیل بالا بودن تعداد آیکون‌ها، به خاطر سپردن نام کلاسی که می‌خواهید استفاده کنید کار ساده‌ای نیست. قطعا می‌توانید در مستندات به دنبال آن بگردید اما وقتی این اکستنشن را دارید چرا باید این کار را بکنید؟

این اکستنشن روشی نوآورانه دارد. پس از نصب، تنها باید شروع به تایپ کردن نام کلاس کنید (کلاس‌های Font Awesome با پیشوند fa- شروع می‌شوند). سپس، یک لیست کشویی باز می‌شود و می‌‌توانید کلاس مورد نظر را از میان آن‌ها انتخاب کنید.

۲. CSS Peek

با اکستنش CSS Peek می‌توانید یک ویرایشگر inline CSS برای Visual Studio Code نصب کنید. این قابلیت از ویژگی مشابه در ویراشگر کد Brackets از کمپانی Adobe الهام گرفته شده است. CSS Peek به شما این امکان را می‌دهد تا در حین ویرایش فایل HTML، یک فایل CSS inline بارگذاری کنید.

وقتی شما به یک کلاس، ID یا تگ HTML اشاره می‌کنید CSS Peek تمام قوانین CSS مربوط در داخل ویرایشگر inline را نمایش می‌دهد. به این طریق می‌توانید stylesheet خود را از داخل فایل HTML ویرایش کرده و مجبور نیستید کل CSS را برای قوانین مربوطه بگردید.

۳. VS Color Picker

اگر زیاد با رنگ‌ها سر و کار دارید عاشق اکستنشن VS Color Picker خواهید شد که یک picker رنگ با کاربری آسان به ویرایشگر Visual Studio Code شما اضافه خواهد کرد. وقتی شما با فشردن کلید # شروع به نوشتن یک مقدار هگزا در فایل CSS خود می‌کنید، این اکستنشن به صفحه کوچک انتخاب رنگ روی صفحه نمایش خواهد داد. می‌توانید رنگ دلخواه خود را به راحتی از چرخه رنگ انتخاب کنید. علاوه بر این، می‌توانید با جا به جایی یک ابزار روی رنگی که می‌خواهید در CSS خود استفاده کنید، یک رنگ از صفحه (مثلا از یک عکس) انتخاب کنید.

۴. VS Code Can I Use

Visual Code Studio یک اکستنشن فوق‌العاده دارد که وب اپلیکیشن محبوب Can I Use را با ویرایشگر کد ادغام می‌کند. Can I Use یک checker سازگاری مرورگر برای بسیاری از برنامه نویسان وب است که امکان بررسی پشتیبانی مرورگر از المان‌ها، خصوصیات، توابع و دیگر سنتکس‌های HTML ،CSS ،SVG و جاوا اسکریپت را می‌دهد.

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

۵. CSSTree Validator

اکستنشن CSSTree Validator به شما کمک می‌کند تا کدهای معتبر CSS در VS Code بنویسید. این اکستنشن کدهای شما را با توجه به مشخصات W3C و پیاده سازی مرورگر اعتبارسنجی می‌کند. این اکستنشن نام‌های اشتباه خصوصیات، مقادیر اشتباه، سمیکالن (;) اشتباه و دیگر خطاها را هایلایت می‌کند.

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

۶. Live Sass Compiler

می‌توانید فایل‌های Sass و SCSS خود را به صورت آنی با کمک اکستنشن Live Sass Compiler در CSS کامپایل کنید. این اکستنشن نه تنها عمل کامپایل کردن را انجام می‌دهد بلکه هر زمان فایل را ذخیره کنید، CSS را در مرورگر بارگذاری می‌کند. علاوه بر این، به شما امکان کامپایل کردن Sass یا SCSS را برای کوچک کردن CSS می‌دهد.

Live Sass Compiler دارای نوار وضعیت کاربردی هم می‌باشد. برای مثال، می‌توانید قابلیت Watch Sass را فعال یا غیر فعال کنید تا بتوانید فایل‌های Sass را بدون استفاده از حالت Watch کامپایل کنید. همچنین، می‌توانید برای خصوصیات پشتیبانی نشده CSS از پیشوند استفاده کنید.

۷. ES5/ ES6 و CSS Minifier

کوچک کردن فایل‌های CSS و جاوا اسکریپت با استفاده از این اکستنشن در عرض یک چشم به هم زدن انجام می‌شود. پس از آنکه این اکستنشن را به VS Code خود اضافه کردید، یک دکمه Minify در نوار وضعیت، در قسمت پایین ویرایشگر نمایان می‌شود. وقتی روی این دکمه کلیک کنید، اکستنشن یک نسخه کوچک شده از فایل را در دایرکتوری فعال، ایجاد می‌کند. دکمه Minify تنها زمانی پدیدار می‌شود که شما یک فایل فعال css یا js در ویرایشگر داشته باشید. این اکستنشن می‌تواند سینتکس جدید ES6 را هم کوچک کند.

علاوه بر این، می‌توانید این اکستنشن را با بهینه ساز Clean CSS و کمپرسور جاوا اسکریپت Uglify-ES ترکیب کنید. این اکستنشن به صورت خودکار به دنبال فایل‌های کانفیگ cleancssrc و uglifyrc می‌گردد. اگر هر یک از آن‌ها را بیابد در حین کوچک کردن فایل‌های CSS و جاوا اسکریپت، از فایل‌های کانفیگ استفاده خواهد کرد.

۸. Atom JavaScript Snippet

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

این اکستنشن دارای پیشوندهای به یاد ماندنی برای منطق و سینتکس جاوا اسکرپیت است. مثلا برای نمونه می‌توانید میانبرهایی برای جفت مقدار و کلید عبارت if- else ،for ،for of، و for in، توابع بی نام، توابع فلش و غیره بیابید.

۹. ESLint

با استفاده از این اکستنشن می‌توانید ESLint JavaScript محبوب و JSX linter را با VS Code ادغام کنید. ESLint به شما امکان یافتن خطاها و ناسازگاری‌های جاوا اسکریپت را قبل از اجرای کد می‌دهد. بنابراین، زمان زیادی از رفع باگ‌ها برای شما ذخیره خواهد شد. این اکستنشن به صورت پیش‌فرض خطاهای موجود در فایل‌های جاوا اسکریپت را در حالی که شما مشغول تایپ کردن هستید پیدا می‌کند. می‌توانید با افزودن یک فایل کانفیگ eslintrc، قوانین مختلف lint برای هر پوشه ایجاد کنید

۱۰. JavaScript Booster

اگر می‌خواهید کیفیت کدهای جاوا اسکریپت خود را بهبود ببخشید، اکستنشن JavaScript Booster برای شما بسیار مفید خواهد بود. این اکستنشن نکات و پیشنهاداتی به فایل‌های جاوا اسکریپت شما در مورد نحوه پالایش کدها اضافه می‌کند. شما می‌توانید با کلیک کردن بر روی آیکون لامپ روشن که در ابتدای هر خط اضافه می‌شود، به نکات دسترسی پیدا کنید.

اکستنشن JavaScript Booster پیشنهادات هوشمندانه‌ای دارد که نیازی به فکر کردن در مورد آن‌ها در حین کد نویسی ندارید. این اکستنشن نه تنها با جاوا اسکریپت ساده بلکه با JSX هم کار می‌کند بنابراین برنامه نویسان React بسیار از این اکستنشن بهره خواهند برد.

۱۱. WordPress Snippet

Visual Studio Marketplace اکستنشن‌های جالبی هم برای برنامه نویسان وردپرس دارد که می‌توانند تا حدود زیادی کار آن‌ها را تسهیل کنند. برای مثال، اکستنشن WordPress Snippet هزاران تکه کد وردپرس به ادیتور VS Code شما اضافه می‌کند. این اکستنشن منطبق بر مستندات رسمی وردپرس است و نه تنها تکه کدهایی برای نام توابع دارد بلکه برای ثابت‌ها، کلاس‌ها، hook‌ها و دیگر ساختارهای وردپرس هم تکه کدهایی ارائه می‌دهد. در اصل، این اکستنشن API کامل وردپرس را با VS Code ادغام می‌کند. همچنین، دارای ویژگی autocomplete است بنابراین وقتی در حال تایپ در ویرایشگر خود هستید، تکه کدها به صورت آنی نمایش داده می‌شوند. این اکستنشن برای افرادی که دائما در حال نوشتن کدهای وردپرس هستند بسیار مفید بوده و در وقت آن‌ها صرفه جویی می‌کند.

۱۲. WooCommerce Snippets & Autocomplete

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

با استفاده از این اکستنشن‌هایی که امکان اضافه کردن آن‌ها به Visual Studio Code را دارید، می‌توانید قابلیت‌ها و امکانات پیشرفته را به این ویرایشگر محبوب اضافه کنید و برنامه‌های کاربردی زیبا با آن‌ طراحی نمایید. با سایر مقالات برنامه نویسی و طراحی سایت ما در لیداوب همراه باشید.