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

می‌دانیم که Git یکی از مهم‌ترین و مفید‌ترین ابزارهای کمکی برای جامعه توسعه‌دهندگان و برنامه نویسان است. حتی بعضی دیگر از صنایع هم برای نگهداری مسیر روند تغییرات مستندات خود از گیت استفاده می‌کنند. VS Code هم برای کامل‌تر شدن نیاز به همکاری با گیت دارد. طراحان ویژوال استودیو کد این ویژگی را در نظر گرفته و تنظیمات خوبی را برای کار با Git ارائه داده‌اند. شاید بتوان گفت که مهم‌ترین و مفید‌ترین تنظیمات ویژوال استودیو کد برای بخش رابط کاربری این نرم‌افزار طراحی شده‌‌اند.

سلام دوست عزیز، لطفا سوالات خودتون رو در انجمن پرسش و پاسخ درسمن مطرح کنید، تا کارشناسان سریع تر جواب مورد نظرتون رو بدهند، این قسمت بخش نظرات دوره هست. همچنین با استفاده از منوی سمت چپ و تب چهارم (Run) نیز می‌توانید عملیات اجرا و خطایابی (Debug) کد را انجام دهید که بسته به هر زبانی تنظیمات مخصوص به خود را دارد. JavaScript زبانی بسیار قدرتمند است که برای افزایش تعامل و پویایی وب‌سایت به کاربرده می‌شود. با JS  شما توانایی مدیریت رویدادهای مختلف در سایت‌ را دارید.

گام دوم: قرار دادن تگ‌های HTML در نوت پد

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

{
• در ادامه همین بخش از مطلب، روش پیکربندی تمام تنظیمات بالا را آموزش داده‌ایم.
|}
• در پایین نیز گزینه Launch Visual Studio Code برای اجرا شدن آن در دسترس است.
• قبل از اینکه آموزش ساخت فایل HTML را بررسی کنیم، اول باید بدانیم HTML چیست؟ HTML مخفف کلمات «Hyper Text Markup Language» به معنی «زبان نشانه گذاری ابرمتن» است.
{
• در تنظیمات ویژوال استودیو کد حتی می‌توانیم ظاهر کرسر ترمینال را هم پیکربندی کنیم.
|}
• در این کد، با فراخوانی نام کلاس یک رویداد کلیک لیستنر ساخته شده که وقتی مخاطب روی دکمه کلیک کند، Alert با متنی که تعیین کرده اید نمایش داده خواهد شد.
{
• Render Indent Guides  را پیدا کرده و مقدار آن را بر روی always  تنظیم کنید.
|}

ساخت ماشین حساب با PHP – از صفر تا صد با نمونه کد

بنابراین می‌تواند زبان پیش‌فرض سربرگ‌های جدید را بر روی PowerShell تنظیم کند. البته هر کس می‌تواند زبان مورد استفاده خود را در بخش تنظیمات، به این ویژگی، معرفی کند. برای تعریف زبان‌های برنامه نویسی مختلف باید از کلمات کلیدی مرتبط با هر زبان استفاده کرد. به عنوان مثال می‌توانیم به کلمات کلیدی مانند javascript  و typescript  و python  و csharp  و markdown  و غیره اشاره کنیم. در ویژوال استودیو کد می‌توانیم تمام جفت‌های پرانتز و آکولاد را - به صورت مجزا از هم - رنگ‌آمیزی کنیم.

آموزش حل مشکل نوشتن فارسی در HTML و CSS

از این جا به بعد شما نیاز به مقداری دانش برنامه نویسی در مورد زبان های Html و css دارید تا بتوانید در یک پروژه کد بزنید. کد زنی در محیط ویژوال کد با توجه به میزان خلاقیتی که نشان می دهید می تواند بسیار هیجان انگیز باشد. با این حال اگر می خواهید از محیط های متفاوت تر IDE اسفاده کنید می توانید به Adobe Dream Weaver و Bootstrap مراجعه کنید.

ترمینال پیش‌فرض VS Code در ویندوز «Cmd.exe» و در لینوکس و macOS ترمینال «Bash» است. شاید به عنوان توسعه‌‌دهنده ترجیح دهید که از کنسول PowerShell به عنوان ترمینال پیش‌فرض، استفاده کنید. به صورت پیش‌فرض، Activity bar در کنار و موازی با نوار کناری قرار می‌گیرد.

ران کردن سند html از داخل vs code مشابه visual studio – تاپ لرن

دروداحتمالا تنظیمات اجرا بهم خورده یا منوی کناری رو به اشتباه بستید. میتونید از منوی بالا گزینه run رو بزنید و start debugging و سایر موارد مربوط به اجرا هستند. با نصب افزونه‌ی Settings Sync، می‌توانید تنظیمات را همراه با پروژه‌ی موردنظر در گیت‌هاب آپلود کنید تا سایرین بتوانند از آن تنظیمات روی سیستم خود استفاده کنند. با نصب افزونه Quokka، هم‌‌زمان با تایپ کردن کد در ویرایشگر، کدها اجرا شده و خروجی به شما نشان داده می‌شود.

درودیک نمونه کد که چنین خطایی میده رو قرار بدید لطفا. درودبه صورت آفلاین اجرا میشه و میتونید کلا نت رو قطع کنید. درودباید از افزونه برای اینکار استفاده کنید و خودکار نمیشه سینک کرد. درودپیشنهاد میکنم از برنامه هایی مانند c cleaner استفاده کنید.

برای ذخیره کردن خودکار تغییرات بر روی فایل‌ از کلید‌های Ctrl +S استفاده می‌کنیم. در نتیجه برای «ذخیره خودکار» (Auto Save) کارها می‌توانید از تنظیمات ویژوال استودیو کد استفاده کنید. برای پیکربندی این تنظیمات می‌توان ۲ حالت مختلف را در نظر گرفت. به صورت پیش‌فرض، «نوار کنار» (Side Bar) ویژوال استودیو کد در سمت چپ ویرایشگر قرار می‌گیرد. اما به‌هرحال کسانی هستند که ترجیح می‌دهند نوار کناری در سمت راست صفحه کار قرار بگیرد. زیرا با این روش، وقتی که نوار کناری را باز کرده یا می‌بندیم، تمام متن داخل ویرایشگر به صورت ناگهانی جابه‌جا نمی‌شوند.

Colors  در فایل «Settings.json» به شکل زیر نوشته می‌‌شود. علاوه بر فعال کردن Minimap با استفاده از تنظیمات متنوع می‌توانیم آن را سفارشی‌سازی هم بکنیم. بنابراین توصیه می‌کنیم که انواع تنظیمات را امتحان کرده و گزینه مناسب خود را انتخاب کنید.

رنگ خطوط راهنمای دندانه گذاری در درخت فایل

ابتدا به رابط کاربری گرافیکی مربوط به تنظیمات می‌رویم. سپس گزینه «Editor» را انتخاب کرده و مقدار کاراکترهای مخفی را (در خط اول کد زیر) به مقدار به true  تغییر می‌دهیم. بعد از انجام این کار، می‌توانیم درون فایل Settings.json، تنظیمات زیر را مشاهده کنیم. سلامآیا سرفصل آموزش کدنویسی در نرم افزار visual studio code رو در همین مقاله مطالعه کردید؟ همون پاراگراف اولش درمورد اینکه نوع فایل رو چطور پایتون کنید توضیح دادیم. سبک بودن و سریع بودن ویژوال استودیو کد باعث شده است تا اغلب توسعه دهندگان وب از این کد ادیتور استفاده کنند. به همین منظور سه مقاله‌ی جدا با عناوین بهترین افزونه‌های vscode  و بهترین افزونه‌های ویژوال استودیو کد برای php را برای شما در نظر گرفتیم.

در نوار Breadcrumbs نه تنها مسیر فایل‌ها نمایش داده می‌شود، بلکه حتی مسیر کلاس و تابعی که در حال حاضر بر روی آن تمرکز کرده‌ایم نیز نشان داده می‌شود. کد مربوط به این پیکربندی در فایل «Settings.json» به شکل زیر نوشته می‌‌شود. منتهی وقتی برنامه پایتون مینویسم و ران و دیباگ رو میزنم، فقط در ترمینال ران میشه و در debug console هیچ چیزی نمایش داده نمیشه. در واقع انگار debug console عملیاتی نیست یا متصل نیست چون وقتی روش کلیک میکنم فضای داخلش خالیه.

سپس در بخش «Workbench» به قسمت Editor رفته و مقدار Pinned Tab Sizing  را بر روی shrink  تنظیم کنید. علاوه بر این موارد، یک برنامه نویس باید بتواند حداقل با یک محیط توسعه یا یک ویرایشگر کد کار کند و به خوبی به آن مسلط شود. در کل، پس از اتمام دوره آموزش vs code، به تمام بخش‌های کاربردی و مهم نرم افزار visualstudio مسلط می‌شوید و می‌توانید به خوبی از آن استفاده کنید. در ادامه‌ی آموزش کار با نرم افزار ویژوال استودیو کد، به صورت گام به گام و تصویری آن را نصب کرده و یک برنامه‌ی نمونه را اجرا می‌کنیم.

توسعه‌دهندگان مختلف می‌توانند به طور هم‌زمان بر روی پروژه یکسانی کار کنند. در صورت نیاز به آموزش استفاده از این ابزار کمکی می‌توانید فیلم آموزش برنامه‌ نویسی تیمی با گیت و گیت هاب، مدیریت پروژه یونیتی با Git و GitHub را از فرادرس مشاهده کنید. لینک مربوط به این فیلم آموزشی را در پایین نیز قرار داده‌‌‌ایم. کد مربوط به تنظیم Scrollback در فایل «Settings.json» به شکل زیر نمایش داده می‌‌شود. کد مربوط به تنظیم Default Language  در فایل «Settings.json» به شکل زیر نمایش داده می‌‌شود.

ساخت جدول در HTML و کار با تگ table

در بخش‌های بعدی مطلب، انواع تنظیمات مفید و کاربردی ویژوال استودیو کد را معرفی کرده و یک به یک توضیح داده‌ایم. پیکربندی صحیح تنظیمات ویژوال استودیو کد بر روی ساده‌تر شدن فرایند کدنویسی و در نتیجه افزایش کیفیت و سرعت انجام کار تاثیر می‌گذارد. در این مطلب، تنظیمات ویژوال استودیو کد را به ۵ دسته کلی تقسیم کرده‌ایم. Visual Studio Code یکی از محبوب‌ترین ویرایشگرهای کد در دنیای برنامه‌نویسان است. در فهرست زیر، دو مورد از مهم‌ترین تنظیمات ویژوال استودیو کد را برای استفاده از فایل‌های «Markdown» معرفی کرده‌ایم. در فهرست زیر، مهم‌ترین تنظیمات ویژوال استودیو کد را درباره قالب‌بندی‌ و فایل‌ها معرفی کرده‌‌ایم.

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

در جدول زیر، تنظیمات محیط کاربری ویژوال استودیو کد را نام برده‌ایم. لازم به یادآوری است که می‌توانیم تمام تغییرات اعمال شده را به حالت پیش‌فرض برگردانیم. برای انجام این کار باید از نماد چرخ‌دنده مربوط به تنظیمات در رابط کاربری گرافیکی VS Code استفاده کنیم. در نتیجه، تنظیمات افزوده شده به فایل «Settings.json» از آن حذف می‌شوند. اکثر توسعه دهندگان پروژه های خود را در یک فهرست آسان ذخیره می کنند (آنچه ممکن است برای فراخوانی “پوشه” استفاده کنید). هر زمان که یک پروژه جدید ایجاد می کنید، صرف نظر از اینکه کوچک باشد، باید همیشه یک پوشه جدید در داخل فهرست پروژه های خود ایجاد کنید.

برای سیستم عامل‌های لینوکس و OS هم باید پروفایل‌های آن‌ها را تنظیم کرد. این تنظیم VS Code به صورت خودکار، فضای خالی انتهای خطوط کد را در زمان ذخیره‌سازی حذف می‌کند. در تصویر زیر نمونه‌ای از سلسله مراتب فولدر‌ها را می‌بینید. این سلسله مراتب با کمک فعال کردن تنظیم اسکرول ثابت درخت فایل ایجاد شده است.

افزایش پویایی و تعامل با زبان برنامه نویسی JavaScript

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

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

توضیحات دوره

را مشاهده نمی‌کنید در قسمت My Computer به قسمت View بروید و تیک گزینه File name extensions را بزنید. اکنون در پایین گزینه Open and Save یک گزینه به نام Display HTML files as HTML code instead of formatted text وجود دارد که باید تیک آن را بزنید و ذخیره کنید. همه‌ی این تگ‌ها که در صفحات وب هستند باید در داخل تگ‌های اصلی قرار بگیرند. استفاده از تنظیم validate.enabled، باعث اعتبار سنجی فایل‌های Markdown می‌شود. همچنین این تنظیم درباره وجود داشتن بعضی از خطاهای رایج نیز اطلاع‌رسانی می‌کند.

فقط باید توجه کنید که فونت انتخاب شده باید از تمام «لیگچرهای» (Ligatures) مورد نظر پشتیبانی کند. فونت ترمینال را هم می‌توانیم مانند فونت ادیتور پیکربندی کنیم. فونت جدید بر روی ترمینال متصل بر VS Code اعمال می‌شود. اگر از ترمینال یکپارچه شده با VS Code استفاده می‌کنید، امکان تغییر آن وجود دارد.

حتی اگر برنامه‌نویس نباشید، احتمالاً نام VS Code، مشهورترین ویرایشگر کد در جهان را شنیده‌اید. این نرم افزار قدرتمند، از تمامی زبان‌های برنامه نویسی رایج پشتیبانی می‌کند و نیازهای برنامه نویسان را به صورت کامل پوشش می‌دهد. ویژوال استودیو کد، قابلیت‌های بسیار زیادی در برنامه نویسی به شما ارائه می‌دهد که متاسفانه در بسیاری از مواقع، افراد از آنها استفاده نمی‌کنند. در صورتی که اگر از تمام پتانسیل برنامه استفاده کنید، می‌توانید به سادگی پروژه خود را توسعه داده و به سرانجام برسانید.

چراکه در ویژوال استودیو کد نیز می‌توان یک پروژه را به برنامه‌های کنترل نسخه پروژه مانند Git متصل کرد. انتخاب این گزینه سبب می‌شود فایل‌هایی که توسط ویژوال استودیو کد پشتیبانی می‌شوند، به طور پیشفرض با آن باز شوند. برای دانلود ویژوال استودیو نیاز است که وارد سایت مایکروسافت با آدرس visualstudio.microsoft.com شده و پس از  انتخاب فایل اجرایی آن را دانلود نمایید.

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

فصل پایانی – راه اندازی زبان های کامپایلری

سپس در بخش «Debug» گزینه Tool Bar Location  را پیدا کرده و مقدار آن را بر روی commandCenter  تنظیم کنید. سپس در بخش «Explorer» گزینه Compact Folders  را پیدا کرده و مقدار آن را بر روی false  تنظیم کنید. Enable Sticky Scroll  را پیدا کرده و مقدار آن را بر روی true  تنظیم کنید. Render Indent Guides  را پیدا کرده و مقدار آن را بر روی always  تنظیم کنید. سپس در بخش «Editor» گزینه Font Family  را پیدا کرده و مقدار آن را بر روی 'CaskaydiaCove Nerd Font'  یا Consolas  یا 'Courier New'  یا monospace  و غیره تنظیم کنید. Bracket Pairs  را پیدا کرده و مقدار آن را بر روی active  تنظیم کنید.

مقدار مربوط به این تنظیم را باید در فایل «Settings.json» به صورت دستی تنظیم کرد. سپس در بخش «Markdown» گزینه Editor را پیدا کرده و در این قسمت مقدار Paste URL As Formatted Link. با استفاده از این تنظیم، تعقیب کردن چشمی مسیر حرکت کرسر ساده‌تر شده است. سپس در بخش «Editor» مقدار گزینه Cursor Smooth Caret Animation  را به مقدار true  تغییر دهید.

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

با پیکربندی این مورد در تنظیمات، ویژوال استودیو کد به صورت خودکار تمام خطوط خالی انتهای فایل را حذف می‌کند. کد مربوط به تنظیم Insert Final Newline  در فایل «Settings.json» به شکل زیر نمایش داده می‌‌شود. کد مربوط به تنظیم Tool Bar Location  در فایل «Settings.json» به شکل زیر نمایش داده می‌‌شود.

پیش‌نیازهای دوره

بعضی وقت‌ها موقع کار کردن فراموش می‌کنیم که تغییرات اعمال شده را وارد حالت «Stage» کنیم. بعد از آن ویژوال استودیو کد، گزینه‌های Yes و No و Always و Never را به عنوان پاسخ قابل انتخاب نشان می‌دهد. یکی از تنظیمات مرتبط با گیت در ویژوال استودیو کد، «واکشی خودکار» (Autofetch) است. این تنظیم باعث می‌شود که VS Code به صورت خودکار و با دوره زمانی منظم، اطلاعات را از مخزن راه دور مشخص شده واکشی کند.

بعد از اعمال تنظیمات بالا، Minimap فعال شده به شکل زیر در میاید. بعد از اعمال تنظیم بالا، فضاهای خالی در کدهای نوشته شده به شکل زیر نشان داده می‌شوند. در ادامه این بخش از مطلب، تمام تنظیمات جدول بالا را معرفی کرده و آموزش داده‌ایم. بعضی از تنظیمات مورد اشاره در فهرست بالا، در حالت پیش‌فرض هم به درستی کار می‌کنند. اما مسئله اینجاست که در زمان ارائه این تنظیمات، برای اولین بار، به صورت پیش‌فرض غیرفعال بودند.

آموزش اجرای برنامه ها در شبکه در سی شارپ

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

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

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

در تصویر زیر حالت تغییر داده شده موقعیت قرارگیری نوار کناری را مشاهده می‌کنید. به عنوان کاربر، می‌توانیم چندین فونت مختلف برای ویژوال استودیو کد مشخص کنیم. VS Code اولین فونت در دسترس را - از بین فونت‌های معرفی شده - استفاده خواهد کرد. کد مربوط به این تنظیم در فایل «Settings.json» به شکل زیر نشان داده می‌‌شود. کد مربوط به این تنظیم در فایل «Settings.json» به شکل زیر ثبت می‌‌شود. ویژوال استودیو کد رو ببیندید و فقط بعد از اتصال وی پی ان باز کنید.

همین‌طور که می‌دانیم، VS Code برای اعلام بعضی از شرایط از نماد‌های مختلفی در نام‌ سربرگ‌ها استفاده می‌کند. برای مثال، با کمک نماد‌ «M» می‌تواند بگوید که فایل مورد نظر ویرایش شده است. اما به غیر از این، ویژوال استودیو کد می‌تواند رنگ نماد متن نوشته شده در سربرگ‌ها را نیز تغییر دهد. به عنوان مثال، Visual Studio Code یکی از محبوب ترین ویرایشگرهای متن است که توسط توسعه دهندگان استفاده می شود. (این ویژوال استودیو کد است و نه ویژوال استودیو) ویرایشگرهای متنی معروف دیگری که ممکن است از آن ها شنیده باشید Atom و Sublime Text هستند.

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

در نتیجه اگر توسعه‌دهنده‌ای از «همگام‌سازی تنظیمات» (Settings Sync) استفاده کند، شاید بعضی از تنظیمات قدیمی هنوز هم در VS Code غیرفعال باشند. برای شروع از قسمت File روی گزینه Add Folder to Workspace کلیک کنید. با استفاده از مدیر فایل یا داخل ویژال کد خود یک پوشه بسازید.

فرض کنیم که می‌خواهیم ظاهر کرسر را به line  تبدیل کنیم. معمولا از دکمه‌های ترکیبی Ctrl +F - برای پیدا کردن - یا Ctrl +H - برای جابه‌جایی رشته استفاده می‌کنیم. شاید بخواهیم عملیات جست‌وجو فقط در بین خطوط انتخاب شده انجام شود. برای این کار ابتدا باید چندین خط از متن را انتخاب بکنیم. در ضمن لازم است که این تنظیم را هم پیکربندی کرده باشیم. در این حالت، ویژوال استودیو کد به صورت خودکار گزینه «Find in Selection» را روشن می‌کند.

چرا VS Code را انتخاب کنیم؟

Cursor Style  را پیدا کرده و مقدار آن را بر روی line  تنظیم کنید. Font Family  را پیدا کرده و مقدار آن را بر روی CaskaydiaCove Nerd Font Mono  تنظیم کنید. سپس در بخش «Files» گزینه Default Language  را پیدا کرده و مقدار آن را - با توجه به مثال بالا - بر روی powershell  تنظیم کنید. سپس در بخش «Files» گزینه Auto Guess Encoding  را پیدا کرده و مقدار آن را بر روی true  تنظیم کنید. سپس در بخش «Editor» گزینه Format On Save Mode  را پیدا کرده و مقدار آن را بر روی modifications  تنظیم کنید.

روی آن راست کلیک کنید و با زدن گزینه Rename، پسوند آن را به html. همچنین می‌توانید نام آن را از New Text Document به index تغییر دهید. بخاطر همین کار کردن با نوت پد ویندوز، خسته کننده است و ابزار مناسب و حرفه‌ای برای کد نویسی نیست.