Visual Studio Code یک محیط ویرایشگر کد بوده که توسط مایکروسافت برای سیستم های عامل Windows، Linux و macOS ارائه شده است. ویژگی های این محیط عبارتند از پشتیبانی از استراتژی های اشکال زدایی، برجسته سازی دستورات نحوی، تکمیل کد هوشمند، تغییر شکل کد و Git تعبیه شده.

کاربران با استفاده از این محیط می‌توانند تم ها، کلیدهای میانبر صفحه‌کلید، تنظیمات و پیکربندی ها را تغییر داده و افزونه‌هایی را نصب کنند که قابلیت‌های بیشتری را به سیستم اضافه می‌کنند.

 

Visual Studio Code چیست؟

Visual Studio Code در واقع محیط مبتنی بر ویرایشگر کد منبع است که با انواع زبان های برنامه نویسی از جمله جاوا، جاوا اسکریپت، Go، Node.js، پایتون و C++ قابل استفاده است. این ویرایشگر بر اساس فریم‌ ورک Electron نوشته شده که برای توسعه برنامه های کاربردی وب Node.js که بر روی موتور طرح بندی Blink اجرا می شوند، به کار می رود.

Visual Studio Code از مؤلفه ویرایشگر موناکو استفاده می کند که در محیط ویرایشگر کد Azure DevOps نیز استفاده می گردد. در ادامه این مقاله، ویژگی های این محیط ویرایشگر را بیان خواهیم کرد.

 

ویژگی های  VS Code

 

محیط ادیتور کد Visual Studio Code که به صورت مخفف VS Code هم نامیده می شود، امکان استفاده و باز کردن همزمان یک یا چند دایرکتوری را به کاربر می دهد. همچنین از زبان های برنامه نویسی متعددی پشتیبانی می کند اما در عین حال، ویژگی های آن با هر زبان برنامه نویسی متفاوت است.

تنظیمات این ادیتور به گونه ای است که می توان فایل ها و یا فولدرهای غیرضروری را در پروژه حاصل، حذف نمود. افزونه های زیادی نیز برای Visual Studio Code در نظر گرفته شده است که قابلیت های زیادی را از نظر قابلیت ویرایش و یا زبان های تحت پشتیبانی به این محیط، اضافه می کند.

زبان های برنامه نویسی جدید، تم ها و قالب ها، ابزارهای اشکال زدایی، آنالیز کد استاتیک و غیره همگی به کمک افزونه ها، به این محیط ویرایشگر قابل افزودن هستند. برخی از مهم ترین ویژگی های VS Code را می توان به صورت زیر بیان کرد:

 

پشتیبانی از زبان های برنامه نویسی

VS Code به صورت پیش فرض از بیشتر زبان های برنامه نویسی پشتیبانی می کند؛ این پشتیبانی شامل برجسته سازی دستورات نحوی، ادغام کدها، و تجزیه آنها به بخش های قابل پیکربندی می باشد. 

 

جمع آوری داده

VS Code داده های قابل استفاده را جمع آوری کرده و برای مایکروسافت ارسال می کند، اگرچه این قابلیت را می توان غیرفعال نمود. علاوه بر این، به دلیل متن باز بودن برنامه در این ویرایشگر، کد telemetry برای عموم قابل دسترسی است که به کمک آن می توان کلیه داده های جمع آوری شده و آماده ارسال را مشاهده کرد.

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

 

خط دستور

VS Code دارای یک رابط خط دستور قدرتمند است که به کاربر امکان راه اندازی ویرایشگر را می دهد. همچنین کاربر می تواند فایل های مختلف، افزونه های قابل نصب و هر نوع تغییری در زبان نمایش را در زمان راه اندازی ویرایشگر اعمال کند.

 

پالت دستور (Command Palette)

VS Code از طریق کیبورد هم به راحتی قابل استفاده است. مهم ترین کلیدهای میانبری که برای استفاده از آن مورد نیاز هستند، Ctrl+Shift+P می باشند که پالت دستور را اجرا می کند. با استفاده از محیط پالت دستور، می توان به همه قابلیت های VS Code دسترسی پیدا کرد، از جمله کلیدهای میانبر دیگر برای اجرای دستورات مختلف.

 

یکپارچه سازی Git

یکی از ویژگی های جالب در VS Code، پشتیبانی از یکپارچه سازی Git است که به کاربر امکان اعمال تغییرات کد و ذخیره سازی تغییرات را در یک مخزن به نام Git می دهد. همه دستورات ذخیره شده در مخزن Git توسط کاربران VS Code قابل دسترسی هستند.

 

مود تغییر زبان

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

 

مود Zen

یکی از ویژگی های VS Code، مود Zen است که به کمک آن کاربر می تواند با مخفی سازی همه UI ها به غیر از ادیتور (یعنی همه نوارها مخفی می شوند از جمله نوار فعالیت، نوار وضعیت، نوار کناری و پنل) روی ویرایش کد مورد نظر تمرکز کند. با این کار محیط ویرایشگر به صورت فول اسکرین نمایش داده شده و تنها صفحه ویرایش مشاهده می گردد.

 

 قابلیت تقسیم صفحه

برای حالتی که کاربر روی چندین پروژه به صورت همزمان کار می کند یا دو فایل مختلف از یک پروژه را ویرایش می نماید،  همچنین حتی در حالتی که نیاز به بررسی و مقایسه دو کد برنامه مختلف است، می توان از قابلیت تقسیم صفحه در محیط VS Code استفاده کرد. برای این منظور از مسیر View > Editor Layout > Split Up اقدام کنید.

 

نوار وضعیت

نوار وضعیت یا Status Bar در محیط ادیتور VS Code برای نمایش خطاها و یا هشدارها استفاده می شود. همچنین می توان انواع مختلف خطا را در این نوار، بر اساس نوع خطا و یا مشابهت متن کدها، فیلتر کرد.

 

تفاوت ویژوال استودیو و ویژوال استودیو کد چیست؟

ویژوال استودیو یک IDE یا همان محیط ساخت یکپارچه است که توسط شرکت مایکروسافت برای نسخه های ویندوز و MacOS ارائه شده است. امکاناتی نظیر توسعه، آنالیز، اشکال زدایی، تست، هماهنگی و تعمیم نرم افزار در این محیط وجود دارد.

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

تفاوت های دیگر این دو محیط را می توان به صورت زیر بیان نمود:

•    ویژوال استودیو دارای پایگاه های داده گسترده ای می‌باشد، به خصوص سرور SQL مایکروسافت و سرورهای وابسته به آن. اما VS Code دارای پایگاه داده گسترده ای از افزونه ها است.

•    ویژوال استودیو روی سیستم عامل لینوکس اجرا نمی شود در حالی که VS Code اجرا می شود.

•    ویژوال استودیو یک محیط IDE کامل است در حالی که ویژگی برجسته VS Code، قابلیت پیکربندی بالای این محیط است.

•    VS Code از بسیاری از زبان های برنامه نویسی پشتیبانی می کند و قابلیت اضافه کردن زبان های بیشتر را نیز دارد اما ویژوال استودیو برای زبان های سی شارپ و .NET ارائه شده است.

 

سیستم لازم برای نصب و اجرای ویژوال استودیو

همان طور که گفته شد، VS Code برای سیستم های عامل ویندوز، MacOS  و لینوکس ارائه شده است. این محیط ادیتور برای ویندوز 7 به بعد قابل استفاده است. در سیستم عامل Mac نیز از MacOS 10.10 به بعد می توان از این محیط ویرایشگر استفاده کرد.

در لینوکس نیز نسخه های Debian، Ubuntu، Fedora، SUSE و Red Hat و همچنین زیرشاخه های این نسخه ها، از محیط ویرایشگر VS Code پشتیبانی می کنند. 

حداقل سیستم مورد نظر برای اجرای VS Code از نظر سخت افزاری باید به صورت زیر باشد:

•    حافظه RAM 1 گیگابایت و بالاتر

•    پردازنده مرکزی یا CPU دو هسته ای و بالاتر

•    حداقل فضای مورد نیاز 250 مگا بایت

•    کارت گرافیک یا GPU با رزولوشن HD یا بالاتر

 

آموزش نصب و راه اندازی ویژوال استودیو کد

پیش از نصب VS Code می بایست فایل سورس آن را دانلود کنید. با مراجعه به لینک (https://code.visualstudio.com/download) می توانید نسخه مورد نظر را بر اساس سیستم عامل خود دانلود نمایید.

فرض کنید شما از سیستم عامل ویندوز استفاده می کنید. برای هر دو نسخه ویندوز 32 بیت و 64 بیت، سورس برنامه VS Code ارائه شده است. پس از دانلود برنامه، فایل فشرده را باز کنید و فایل VSCodeUserSetup-{version}.exe را اجرا نمایید. سپس مراحل نصب را همانند سایر برنامه ها دنبال کنید.

به صورت پیش فرض، این برنامه در آدرس C:\users\{username}\AppData\Local\Programs\Microsoft VS Code نصب می شود. توصیه می شود آدرس نصب این برنامه را تعییر ندهید.

پس از صفحه نمایش محل نصب، صفحه دیگری باز می شود که گزینه های مختلفی دارد مانند Create a desktop icon، Add "Open with Code" action to Windows Explorer file context menu و غیره.

توصیه می شود تمام گزینه های مورد نظر را تیک بزنید و سپس روی گزینه Next کلیک کنید.

پس از پایان فرآیند نصب، پیغامی مبنی بر نصب موفق VS Code بر روی صفحه نمایش، مشاهده خواهد شد.

نکته مهم: پیش از نصب VS Code مطمئن شوید که نسخه ..NET Framework 4.5.2 یا بالاتر را روی سیستم خود نصب کرده باشید.

 

نحوه اجرای کد در ویژوال استودیو کد

برای اجرای کد برنامه در VS Code، هم می توان از کلیدهای میانبر و هم از ماوس استفاده کرد. استفاده از کلیدهای میانبر در این حالت بسیار راحت است. تنها با استفاده از کلیدهای ترکیبی Ctrl + Alt + N کد نوشته شده در این محیط ادیتور اجرا می شود.

با فشردن دکمه F1 و سپس انتخاب گزینه Run Code نیز می توان کد برنامه مورد نظر را اجرا نمود. همچنین کاربر می تواند با کلیک راست روی متن برنامه در محیط ادیتور و انتخاب گزینه Run Code در منوی Context، کد برنامه را اجرا کند.

علاوه بر این در منوی title در محیط VS Code نیز گزینه Run Code  وجود دارد که می توان از این گزینه هم برای اجرا کد برنامه استفاده کرد. پس از اجرای کد برنامه، برای متوقف سازی اجرای کد می توان از کلیدهای میانبر Ctrl + Alt + M استفاده نمود. همچنین با فشردن کلید F1 و انتخاب گزینه Stop Code Run نیز می توان اجرای کد را متوقف ساخت. 

 

آموزش تغییر ظاهر و فونت  Visual Studio

برای تغییر رنگ و قالب در Visual Studio، می توان مراحل زیر را دنبال کرد:

1.    در نوار منو، گزینه Tools > Options را انتخاب کنید

2.    در لیست گزینه ها، مسیر Environment > General را انتخاب نمایید.

3.    در لیست Color theme هم می توان تم پیش فرض Blue را انتخاب کرد، هم می توان از تم های Light، Dark و یا Blue (Extra Contrast) استفاده نمود.

برای تغییر فونت و اندازه آن در Visual Studio نیز می توان به روش زیر عمل کرد:

1.    در نوار منو، مسیر Tools > Options را انتخاب نمایید.

2.    در لیست گزینه ها، به مسیر Environment > Fonts and Colors وارد شوید.

3.    در لیست Show settings for گزینه Text Editor را انتخاب کنید.

4.    گزینه های Font  و Size  در این قسمت قابل تغییر هستند و می توانید فونت و اندازه مورد نظر را تنظیم نمایید.

5.    آیتم مورد نظر را در Display items انتخاب کرده و سپس گزینه های Item foreground و Item background را متناسب با آن تغییر دهید.

 

نحوه نصب افزونه در  VS Code  

برای افزایش قابلیت های VS Code می توان افزونه های مختلفی را به آن اضافه کرد. برای این منظور می توان افزونه ها را از خود محیط VS Code جستجو و نصب کرد. با کلیک روی آیکون Extensions در نوار فعالیت (Activity Bar) و یا با تایپ دستور View: Extensions در محیط ویرایشگر، می توان به افزونه ها دسترسی پیدا کرد. در این حالت لیستی از افزونه های پرکاربرد VS Code نمایش داده می شود. 

برای هر افزونه در این لیست، یک توضیح مختصر ارائه شده است و اطلاعاتی در مورد ناشر، تعداد دانلودها و رتبه بندی 5 ستاره قابل مشاهده است. می توان آیتم افزونه مورد نظر را انتخاب کرده و برای اطلاعات بیشتر به صفحه extension's details وارد شد. همچنین می توانید نام افزونه مورد نظر را در قسمت جستجو، تایپ کرده و سرچ کنید.

برای نصب افزونه، دکمه Install را بزنید. به محض اینکه نصب افزونه پایان بیابد، دکمه Install به دکمه Manage تغییر می کند. به کمک قسمت Manage افزونه ها، می توان افزونه را غیرفعال، آپدیت و یا uninstall کرد. به منظور uninstall کردن یک افزونه نیز دکمه Manage را انتخاب کرده و سپس گزینه Uninstall را از منوی کشویی آن انتخاب کنید. با این کار افزونه مورد نظر حذف می شود.

 

بررسی ساختار و امکانات  Vs Code

یکی از امکانات مهم در VS Code قابلیت هدایت بین فایل ها در زمان جستجوی یک پروژه است. همچنین زمانی که روی یک پروژه در حال کار هستید، می توان به فایل های مختلفی از همان پروژه مراجعه کرد. در محیط VS Code دو دستور قوی برای هدایت و جابجایی بین فایل ها با استفاده از کلیدهای کیبورد وجود دارد.

کلید Ctrl را نگه دارید و سپس Tab را فشار دهید، در این صورت لیستی از فایل های در حال اجرا در یک دسته ویرایشگر نشان داده می شود. برای باز کردن یکی از این فایل ها، دوباره از کلید Tab استفاده کنید تا فایل مورد نظرتان انتخاب شده و به آن هدایت شوید.

همچنین برای هدایت بین فایل ها و مکان های مختلف در ادیتور، می توانید از کلیدهای ترکیبی Alt+Left و Alt+Right استفاده کنید. اگر لازم است بین خطوط مختلف یک برنامه یا فایل نیز پرش کنید، می توانید از این دو کلید ترکیبی استفاده نمایید.

 

کلید های میانبر در  Vs Code 

کلیدهای میانبر در VS Code کاربردهای زیادی دارند و استفاده از این محیط ویرایشگر را آسان تر می سازند. برخی از مهم ترین کلیدهای میانبر مورد استفاده در این محیط عبارت اند از:

1.    Ctrl+K M

این کلید میانبر برای ورود به مود تغییر زبان استفاده می شود. در صورتی که کاربر بخواهد کد برنامه را به زبانی غیر از زبان های پیش فرض VS Code بنویسد، می تواند با این کلید ترکیبی به مود تغییر زبان وارد شود.

 

2.    Ctrl+K Ctrl+T

برای تغییر تم در محیط ویرایشگر VS Code می توان از این کلیدهای میانبر استفاده کرد.

 

3.    Ctrl+K Ctrl+S

به منظور تغییر کلیدهای میانبر در محیط VS Code می توان از کلیدهای ترکیبی فوق استفاده نمود.

 

4.    Ctrl + 

برای ورود به قسمت تنظیمات و تنظیم پییکربندی می توان از این کلیدهای ترکیبی استفاده کرد.

 

5.    Ctrl+Shift+X

برای نصب یک افزونه جدید، از کلیدهای ترکیبی Ctrl+Shift+X استفاده می شود.

 

6.    Ctrl+K Z

برای ورود به مود Zen در محیط ادیتور VS Code، کلیدهای ترکیبی فوق به کار می روند.

 

7.    Ctrl+Shift+M

برای ورود به نوار وضعیت، کلیدهای میانبر Ctrl+Shift+M مورد استقاده قرار می گیرند.

 

بهترین افزونه‌های ویژوال استودیو کد

در این بخش، بهترین افزونه های VS Code که بیشتر مورد استفاده کاربران قرار می گیرند، معرفی خواهند شد:

 

Settings Sync

این افزونه امکان سنکرون سازی هر چیزی را در محیط ادیتور VS Code فراهم می کند. این سنکرون سازی می تواند در تقسیم بندی کدها، تم ها، آیکون ها، راه اندازی ویرایشگر، keybindings، محیط های کاربری و حتی برای سایر افزونه های مورد استفاده در این محیط، به کار رود.

 

GitLens

افزونه GitLens یک افزونه متن باز است که قابلیت های Git را به VS Code اضافه می کند. این یک افزونه قدرتمند است که امکان مشاهده و آنالیز خطوط کد برنامه و تغییر آنها را به کاربر می دهد. همچنین این افزونه به شما کمک می کند تا از طریق تفسیر Git، کد برنامه مورد هدف را در یک نگاه تجسم کنید،

مخزن Git را به طور یکپارچه جستجو نمایید و از قابلیت های آن استفاده کنید. همچنین امکان جستجوی تاریخچه ادیتور و ارزیابی پایگاه کد به کمک این افزونه امکان پذیر است.

 

IntelliCode

این افزونه یک ابزار قدرتمند برای توسعه برنامه است که پیشنهادهایی را برای کدهای برنامه به صورت پیش فرض برای برنامه نویس نمایش می دهد. این افزونه از زبان های برنامه نویسی Python, TypeScript, JavaScript, React و Java پشتیبانی می کند. 

 

Prettier

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

 

Better Comments

این افزونه امکان ایجاد کامنت های شیواتر را در کدهای برنامه فراهم می کند. همچنین امکان دسته بندی کد بر اساس روش تفسیر به کمک این افزونه وجود دارد. روش های تفسیر کد در محیط ادیتور VS Code عبارت اند از: alerts، queries، TODOs و highlights.

 

Bracket Pair Colorizer

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

 

Debugger for Chrome

این افزونه در VS Code امکان اشکال زدایی کدهای جاوا اسکریپت را در مرورگر گوگل کروم فراهم می کند. همچنین شناسایی اشکالات موجود در اسکریپت ها، تگ ها، فایل های سورس و غیره به کمک این افزونه وجود دارد.

 

Snippets

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

 

Live Share

این افزونه امکان توسعه، ویرایش و اشکال زدایی کدها در محیط اشتراکی با سایر کاربران را به صورت آنی فراهم می کند. با استفاده از این افزونه می توانید پروژه فعلی خود را با سایر افراد به اشتراک گذاشته و از نظرات آنها در بهبود کد برنامه خود استفاده کنید.

 

دلایل انتخاب ویژوال استودیو کد

به عنوان سخن پایانی، بهتر است دلایل انتخابVS Code  را به عنوان یک محیط ویرایش قوی برای کدهای برنامه، بیان کنیم. ویژوال استودیو کد، به عنوان یک محیط ویرایشگر، علی رغم سادگی، ابزاری قدرتمند برای توسعه، تحلیل، ویرایش و اشکال زدایی کد است.

ارائه نسخه های مختلف برای سیستم های عامل ویندوز، لینوکس و MacOS، استفاده از آن را آسان کرده است. همچنین پشتیبانی از زبان های برنامه نویسی متعدد و قابلیت اضافه کردن زبان های جدید، تقریباً هیچ محدودیتی را در استفاده از این ادیتور برای کاربر به وجود نمی آورد.

قابلیت های دیگر VS Code را می توان به صورت زیر بیان کرد:

•    امکان سفارشی سازی کدهای برنامه

•    هدایت و جابجایی آسان بین کدها، محیط های کدنویسی و فایل های مختلف

•    استفاده از افزونه های متعدد برای ارتقای قابلیت ها

•    ساختار قابل توسعه برای فناوری های مختلف وب و زبان های مختلف برنامه نویسی

•    انعطاف پذیری بالا