راهنمای Visual Studio Code

Visual Studio Code
من همیشه گفتم و باز هم اینجا بیان می‌کنم که بنظر من، ما نیازی به استفاده از IDE نداریم و تقریبا همه کارهای خودمان را میتوانیم براحتی با ویرایشگرهای متن انجام بدهیم. قبلا هم درمورد ویرایش‌گرهای متن نوشته بودم (درمورد Atom و Sublime Text) و اینجا قرار است ویرایشگر متن مایکروسافت را معرفی کنم. Visual Studio Code هم مثل Atom برپایه NodeJS بنا شده و برای ایجاد برنامه تحت سیستم‌عامل دست به دامن electron شده است. این خود یکی از دلایل جذابیت این ویرایشگر برای من است.

پیش از هرچیزی اجازه دهید چند خطی درمورد ویژگی‌های ویژوال‌استدیو‌کد بنویسم

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

فهرست

پالت فرامین (Command Palette)

کلید میانبر: ctrl + shift + p
بزرگترین تفاوت ویژوال‌استدیو‌کد با دیگر ویرایش‌گرها پالت فرامین یک پارچه آن است، به این معنی که چه دنبال فراخوانی فرمانی در ویرایشگر باشید، چه دنبال پیدا کردن یک فایل یا دنبال یک تابع خاص درون کد خود باشید، درهمه این حالات شما با یک پالت سروکار دارید.
اگر به دنبال اجرای یک فرمان هستید، براحتی کلید میانبر ctrl + shift + p را فشار دهید و دنبال فرمان مورد نظر خودتان بگردید و اجرایش کنید. همانند تصویر زیر.
تنها به کاراکتر > در ابتدای باکس متنی توجه کنید، وقتی شما میانبر ctrl + shift + p رو فشار می‌دهید خود ویرایشگر این کاراکتر را در ابتدای باکس متنی اضافه می‌کند.

VSCode Command Palette

تغییر فایل(File Switching)

کلید میانبر: ctrl + p
اگر دنبال فایلی درون دایرکتوری پروژه خود میگردید تنها میانبر ctrl + p را فشار دهید و بخشی از نام فایل را تایپ کنید، همانند بقیه ویرایشگرها ویژوال‌استدیو‌کد به شما امکان جستجوی فایل‌ها براساس نامشان را می‌دهد.

VSCode File Switching

پرش یه نماد(Goto Symbols)

کلید میانبر: ctrl + shift + o
درصورتی که دنبال یک نماد (یک تابع، یک کلاس، یک متغییر یا ..) میگردید راحترین راه فشردن کلید میانبر ctrl + shift + o است، ویژوال‌استدیو‌کد به شما این امکان را می‌دهد که بتوانید با وارد کردن بخشی از نام نماد مکان آن را درون فایل بیابید، همانند تصویر زیر.
! به کاراکتر اول درون باکس متنی در پالت دقت کنید، کاراکتر @ به معنی جستجو به دنبال نماد است.

VSCode Goto Symbols

پالت‌های یکپارچه در ویژوال‌استدیو‌کد

در ویژوال‌استدیو‌کد تمامی پالت‌ها تحت یک محوریت خاص رفتار می‌کنند در حقیقت همگی آنها یکی هستند، همانطور که در بالا نیز گفته شد کاراکتر > در ابتدای باکس متنی پالت بیانگر این است که شما قصد فراخوانی فرمانی در ویرایشگر را دارید، اگر کاراکتر نخست @ باشد، به این معنی است که شما دنبال نمادی درون فایل خود هستید، اگر کاراکتر نخست : باشد، به این معنی است که شما قصد پرس به سطر خاصی دارید.
همانطور که می‌بینید پالت‌ها در ویژوال‌استدیو‌کد دیگر یک محوریت خاص نداشته و کاربردی همه جانبه دارند، برای مشاهده تمامی توانایی‌های پالت در ویژوال‌استدیو‌کد کلید ctrl + p را فشرده (تا پالت باز شود) و کاراکتر ? را درون آن تایپ کنید.

VSCode Palettes

تغییر دسته جمعی(Multi-Edit)

کلید میانبر: alt + click
ویژگی تغییر دسته‌جمعی که با ظهور سابلایم بسیار مورد توجه قرار گرفت بهترین ویژگی‌ای است که حتی برخی از IDEها بزرگ بصورت پیش‌فرض ندارند
اگر معتاد استفاده از این ویژگی شوید دیگر نقل مکان به ویرایشگری که این امکان را ندارد برای شما دشوار خواهد بود. این ویژگی به شما این امکان را می‌دهد تا بخش‌های مختلف کد را یک جا تغییر دهید، آنها را کپی کنید در جاهای دیگر پیست کنید. کلید آلت را نگه دارید و مکان های مورد نظر کلیک کرده و شروع به نوشتن کنید. برای استفاده از این ویژگی چند راه دیگر نیز وجود دارد:

  • command + F2: انتخاب تمام تکرار های کمله حاضر (در مکینتاش)
  • ctrl + d: انتخاب کلمه فعلی و کلمات مشابه بعدی در دفعات بعد
  • alt + click: هر مکانی که کلیک کنید اشاره گری برای تغییر دسته جمعی ایجاد می شود

اسنیپت ها(Snippets)

اسنیپت‌ها یکی از کاربردی ترین ویژگی‌های تمامی ویرایشگرها هستند، با ایجاد استنیپت‌ها میتوانید با واردکردن کلیدواژه‌های خاص عبارات مورد نظر خود را تایپ کنید. در واقع می‌توان گفت اسنیپت‌ها همان مفهوم auto-complete هایی را دارند که خود شما میتوانید آنها را ایجاد کنید.
شیوه کار اسنیپت‌ها در ویژوال‌استدیو‌کد بسیار شبیه یک IDE است. مثل اکثر IDEها کافی است میانبر ctrl + space را فشار دهید تا تمامی اسنیپت‌های مرتبط را مشاهده کنید.

VSCode Snippets

ساخت اسنیپت جدید

برای ایجاد اسنیپت جدید در ویژوال‌استدیو‌کد منوی Snippets را از مسیر File > Preferences یا Code Preferences در مک انتخاب کنید و در کادر ظاهر شده زبان مورد نظر خود برای ایجاد اسنیپت را انتخاب کنید. پس از انتخاب زبان در تب باز شده میتوانید اسنیپت خود را ایجاد کنید.

1
2
3
4
5
6
7
8
9
10
"For Loop": {
"prefix": "for",
"body": [
"for (var ${index} = 0; ${index} < ${array}.length; ${index}++) {",
"\tvar ${element} = ${array}[${index}];",
"\t$0",
"}"
],
"description": "For Loop"
},

در کد فوق :

  • Foor Loop: نام اسنیپت جدید شماست
  • prefix: مشخص کننده عبارت معرف اسنیپت است، عبارتی که شما با تایپ آن میتوانید اسنیپت را فراخوانی کنید.
  • body: بدنه اصلی اسنیپت شماست که جایگزین prefix می‌شود. درون این بدنه میتوانید متغییر نیز تعریف کنید، برای مثال در مثال فوق نام متغیر حلقه خود ی متغییر درون بدنه است.
  • description: توضیح کوتاهی درمورد اسنیپت است که در لیست اسنیپت‌ها نمایش داده می‌شود.

کلید های میانبر(Keyboard Shortcuts)

لیست کاملی از میانبر‌های ویژوال‌استدیو‌کد را می‌توانید در این آدرس پیدا کنید. همچنین از منوی Keyboard Shortcuts در مسیر File > Preferences یا Code > Preferences در مک میتوانید لیست کامل میانبر‌ها را مشاهده کنید.

پکیج ها/ پلاگین ها

ویژوال‌استدیو‌کد راهی ساده برای نصب و مدیریت پلاگین‌ها (البته نام صحیح آنها در این ویرایشگر Extension است) برای استفاده کنندگان ایجاد کرده است، برای نصب و فعال سازی یک پلاگین تنها کافی است از نوار عمودی سمت چپ وارد بخش Extensions شوید (گزینه آخر) و نام مورد نظر را جست‌جو کرده و آن را نصب کنید.
برخلاف مطالب مربوط اتم و سابلایم که چند پلاگین کابردی در آنها را معرفی کردیم، در این مطلب تنها به همین توضیح فوق اکتفا می‌کنیم. شاید بعدا در پستی جدا چند پلاگین کاربردی که استفاده می‌کنم را معرفی کردم.

قالب ها/ تم ها

نصب قالب و تم در ویژوال‌استدیو‌کد درست مثل نصب اکستنشن‌ها است، نام تم خود را درون بخش Extensions جستجو کنید و آن را نصب کنید. پس از نصب منوی Color Theme را از مسیر File > Preferences یا Code > Preferences در مک، انتخاب کنید و تم جدید نصب شده خود را فعال کنید.

VSCode Color Themes

تنظیمات

بخش تنظیمات در ویژوال‌استدیو‌کد همانند سابلایم بصورت متنی قایل تغییر است، زمانی که شما منوی User Settings را فشار دهید، دو تب کنار هم برای شما باز می‌شوند که در تب سمت چپ تنظیمات پیش‌فرق برنامه نمایش داده‌می‌شود و در تب سمت راست شما میتوانید تنظیمات مورد نظر را بنویسید و مقدار پیش‌فرض آنهارا تغییر دهید. توجه داشته باشید که تب سمت چپ قابلیت ویرایش ندارد و تنها برای مشاهده تنظیمات پیش‌فرض نمایش داده می‌شود.
برای مثال با تغییر مقدار editor.renderWhitespace به all و ذخیره تب، ویرایشگر کاراکتر‌های اسپیت و تب را با کاراکتر‌های قابل رویت نمایش می‌دهد.

VSCode Settings