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

مشاهده اطلاعات بیشتر...
ثانیه
دقیقه
ساعت
روز
تنظیمات vs code
ﺯﻣﺎﻥ ﻣﻄﺎﻟﻌﻪ: 4 دقیقه

تنظیمات vs code

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

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

Theme : 

ظاهری که اکثر اوقات از آن استفاده می‌کنم Sanzzy Operator است که در حال حاضر هم از آن استفاده می‌کنم.

تنظیمات vs code

این ظاهر بر اساس  hyper-sanzzy‌ ساخته شده است که بر اساس فونت Operator Mono بهینه‌سازی شده است. من عاشق این ظاهر هستم.

بعضی از ظاهر‌هایی که قبلا از آن‌ها استفاده می‌کردم : 

Font :

مورد مهم دیگری است که به ظاهر برنامه من ارتباط دارد. من از فونت JetBrains Mono استفاده می‌کنم.این فونت رایگان می‌باشد.

تنظیمات vs code

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

تنظیمات vs code

قبل از این فونت من از Operator mono استفاده می‌کردم که فونت خوبی هم بود.

دیگر فونت‌هایی که من از آن‌ها استفاده می‌کردم:

آیا می‌خواهید از  تنظیمات من برا ویرایش‌گر کد خود استفاده کنید؟ کافی است در vs code دکمه‌های ctrl + p را فشار دهید و settings.json را بنویسید وتمام کدها و تنظیمات زیر را جایگزین کدهای خود کنید.

تنظیمات vs code

Icons :

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

تنظیمات vs code

افزونه‌هایی که من استفاده می‌کنم:

Auto Rename Tag

به صورت هم‌زمان نام تگ‌های باز بسته را در html/xml تغییر می‌دهد. این کار را برای زبان‌های دیگر هم می‌توانیم انجام دهیم فقط کافی است که کد زیر را در setting.json وارد کنیم.

  "auto-rename-tag.activationOnLanguage": ["html", "xml", "php", "javascript"]

تنظیمات vs code

 Bracket Pair Colorizer 2

این افزونه به ما کمک می‌کند که محدوده‌ها را به وسیله براکت‌هایی با رنگ‌های مختلف مشخص کنیم وکاربر قابلیت شخصی‌سازی این رنگ‌ها را دارد.

تنظیمات vs code

Color Highlight

این افزونه رنگ‌ها را در سند CSS شما مشخص می‌کند.

تنظیمات vs code

 CSS Peek

کدهای استایل شما را داخل همان صفحه که هستید بار‌گذاری می‌کند و ویرایش آن را آسان می‌کند وبا hover کردن و کلیک کردن می‌توانید وارد سند css خود شوید.

تنظیمات vs code

 DotENV

کلید‌ها و مقدار آن‌ها را داخل سندهای با پسوند .env برجسته‌تر می‌کند.

تنظیمات vs code

ES7 React/Redux/GraphQL/React-Native snippets

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

ESLint

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

Highlight Matching Tag

این افزونه تگ‌های باز و بسته هم نام را برجسته و متمایز می‌کند.

تنظیمات vs code

تنظیماتی که من برای این افرونه استفاده می‌کنم.

تنظیمات vs code

 Image preview

این افزونه به شما کمک می‌کند که با قرار گرفتن روی تگ img پیش‌نمایشی از عکس را ببینید.

تنظیمات vs code

 Indent Rainbow

این افزونه فرورفتگی‌ها یا همان indent‌های موجود در کد شما را با رنگ‌ها مختف نشان می‌دهد.

تنظیمات vs code

Live Server

این افزونه یک سرور محلی با قابلیت بارگذاری زنده به شما می‌دهد و برای سایت‌های ثابت و پویا استفاده می‌شود.

Prettier

این افزونه قالب‌بندی کدهای شما را آسان می‌کند و دیگر نیازی نیست شما نگران قالب‌بندی کدهای خود باشید مثلا هر زمان که نیاز هست که کدهای شما بشکند و به خط بعدی برود این افزونه بعد ذخیره کردن کدها شما این کار را انجام می‌دهد.اگر می‌خواهید این افزونه کدهای شما را بعد ذخیره‌سازی مرتب کند کد زیر را در setting.json وارد کنید.

"editor.formatOnSave": true

Pug beautify

 این افزونه هم برای زیبا‌سازی کد‌های شما به کار می‌رود. شما می‌توانید دکمه f1 را فشار دهید از منو باز شده این افزونه را انتخاب کنید.

REST Client

اگر شما بخواهید درخواست‌های http بفرستید می‌توانید از این افزونه استفاده کنید و جواب برگشتی خود را درون همین نرم‌افزار دریافت کنید.

تنظیمات vs code

TODO Highlight

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

 Version Lens

این افزونه اخرین نسخه از پکیج‌هایی را که از آن‌ها استفاده می‌کنید را به شما نشان می‌دهد.

میانبرهای کاربردی در vs code :

در زیر میانبرهایی را مشاهده می‌کنید که من در هر روز که برنامه‌نویسی می‌کنم از آن‌ها استفاده می‌کنم.

تنظیمات vs code

همچنین می‌توانید از دوره‌ی آموزش کار با Visual Studio Code وبسایت راکت استفاده کنید.

منبع

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

خیلی بد
بد
متوسط
خوب
عالی
4.88 از 8 رای

/@ali6316k
علی کاظمی
مترجم؛ طراحی قالب

دیدگاه و پرسش

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

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

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

علی کاظمی

مترجم؛ طراحی قالب

۵ مقاله اخیر

۵ مقاله اخیر از این قسمت برای شما در دسترس است