تنظیمات مربوط به رابط کاربری در VS Code

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

در جدول زیر، تنظیمات محیط کاربری ویژوال استودیو کد را نام برده‌ایم.

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

نمایش کاراکترهای مخفی شده

با کمک این تنظیمات کاراکترهای مخفی را قابل مشاهده کنید. البته این تنظیم – به غیر از «Plain Text» و «Markdown» – بر روی تمام زبان‌های برنامه نویسی فعال است. بنابراین برای آن‌ها باید این تنظیم را به صورت دستی فعال کنیم.

ابتدا به رابط کاربری گرافیکی مربوط به تنظیمات می‌رویم. سپس گزینه «Editor» را انتخاب کرده و مقدار کاراکترهای مخفی را (در خط اول کد زیر) به مقدار به true  تغییر می‌دهیم. بعد از انجام این کار، می‌توانیم درون فایل Settings.json، تنظیمات زیر را مشاهده کنیم.

توجه: تنظیمات جداگانه‌ دیگری هم برای زبان‌های Markdown  و PlainText  وجود دارند. این تنظیمات به صورت پیش‌فرض false  هستند. بنابراین در صورت نیاز باید همه آن‌ها را فعال کرد.

رندر کردن فضای خالی

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

برای نمایش کاراکترهای فضای خالی باید در تنظیمات از گزینه boundary  استفاده کنیم. با استفاده از گزینه، تمام نماد‌های فضای خالی در دندانه‌گذاری‌ها قابل تشخیص می‌شوند. پیکربندی گزینه boundary  باعث رعایت صحیح سطح‌های دندانه‌گذاری – به طور خاص در زبان‌های پایتون و YAML – می‌شود. فایده دیگر این تنظیم در آن‌ است که دیگر کاراکتر فضای خالی را با کاراکتر «تب» (Tab) اشتباه نمی‌گیریم.

برای اعمال این تنظیم، ابتدا به صفحه رابط کاربری تنظیمات رفته و سپس از گزینه «Editor» مقدار Render Whitespace  را بر روی boundary  تنظیم می‌کنیم.

کد مربوط به این پیکربندی در فایل «Settings.json» به شکل زیر نوشته می‌‌شود.

بعد از اعمال تنظیم بالا، فضاهای خالی در کدهای نوشته شده به شکل زیر نشان داده می‌شوند.

همین‌طور که می‌بینید در تصویر بالا، فضاهای خالی ایجاد شده با دکمه «Space» به شکل نقطه و فضاهای خالی ایجاد شده با دکمه تب به شکل فلش کم رنگ دیده می‌شوند.

اسکرول ثابت در ویرایشگر

بعضی از ساختارها در زبان‌های برنامه نویسی مانند توابع، کلاس‌های برنامه نویسی و Structure-ها را می‌توان به صورت تودرتو تعریف کرد. استفاده از این تنظیم باعث می‌شود که بعد از اسکرول کردن صفحه به پایین نام مربوط به سطوح مختلف این ساختارها به بالای ویرایشگر بچسبد. در این حالت بسیار راحت‌تر می‌توانید بخش‌های تودرتوی کدها را تشخیص دهیم. این تنظیم بر روی زبان‌های برنامه نویسی زیادی مانند جاوا اسکریپت، تایپ اسکریپت، سی شارپ، JSON و YAML و Markdown و غیره کار می‌کند.

برای اعمال این تنظیم، ابتدا وارد محیط گرافیکی تنظیمات شوید. سپس در بخش «Editor»، گزینه Sticky Scroll. Enabled  را پیدا کرده و مقدار آن را به true  تغییر دهید.

کد مربوط به این تنظیم در فایل «Settings.json» به شکل زیر ثبت می‌‌شود.

بعد از اعمال این تغییر، در صورتی که بر روی ساختار تودرتویی اسکرول کنیم با چیزی مانند تصویر زیر روبه‌رو می‌شویم.

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

همچنین از مسیر View > Appearance  هم می‌توانید این تنظیم را به سرعت فعال یا غیرفعال کنید.

جابه‌جایی بین بردکرامب‌ها

بعد از اعمال این تنظیم، نوار بالای صفحه برای نشان دادن مسیر حرکت بین «بردکرامب‌ها» (Breadcrumbs) ظاهر می‌شود. این نوار در بالای ویرایشگر قرار می‌گیرد، همچنین به ازای هر سربرگ باز شده به صورت جداگانه نمایش داده می‌شود. در نوار Breadcrumbs نه تنها مسیر فایل‌ها نمایش داده می‌شود، بلکه حتی مسیر کلاس و تابعی که در حال حاضر بر روی آن تمرکز کرده‌ایم نیز نشان داده می‌شود.

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

برای اعمال این تنظیم، ابتدا وارد محیط گرافیکی تنظیمات شوید. سپس گزینه Breadcrumbs. Enabled را بر روی true  قرار دهید.

کد مربوط به تنظیم Breadcrumbs. Enabled در فایل «Settings.json» به شکل زیر نوشته می‌‌شود.

بعد از اعمال تنظیمات بالا، نوار Breadcrumb در بالای ادیتور به شکل زیر نمایش داده می‌شود.

Minimap برای اسکرول کردن عمودی

«Minimap» پیش‌نمایش کوچکی از تمام فایل است. این نقشه در بخش سمت راست ویرایشگر کد نمایش داده شده و به جای نوار اسکرول سنتی به کار برده می‌شود.

برای استفاده از این نقشه به‌جای نوار اسکرول معمولی، ابتدا وارد محیط گرافیکی تنظیمات شوید. سپس در بخش «Editor» مقدار گزینه Minimap. Enabled  را بر روی true  تنظیم کنید.

کد مربوط به تنظیم Minimap. Enabled  در فایل «Settings.json» به شکل زیر نمایش داده می‌‌شود.

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

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

بعد از اعمال تنظیمات بالا، Minimap فعال شده به شکل زیر در میاید.

ظاهر کرسر

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

برای تغییر ظاهر کرسر، ابتدا وارد محیط گرافیکی تنظیمات شوید. سپس در بخش «Editor» مقدار گزینه Cursor Style  را که در حالت پیش‌فرض بر روی line  تنظیم شده تغییر دهید.

کد مربوط به تنظیم Cursor Style  در فایل «Settings.json» به شکل زیر نمایش داده می‌‌شود.

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

چشمک زدن کرسر

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

برای اعمال این تنظیم، ابتدا وارد محیط گرافیکی تنظیمات شوید. سپس در بخش «Editor» مقدار گزینه Cursor Blinking  را تغییر دهید. به صورت پیش‌‌فرض این مقدار بر روی blink  تنظیم شده است. اما در این مطلب – با هدف نمایش داده شدن کد در فایل JSON – آن را بر روی expand  تنظیم کردیم.

کد مربوط به تنظیم Cursor Blinking  در فایل «Settings.json» به شکل زیر نمایش داده می‌‌شود.

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

• blink
• smooth
• phase
• expand
• solid

اسکرول کردن نرم تر

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

برای اعمال این تنظیم، ابتدا وارد محیط گرافیکی تنظیمات شوید. سپس در بخش «Editor» مقدار گزینه Smooth Scrolling  را بر روی true  تنظیم می‌کنیم.

کد مربوط به این تنظیم در فایل «Settings.json» به شکل زیر ثبت می‌‌شود.

نرم تر کردن انیمیشن کرسر

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

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

کد مربوط به این تنظیم در فایل «Settings.json» به شکل زیر نشان داده می‌‌شود.

قبل از اعمال این تنظیم، حرکت کرسر به شکل زیر است.

اما بعد از اعمال تنظیم “editor.cursorSmoothCaretAnimation بر روی on حرکت کرسر به شکل زیر می‌شود.

توجه: تقریبا می‌توان مسیر حرکت کرسر را مشاهده کرد. البته در تصویر بالا، این حرکت به دلیل پایین‌ بودن فریم در فایل‌هایی با فرمت «Gif» به شکل مناسب نمایش داده نشده است. بعد از اعمال این تنظیم بر روی کامپیوتر خود به خوبی متوجه نرم‌تر شدن حرکت کرسر می‌شوید.

رنگ آمیزی ظاهر ویرایشگر کد

همین‌طور که می‌دانیم، VS Code برای اعلام بعضی از شرایط از نماد‌های مختلفی در نام‌ سربرگ‌ها استفاده می‌کند. برای مثال، با کمک نماد‌ «M» می‌تواند بگوید که فایل مورد نظر ویرایش شده است. اما به غیر از این، ویژوال استودیو کد می‌تواند رنگ نماد متن نوشته شده در سربرگ‌ها را نیز تغییر دهد.

این تنظیم به صورت پیش‌فرض روشن است. اما در صورت استفاده از همگام‌سازی تنظیمات با نسخه‌های قدیمی VS Code – که به مدت زیادی بروز‌رسانی نشده‌اند – ممکن است این تنظیم خاموش بوده باشد.

برای پیکربندی این تنظیم، ابتدا وارد محیط گرافیکی تنظیمات شوید. سپس در بخش «Workbench» به قسمت «Editor» رفته و مقدار گزینه Decorations. Colors  را بر روی true  تنظیم کنید.

کد مربوط به تنظیم Decorations. Colors  در فایل «Settings.json» به شکل زیر نوشته می‌‌شود.

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

دسته بندی سربرگ ها

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

برای اعمال این تنظیم، ابتدا وارد محیط گرافیکی تنظیمات شوید. سپس در بخش «Workbench» مقدار گزینه Editor. Wrap Tabs  را بر روی true  تنظیم کنید.

کد مربوط به این تنظیم در فایل «Settings.json» مانند کادر زیر نشان داده می‌‌شود.

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

ارتفاع سربرگ‌ ها

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

برای اعمال این تنظیم، ابتدا وارد محیط گرافیکی تنظیمات شوید. سپس در بخش «Window»، مقدار گزینه Density. «Editor» Tab Height  را بر روی compact  تنظیم کنید.

کد مربوط به این تنظیم در فایل «Settings.json» به شکل زیر نمایش داده می‌‌شود.

سربرگ‌های پین شده در ردیف‌ جداگانه

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

برای اعمال این تنظیم، ابتدا وارد محیط گرافیکی تنظیمات شوید. سپس در بخش «Workbench» به قسمت Editor  رفته و مقدار Pinned Tabs On Separate Row  را بر روی true  تنظیم کنید.

کد مربوط به این تنظیم در فایل «Settings.json» به شکل زیر نوشته می‌‌شود.

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

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

تنظیم اندازه سربرگ‌های پین شده

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

البته هنوز هم می‌توانیم نام کامل فایل‌ها را ببینیم. فقط کافیست که ماوس را بر روی سربرگ مورد نظر نگهداریم. نام کامل فایل به صورت «Tooltip» نمایش داده می‌شود. همچنین وقتی که فایل مورد نظر را انتخاب کنیم، نام کامل فایل در نوار مسیر‌یابی بردکرامب دیده می‌شود.

برای اعمال این تنظیم، ابتدا وارد محیط گرافیکی Setting شوید. سپس در بخش «Workbench» به قسمت Editor رفته و مقدار Pinned Tab Sizing  را بر روی shrink  تنظیم کنید.

کد مربوط به تنظیم Pinned Tab Sizing  در فایل «Settings.json» به شکل زیر نمایش داده می‌‌شود.

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

سربرگ پیش‌نمایش در ویرایشگر

هنگامی که در درخت فایل‌ بر روی یکی از فایل‌ها کلیک می‌کنیم، کد ادیتور این فایل‌ را در «سربرگ ویرایشگر پیش‌نمایشی» (Preview Editor Tab) باز می‌کند. این روش نمایش فایل، به صورت پیش‌فرض برنامه‌ریزی شده است. در ویژوال استودیو کد فقط یک سربرگ پیش‌نمایش وجود دارد. بنابراین اگر بر روی فایل دیگری در درخت فایل کلیک کنیم، برای باز کردن سربرگ پیش‌نمایش آن فایل ابتدا باید صفحه پیش‌نمایش فعلی بسته شود.

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

• به این منظور به‌جای یک کلیک کردن بر روی فایل مورد نظر در درخت فایل از دابل کلیک استفاده می‌کنیم.
• بر روی سربرگ پیش‌نمایش باز شده دابل کلیک کنیم.
• درون فایل «سربرگ پیش‌نمایش»، تغییراتی ایجاد کنیم.

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

برای اعمال این تنظیم، ابتدا وارد محیط گرافیکی تنظیمات شوید. سپس در بخش «Workbench» مقدار قسمت Editor. Enable Preview  را بر روی false  تنظیم می‌کنیم.

کد مربوط به تنظیم Editor. Enable Preview  در فایل «Settings.json» به شکل زیر نمایش داده می‌‌شود.

رنگ آمیزی جفت پرانتزها

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

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

برای اعمال این تنظیم، ابتدا وارد محیط گرافیکی تنظیمات شوید. سپس در بخش «Editor»، مقدار Bracket Pair Colorization: Enabled را بر روی true  تنظیم کنید.

کد مربوط به این تنظیم در فایل «Settings.json» به شکل زیر نمایش داده می‌‌شود.

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

راهنمای جفت پرانتزها

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

برای اعمال این تنظیم، ابتدا وارد محیط گرافیکی تنظیمات شوید. سپس در بخش «Editor» گزینه Guides. Bracket Pairs  را پیدا کرده و مقدار آن را بر روی active  تنظیم کنید.

کد مربوط به تنظیم Guides. Bracket Pairs  در فایل «Settings.json» به شکل زیر نمایش داده می‌‌شود.

در تصویر متحرک زیر روش کارکرد این تنظیم ویژوال استودیو کد را نمایش داده‌ایم.

فونت ویرایشگر

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

به عنوان کاربر، می‌توانیم چندین فونت مختلف برای ویژوال استودیو کد مشخص کنیم. VS Code اولین فونت در دسترس را – از بین فونت‌های معرفی شده – استفاده خواهد کرد.

برای اعمال این تنظیم، ابتدا وارد محیط گرافیکی تنظیمات شوید. سپس در بخش «Editor» گزینه Font Family  را پیدا کرده و مقدار آن را بر روی ‘CaskaydiaCove Nerd Font’  یا Consolas  یا ‘Courier New’  یا monospace  و غیره تنظیم کنید.

کد مربوط به تنظیم Font Family  در فایل «Settings.json» به شکل زیر نمایش داده می‌‌شود.

لیگِچرهای فونت در ویرایشگر

تنظیم مربوط به لیگِچرها را به شرطی می‌توان فعال و استفاده کرد که توسط فونت‌ ویرایشگر پشتیبانی شوند. لیگچرهای فونت به روش‌های ترکیب چند کاراکتر مختلف و تبدیل آن‌ها به یک کاراکتر یا یک نماد گفته می‌شود. برای مثال می‌توان ==  را به ≡  و ->  را به →  تبدیل کرد.

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

برای اعمال این تنظیم، ابتدا وارد فایل «Settings.json» برای تنظیمات شوید. سپس گزینه Editor. Font Ligatures  را به صورت دستی با مقدار true  تنظیم کنید.

کد مربوط به این تنظیم در فایل «Settings.json» باید به شکل زیر نوشته شود.

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

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

برای اعمال این تنظیم، ابتدا وارد محیط گرافیکی تنظیمات شوید. سپس در بخش «Workbench» گزینه Tree. Indent  را پیدا کرده و مقدار آن را بر روی 11  تنظیم کنید. البته این مقدار سلیقه‌ای است و می‌توانید بیشتر یا کمتر هم بکنید. مقدار پیش‌فرض این تنظیم برابر با ۸ است.

کد مربوط به تنظیم Tree. Indent  در فایل «Settings.json» به شکل زیر نمایش داده می‌‌شود.

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

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

برای اعمال این تنظیم، ابتدا وارد محیط گرافیکی تنظیمات شوید. سپس در بخش «Workbench» گزینه Tree. Render Indent Guides  را پیدا کرده و مقدار آن را بر روی always  تنظیم کنید.

کد مربوط به این تنظیم در فایل «Settings.json» به شکل زیر نمایش داده می‌‌شود.

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

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

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

برای اعمال این تنظیم، ابتدا وارد محیط گرافیکی تنظیمات شوید. سپس در بخش «Workbench» گزینه Color Customizations  را پیدا کنید. مقدار مربوط به این تنظیم را باید در فایل «Settings.json» به صورت دستی تنظیم کرد.

کد مربوط به تنظیم Color Customizations  در فایل «Settings.json» به شکل زیر نمایش داده می‌‌شود.

البته توجه کنید که کد رنگ #999999  سلیقه‌ای بوده و هر مقدار دلخواهی می‌توانید بنویسید.

اسکرول ثابت درخت فایل

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

برای اعمال این تنظیم، ابتدا وارد محیط گرافیکی تنظیمات شوید. سپس در بخش «Workbench» گزینه Tree. Enable Sticky Scroll  را پیدا کرده و مقدار آن را بر روی true  تنظیم کنید.

کد مربوط به تنظیم Tree. Enable Sticky Scroll  در فایل «Settings.json» به شکل زیر نمایش داده می‌‌شود.

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

فولدر‌‌های بهم پیوسته درخت فایل

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

برای اعمال این تنظیم، ابتدا وارد محیط گرافیکی تنظیمات شوید. سپس در بخش «Explorer» گزینه Compact Folders  را پیدا کرده و مقدار آن را بر روی false  تنظیم کنید.

کد مربوط به تنظیم Compact Folders  در فایل «Settings.json» به شکل زیر نمایش داده می‌‌شود.

بعد از انجام این کار، تنظیم نمایش فایل‌ها به شکل زیر تغییر می‌کند.

محل نوار ابزار دیباگ کردن

به صورت پیش‌فرض، نوار‌ابزار بخش دیباگ بر روی صفحه کار، شناور است. بنابراین همیشه دیده شده و قابل جابه‌جایی به بخش‌های مختلف ویژوال استودیو کد است. مشکل اینجاست که اغلب اوقات، نوار‌ابزار دیباگ در ویژوال استودیو کد بر روی سایر بخش‌های کنترلی و سربرگ‌ها قرار می‌گیرد. بنابراین بعضی وقت‌ها برای پیدا کردن این ابزارها به مشکل برمی‌خوریم. می‌توان این نوار ابزار را در جایی محکم و ثابت قرار داد. اما در آن صورت فقط زمانی دیده می‌شود که در حالت «Run And Debug» هستیم. البته می‌توان آن را به «مرکز فرمان» (Command Center) هم انتقال داد. با این روش همیشه می‌توان نوار‌ابزار دیباگ‌ کردن را دید و به آن دسترسی داشت. در ضمن روی هیچ بلوک و ابزار کنترلی دیگری را هم نمی‌پوشاند.

برای اعمال این تنظیم، ابتدا وارد محیط گرافیکی تنظیمات شوید. سپس در بخش «Debug» گزینه Tool Bar Location  را پیدا کرده و مقدار آن را بر روی commandCenter  تنظیم کنید.

کد مربوط به تنظیم Tool Bar Location  در فایل «Settings.json» به شکل زیر نمایش داده می‌‌شود.

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

در تصویر پایین و بعد از اعمال تنظیم، می‌بینیم که نوار ابزار دیباگ به بخش Command Center  رفته و دیگر مزاحم کسی نیست.

موقعیت سایدبار

به صورت پیش‌فرض، «نوار کنار» (Side Bar) ویژوال استودیو کد در سمت چپ ویرایشگر قرار می‌گیرد. این ساختار معمولا مورد پسند همه است. اما به‌هرحال کسانی هستند که ترجیح می‌دهند نوار کناری در سمت راست صفحه کار قرار بگیرد. زیرا با این روش، وقتی که نوار کناری را باز کرده یا می‌بندیم، تمام متن داخل ویرایشگر به صورت ناگهانی جابه‌جا نمی‌شوند.

برای اعمال این تنظیم، ابتدا وارد محیط گرافیکی تنظیمات شوید. سپس در بخش «Workbench» گزینه Side Bar. Location  را پیدا کرده و مقدار آن را بر روی right  تنظیم کنید.

کد مربوط به این تنظیم در فایل «Settings.json» به شکل زیر نمایش داده می‌‌شود.

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

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

موقعیت Activity bar

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

برای اعمال این تنظیم، ابتدا وارد محیط گرافیکی تنظیمات شوید. سپس در بخش «Workbench» گزینه Activity Bar. Location  را پیدا کرده و مقدار آن را بر روی top  تنظیم کنید.

کد مربوط به این تنظیم در فایل «Settings.json» به شکل زیر نمایش داده می‌‌شود.

بعد از تغییر دادن تنظیمات ویژوال استودیو کد به شکل بالا، موقعیت Activity bar مانند تصویر زیر تغییر می‌کند.

تنظیمات مربوط به قالب‌بندی و فایل در ویرایشگر

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

در فهرست زیر، مهم‌ترین تنظیمات ویژوال استودیو کد را درباره قالب‌بندی‌ و فایل‌ها معرفی کرده‌‌ایم.

1. ذخیره خودکار فایل‌‌ها
2. حذف فضای خالی انتهای خط‌‌ها
3. افزودن خط خالی به انتهای فایل
4. حذف خطوط اضافی از انتهای فایل
5. قالب‌بندی در زمان پیست کردن
6. قالب‌بندی در زمان ذخیره‌سازی کدها
7. حدس‌زدن خودکار رمزنگاری
8. تنظیم زبان پیش فرض برای فایل‌های جدید
9. استفاده خودکار از «Find-In-Selection» در زمان انتخاب چند خط

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

ذخیره خودکار فایل‌ ها

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

• اول اینکه زمان تعیین کرد. برای مثال، هر ۱ ثانیه تغییرات اعمال شده در کدها ذخیره شوند.
• دوم هم اینکه با هربار اعمال وقفه در انجام کار ویرایشگر کد، تغییرات اعمال شده ذخیره شوند.

برای اعمال این تنظیم، ابتدا وارد محیط گرافیکی تنظیمات شوید. سپس در بخش «Files» گزینه Auto Save  را پیدا کرده و مقدار آن را بر روی afterDelay  تنظیم کنید. همچنین گزینه Auto Save Delay  را پیدا کرده و مقدار آن را بر روی 1000  تنظیم کنید.

توجه: عدد 1000  اختیاری است و هر عددی می‌توان قرار داد.

کد مربوط به این تنظیمات در فایل «Settings.json» به شکل زیر نمایش داده می‌‌شود.

حذف فضای خالی انتهای خط‌ ها

این تنظیم VS Code به صورت خودکار، فضای خالی انتهای خطوط کد را در زمان ذخیره‌سازی حذف می‌کند.

برای اعمال این تنظیم، ابتدا وارد محیط گرافیکی تنظیمات شوید. سپس در بخش «Files» گزینه Trim Trailing Whitespace  را پیدا کرده و مقدار آن را بر روی true  تنظیم کنید.

کد مربوط به این تنظیم در فایل «Settings.json» به شکل زیر نمایش داده می‌‌شود.

توجه: در زمان کار با فایل‌هایی که توسط منبع کد مدیریت می‌‌شوند، استفاده از این تنظیم می‌تواند باعث رویدادن تغییرات بزرگی شود. مخصوصا اگر ابزار «Diff Viewer» مشغول بررسی کدها باشد. (Diff Viewer به ابزارهای مخصوص کنترل نسخه مانند Git گفته می‌شود.)

افزودن خط خالی به انتهای فایل

تنظیم مربوط به افزودن خط خالی به انتهای فایل، در هر زمان که کار برنامه نویس با کدهای خود تمام می‌شود – همزمان با ذخیره‌سازی مطلب – خط خالی را به انتهای فایل اضافه می‌کند. این ابزار به طور خاص در زمان کار کردن با فایل‌های متنی مفید است که باید در دسترس سیستم‌های یونیکسی قرار بگیرند. زیرا یونیکس برای کار کردن با فایل‌های متنی نیاز به خط خالی در انتهای فایل دارد.

برای اعمال این تنظیم، ابتدا وارد محیط گرافیکی تنظیمات شوید. سپس در بخش «Files» گزینه Insert Final Newline  را پیدا کرده و مقدار آن را بر روی true  تنظیم کنید.

کد مربوط به تنظیم Insert Final Newline  در فایل «Settings.json» به شکل زیر نمایش داده می‌‌شود.

حذف خطوط اضافی از انتهای فایل

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

برای اعمال این تنظیم، ابتدا وارد محیط گرافیکی تنظیمات شوید. سپس در بخش «Files» گزینه Trim Final Newlines  را پیدا کرده و مقدار آن را بر روی true  تنظیم کنید.

کد مربوط به تنظیم Trim Final Newlines  در فایل «Settings.json» به شکل زیر نمایش داده می‌‌شود.

قالب بندی در زمان پیست کردن

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

برای اعمال این تنظیم، ابتدا وارد محیط گرافیکی تنظیمات شوید. سپس در بخش «Editor» گزینه Format On Paste  را پیدا کرده و مقدار آن را بر روی true  تنظیم کنید.

کد مربوط به تنظیم Format On Paste  در فایل «Settings.json» به شکل زیر نمایش داده می‌‌شود.

قالب بندی در زمان ذخیره سازی کدها

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

برای اعمال این تنظیم، ابتدا وارد محیط گرافیکی تنظیمات شوید. سپس در بخش «Editor» گزینه Format On Save  را پیدا کرده و مقدار آن را بر روی true  تنظیم کنید.

کد مربوط به تنظیم Format On Save  در فایل «Settings.json» به شکل زیر نمایش داده می‌‌شود.

همراه با این تنظیم، تنظیم دیگری نیز وجود دارد که روش قالب‌بندی متن را تعیین می‌کند. به صورت پیش‌فرض این تنظیم کل فایل را قالب‌بندی می‌کند. اما شاید کاربری ترجیح دهد که فقط خطوط ویرایش شده‌ قالب‌بندی شوند. برای انجام این کار از مقدار modifications  برای تنظیم formatOnSaveMode  استفاده می‌‌کنیم. ویژگی «قالب‌بندی کدهای ویرایش شده» به طور خاص در زمان کار با فایل‌های ذخیره شده توسط ابزارهای کنترل نسخه – مانند گیت – کاربرد دارد.

برای اعمال این تنظیم، ابتدا وارد محیط گرافیکی تنظیمات شوید. سپس در بخش «Editor» گزینه Format On Save Mode  را پیدا کرده و مقدار آن را بر روی modifications  تنظیم کنید.

کد مربوط به این تنظیم در فایل «Settings.json» به شکل زیر نمایش داده می‌‌شود.

حدس‌زدن خودکار رمزنگاری

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

برای اعمال این تنظیم، ابتدا وارد محیط گرافیکی تنظیمات شوید. سپس در بخش «Files» گزینه Auto Guess Encoding  را پیدا کرده و مقدار آن را بر روی true  تنظیم کنید.

کد مربوط به این تنظیم در فایل «Settings.json» به شکل زیر نمایش داده می‌‌شود.

تنظیم زبان پیش فرض برای فایل‌های جدید

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

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

برای اعمال این تنظیم، ابتدا وارد محیط گرافیکی تنظیمات شوید. سپس در بخش «Files» گزینه Default Language  را پیدا کرده و مقدار آن را – با توجه به مثال بالا – بر روی powershell  تنظیم کنید.

کد مربوط به تنظیم Default Language  در فایل «Settings.json» به شکل زیر نمایش داده می‌‌شود.

استفاده خودکار از Find in Selection در زمان انتخاب چند خط

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

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

برای فعال کردن این تنظیم ابتدا وارد محیط گرافیکی تنظیمات شوید. سپس در بخش «Editor» گزینه Find. Auto Find In Selection  را پیدا کرده و مقدار آن را بر روی multiline  تنظیم کنید.

کد مربوط به این تنظیم در فایل «Settings.json» به شکل زیر نمایش داده می‌‌شود.

تنظیمات مربوط به ترمینال

ترمینال VS Code همان خط فرمان ویندوز یا ترمینال لینوکس است. اما از این ترمینال به شکل حرفه‌ای برای اجرای کدها، ارسال ورودی به برنامه و نمایش داده‌های خروجی استفاده می‌‌شود. وجود ترمینال صحیح و سالم اهمیت بسیار زیادی در مشاهده روش کار برنامه دارد.

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

1. تغییر دادن ترمینال پیش‌ فرض ویژوال استودیو کد
2. فونت ترمینال
3. ظاهر کرسر ترمینال
4. «Scrollback»

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

روش تغییر دادن ترمینال پیش‌ فرض ویژوال استودیو کد چیست؟

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

به عنوان کاربر ویندوز می‌توانید تنظیمات پروفایل را از روی ویندوز تغییر دهید. برای سیستم عامل‌های لینوکس و OS هم باید پروفایل‌های آن‌ها را تنظیم کرد.

برای اعمال این تغییر ابتدا وارد محیط گرافیکی تنظیمات شوید. سپس در بخش «Terminal» گزینه Integrated  را پیدا کرده و مقدار Default Profile. Windows  را بر روی PowerShell  تنظیم کنید.

کد مربوط به تغییر دادن ترمینال پیش‌ فرض در فایل «Settings.json» به شکل زیر نمایش داده می‌‌شود.

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

برای اعمال این تنظیم، ابتدا وارد محیط گرافیکی تنظیمات شوید. سپس در بخش «Terminal» گزینه Integrated  را پیدا کرده و مقدار Profiles. Windows  را تنظیم کنید. البته برای ویرایش این تنظیم باید ترمینال مورد نظر خود را به شکل مستقیم درون فایل «Settings.json» وارد کنیم.

کد مربوط به این تنظیم در فایل «Settings.json» به شکل زیر نمایش داده می‌‌شود.

فونت ترمینال

فونت ترمینال را هم می‌توانیم مانند فونت ادیتور پیکربندی کنیم. فونت جدید بر روی ترمینال متصل بر VS Code اعمال می‌شود.

فرض کنیم که می‌خواهیم از فونت «CaskaydiaCove Nerd Font Mono» برای ترمینال استفاده کنیم. لازم به اشاره است که برای استفاده از فونت‌ها در ترمینال و ادیتور هیچ محدودیتی وجود ندارد. فقط باید توجه کنید که فونت انتخاب شده باید از تمام «لیگچرهای» (Ligatures) مورد نظر پشتیبانی کند.

برای اعمال این تنظیم، ابتدا وارد محیط گرافیکی تنظیمات شوید. سپس در بخش «Terminal» گزینه Integrated. Font Family  را پیدا کرده و مقدار آن را بر روی CaskaydiaCove Nerd Font Mono  تنظیم کنید.

نکته: فونت استفاده شده در تنظیمات بالا اختیاری است.

کد مربوط به تنظیم فونت ترمینال در فایل «Settings.json» به شکل زیر نمایش داده می‌‌شود.

ظاهر کرسر ترمینال

در تنظیمات ویژوال استودیو کد حتی می‌توانیم ظاهر کرسر ترمینال را هم پیکربندی کنیم. گزینه‌هایی مانند line  و block  و underline  وجود دارند. فرض کنیم که می‌خواهیم ظاهر کرسر را به line  تبدیل کنیم.

برای اعمال این تنظیم، ابتدا وارد محیط گرافیکی تنظیمات شوید. سپس در بخش «Terminal» گزینه Integrated. Cursor Style  را پیدا کرده و مقدار آن را بر روی line  تنظیم کنید.

کد مربوط به تنظیم «ظاهر کرسر ترمینال» در فایل «Settings.json» به شکل زیر نمایش داده می‌‌شود.

Scrollback

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

برای اعمال این تنظیم، ابتدا وارد محیط گرافیکی تنظیمات شوید. سپس در بخش «Terminal» گزینه Integrated. Scrollback  را پیدا کرده و مقدار آن را بر روی 10000  تنظیم کنید.

کد مربوط به تنظیم Scrollback در فایل «Settings.json» به شکل زیر نمایش داده می‌‌شود.

یادگرفتن برنامه نویسی توسط فیلم های پروژه محور فرادرس

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

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

تنظیمات ویژوال استودیو کد برای کار با Git

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

گیت، سیستم کنترل نسخه متن‌بازی است که به توسعه‌دهندگان برای مدیریت و اشتراک‌گذاری تغییرات در کدهای منبع کمک می‌کند. توسعه‌دهندگان مختلف می‌توانند به طور هم‌زمان بر روی پروژه یکسانی کار کنند. در صورت نیاز به آموزش استفاده از این ابزار کمکی می‌توانید فیلم آموزش برنامه‌ نویسی تیمی با گیت و گیت هاب، مدیریت پروژه یونیتی با Git و GitHub را از فرادرس مشاهده کنید. لینک مربوط به این فیلم آموزشی را در پایین نیز قرار داده‌‌‌ایم.

در فهرست زیر، ۴ مورد از تنظیمات ویژوال استودیو کد برای کار با Git را معرفی کرده‌ایم. این تنظیمات در ادامه همین بخش، آموزش داده شده‌اند.

1. واکشی خودکار اطلاعات
2. ذخیره‌سازی خودکار در مخزن
3. ویرایشگر کمکی برای عملیات ادغام
4. دستور «Commit» هوشمند

واکشی خودکار اطلاعات

یکی از تنظیمات مرتبط با گیت در ویژوال استودیو کد، «واکشی خودکار» (Autofetch) است. این تنظیم باعث می‌شود که VS Code به صورت خودکار و با دوره زمانی منظم، اطلاعات را از مخزن راه دور مشخص شده واکشی کند. تنظیم Autofetch به توسعه‌دهندگان برای بررسی به‌روزبودن مخزن محلی کمک می‌کند. در نتیجه دیگر برنامه نویسان مجبور نیستند عمل واکشی را به صورت دستی انجام دهند.

برای اعمال این تنظیم، ابتدا وارد محیط گرافیکی تنظیمات شوید. سپس در بخش «Git» گزینه Autofetch  را پیدا کرده و مقدار آن را بر روی true  تنظیم کنید.

کد مربوط به تنظیم Autofetch  در فایل «Settings.json» به شکل زیر نمایش داده می‌‌شود.

ذخیره سازی خودکار در مخزن

با استفاده از تنظیم «Auto Stash»، می‌توانیم به صورت خودکار تغییرات ایجاد شده در کدها را ذخیره کنیم. این ذخیره‌سازی قبل از واکشی داده‌ها از مخزن گیت انجام می‌شود. بعد از اینکه واکشی داده‌ها با موفقیت انجام شد، تغییرات ذخیره شده بازیابی می‌شوند.

برای اعمال این تنظیم، ابتدا وارد محیط گرافیکی تنظیمات شوید. سپس در بخش «Git» گزینه Auto Stash  را پیدا کرده و مقدار آن را بر روی true  تنظیم کنید.

کد مربوط به تنظیم Auto Stash  در فایل «Settings.json» به شکل زیر نمایش داده می‌‌شود.

ویرایشگر کمکی برای عملیات ادغام

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

برای اعمال این تنظیم، ابتدا وارد محیط گرافیکی تنظیمات شوید. سپس در بخش «Git» گزینه Merge Editor را پیدا کرده و مقدار آن را بر روی true  تنظیم کنید.

کد مربوط به این تنظیم در فایل «Settings.json» به شکل زیر نمایش داده می‌‌شود.

دستور Commit هوشمند

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

• اگر گزینه Always  را انتخاب کنیم، VS Code از این به بعد به صورت خودکار تمام تغییرات را قبل از Commit کردن وارد حالت Stage می‌کند.
• اما اگر گزینه Never  را انتخاب کنیم، دکمه Commit غیر فعال می‌شود. مگر اینکه تمام تغییرات به وجود آورده را به حالت Stage ببریم.

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

ابتدا وارد محیط گرافیکی تنظیمات شوید. سپس در بخش «Git» گزینه Enable Smart Commit  را پیدا کرده و مقدار آن را بر روی true  تنظیم کنید.

کد مربوط به تنظیم «دستور Commit هوشمند» در فایل «Settings.json» به شکل زیر نمایش داده می‌‌شود.

اما اگر تصمیم بگیرید که تغییرات مورد نظر قبل از تثبیت شدن در مخزن به صورت دستی Stage شوند. همچنین علاقه‌ای به دیدن پیغام از طرف VS Code ندارید، هم باید مقدار enableSmartCommit  را بر بروی false  تنظیم کنید و هم مقدار suggestSmartCommit  را.

برای اعمال این تنظیم، ابتدا وارد محیط گرافیکی تنظیمات شوید. سپس در بخش «Git» گزینه Suggest Smart Commit  را پیدا کرده و مقدار آن را بر روی false  تنظیم کنید.

کد مربوط به تنظیم Suggest Smart Commit  در فایل «Settings.json» به شکل زیر نمایش داده می‌‌شود.

تنظیمات فایل های Markdown

در فهرست زیر، دو مورد از مهم‌ترین تنظیمات ویژوال استودیو کد را برای استفاده از فایل‌های «Markdown» معرفی کرده‌ایم.

1. الصاق URL-ها به فایل‌های زبان Markdown
2. اعتبار سنجی فایل‌های Markdown

الصاق URL به فایل های زبان Markdown

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

برای مثال، اگر آدرس URL فرضی مانند https://someurl.com  را به فایل Markdown وارد کنیم. سینتکس آدرس مورد نظر به صورت خودکار، درون این فایل به [Title](https://someurl.com)  تبدیل می‌شود.

برای اعمال این تنظیم، ابتدا وارد محیط گرافیکی تنظیمات شوید. سپس در بخش «Markdown» گزینه Editor را پیدا کرده و در این قسمت مقدار Paste URL As Formatted Link. Enabled  را بر روی smart  تنظیم کنید.

کد مربوط به این تنظیم در فایل «Settings.json» به شکل زیر نمایش داده می‌‌شود.

اعتبار سنجی فایل های Markdown

استفاده از تنظیم validate.enabled، باعث اعتبار سنجی فایل‌های Markdown می‌شود. همچنین این تنظیم درباره وجود داشتن بعضی از خطاهای رایج نیز اطلاع‌رسانی می‌کند. البته اگر وجود داشته باشند. به عنوان مثالی از این خطاها می‌توان به «لینک‌های خراب» (Broken Links) به صفحات یا تصاویری اشاره کرد که وجود ندارند.

برای اعمال این تنظیم، ابتدا وارد محیط گرافیکی تنظیمات شوید. سپس در بخش Markdown گزینه Validation. Enabled  را پیدا کرده و مقدار آن را بر روی true  تنظیم کنید.

کد مربوط به این تنظیم در فایل «Settings.json» به شکل زیر نمایش داده می‌‌شود.

جمع‌بندی

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

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