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

یکی از بهترین ویژگی‌های این محیط کد نویسی، بخش Market آن است که افزونه‌های متنوعی را برای سفارشی‌سازی آن بر اساس نیازها و با هدف بهبود کیفیت کدنویسی ارائه می‌دهد. از همین رو، در این مطلب، ۱۰ افزونه Visual Studio Code را برای برنامه نویسانی که با HTML، CSS، JavaScript، VueJS و ReactJS سروکار دارند، معرفی می‌کنیم. تا انتهای این مطلب همراه ما باشید.

۱. JavaScript Code Snippets

افزونه JavaScript Code Snippets، توسط Charalampos Karypidis ساخته شده و تاکنون بیش از ۲ میلیون بار دانلود شده است. این افزونه، قطعه کدها را جهت نوشتن Javascript، TypeScript، HTML، React، Vue و غیره فراهم و از ES6 پشتیبانی می‌کند.

۲. NPM

 توسعه‌دهندگان جاوااسکریپت با NPM که مخفف Node Package Manager است، آشنایی دارند. افزونه NPM، امکان مدیریت پکیج‌های نرم افزاری را فراهم می‌کند. در صورت عدم نصب پکیج‌ها، هشدارهایی را ارائه می‌دهد و همچنین به کنترل نسخه کمک می‌کند.

[button class=”github-btn” href=”http://frontcast.ir/become-a-javascript-developer”]پادکست شماره ۵: تبدیل شدن به توسعه دهنده جاوااسکریپت[/button]

۳. Prettier

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

۴. CSS Peek

CSS Peek با شناسایی و شمارش استایل‌های مختلفی که پیش از این مورد استفاده قرار گرفته‌اند، هنگام کار با رشته‌ها و idها به شما کمک بسزایی می‌کند. این ویژگی بسیار مفید است، چرا که با وجود این افزونه، دیگر لازم نیست میان فایل‌های HTML و CSS دائماً در حال رفت و آمد باشید.

۵. Vetur

Vetur افزونه‌ای است که مرتبط با VueJS است و پیش از این، بیش از ۳ میلیون بار دانلود شده است. این افزونه، قابلیت‌های بررسی خطا، تکمیل خودکار ویژگی‌ها و قطعه کدهای Vue را برای شما به ارمغان می‌آورد. این موضوع برای کسانی که به عنوان توسعه‌دهنده Vue فعالیت می‌کند، قطعاً جذاب و جالب است.

۶. ESLint

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

۷. Live Sass Compiler

افزونه Live Sass Compiler ابزار کوچک اما قدرتمندی است که می‌تواند فایل‌های SASS/SCSS را کامپایل کند و یک پیش‌نمایش به صورت  Live از استایل‌های کامپایل‌شده در مرورگر فراهم کند.

[button class=”github-btn” href=”http://frontcast.ir/learning-sass”]ویدیوی آموزشی: یادگیری Sass[/button]

۸. Debugger for Chrome

مرورگر Chrome، برای بسیاری از توسعه‌دهندگان، یک مرورگر درجه یک برای تهیه کد، تست و اشکال‌زدایی آن است. اما در این بین ممکن است افرادی تمایل داشته باشند که این کار را به طور مستقیم از Visual Studio Code انجام دهند. در این صورت، افزونه Debugger for Chrome برای آنان بسیار مفید و کاربردی خواهد بود.

۹. Live Server

Live Server توسط Ritwick Dey ایجاد شده است که این شخص در عین حال سازنده Live Sass Compiler نیز است. این افزونه، یک سرور توسعه Local در Visual Studio Code ایجاد می‌کند تا وب‌سایت‌های استاتیک و داینامیک را اجرا کند. 

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

۱۰. Beautify

آخرین افزونه این لیست، افزونه Beautify است که از ابزارهای جالب برای قالب‌بندی کدهای HTML، CSS، JSON و JavaScript می‌باشد. به این ترتیب به طور تقریبی، تا به حال ۴ میلیون بار دانلود شده است.

نتیجه‌گیری

مسلم است که این لیست را نمی‌توان کامل‌ترین مجموعه افزونه‌ها معرفی کرد. اما امیدواریم که همین ابزارهای کاربردی و منحصر به فرد بتوانند در نوشتن کد با کیفیت‌تر و تبدیل کردن شما به یک توسعه‌دهنده بهتر موثر باشند.

دیدگاه‌ها:

پویا خارزی

خرداد 28, 1401  در  11:26 ق.ظ

سلام وقتتون بخیر باشه
برای من یک مشکل عجیب پیش امده ، من همیشه وقتی توی vscode کد میزنم همیشه save میکنم من دیشب وقتی vscode رو باز کردم ، دیدم تمام کد هام پاک شده
وقتی از قسمت saveها میزدم برمیگشت ولی حالت them و رنگ کد ها تغییر میکرد بازمsave کردم ولی برنامه رو که میبندم دوباره اجرا میکنم ، هیچ کدی نیست .
میخواستم دلیلشو بپرسم و آیا راهکاری وجود داره؟

برای پاسخ دادن وارد شوید

مسعود صدری

خرداد 28, 1401  در  11:52 ب.ظ

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

مسعود طالبیان نیک صفت

خرداد 25, 1401  در  1:14 ب.ظ

سلام
آموزش نوشتن افزونه برای vscode هم بذارید. یه سری snippet دارم میخوام بصورت افزونه منتشر کنم. ممنون

برای پاسخ دادن وارد شوید

aminda

اسفند 14, 1398  در  11:46 ق.ظ

استاد سلام
آموزش نصب و استفاده درست در کد افزونه های بسیار کاربردی pretier و eslint رو قرار نمیدین؟

برای پاسخ دادن وارد شوید

a_bahoush

دی 21, 1398  در  4:27 ب.ظ

سلام بعضی از این افزونه ها نیاز به نوشتن کد داخل vsc یا انجام تغییراتی در آن دارد مثل eslint البته آموزش اون به زبان انگلیسی هست که با دستور npm هم نصب میکنه و …. که در نهایت به گیج شدن منجر میشه اگه ممکنه آموزش کاملی برای کار کردن با اونها مخصوصا eslint – Debugger for Chrome- Prettier بزارید
ممنون

برای پاسخ دادن وارد شوید

مسعود صدری

دی 25, 1398  در  8:33 ب.ظ

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

امید

دی 21, 1398  در  11:43 ق.ظ

سلام مقاله ی خیلی خوبی بود و منم خیلی از این ها رو دارم استفاده میکنم
یه افزونه دیگه هم بهتون پیشنهاد میدم که نصب کنید و Auto Close Tag هست که خیلی خیلی کاربردیه و بیشتر از ۲ میلیون بار نصب داره و یکی که خیلی بهم کمک میکنه مخصوصا زمان هایی که نمیدونم چرا vc code قاطی میکنه و css های بوت استرپ رو نمیشناسه IntelliSense for CSS class names in HTML افزونه هستش و عالیه واقعا و بیشتر از یک میلیون و هشت صد هزار دانلود داشته
لینک ها رو میزارم امیدوارم مورد استفاده دوستان قرار بگیره
https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion
https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag

برای پاسخ دادن وارد شوید

مسعود صدری

دی 21, 1398  در  11:59 ق.ظ

سلام
خیلی ممنونم از پیشنهاد خوبتون.

افزودن دیدگاه جدید لغو پاسخ

برای نوشتن دیدگاه باید وارد بشوید.