Налаштування VS Code для розробки JavaScript

Visual Studio Code або просто VS Code - це безкоштовний, популярний текстовий редактор, що має безліч доповнень, який в першу чергу призначений для створення і налагодження сучасних веб- і хмарних додатків.

Розроблений він компанією Microsoft і доступний для операційних систем Windows, MacOS та Linux.

Поширюється програма безкоштовно, вихідний код її доступний на GitHub.

VS Code підтримує велику кількість мов програмування, включає відладчик, засоби для роботи з Git, підсвічування синтаксису, технологію автодоповнення IntelliSense, інструменти для рефакторингу, термінал і багато іншого.

VS Code є досить гнучким інструментом, що розширюється за допомогою плагінів, доступних на Visual Studio Marketplace. Відкрити панель з розширеннями у програмі можна за допомогою комбінації клавіш Ctrl+Shift+X .

Плагінів для Visual Studio Code дуже багато, але в рамках цієї статті розглянемо лише найпопулярніші з них. У VS Code вже вбудований такий плагін як Emmet. Якщо ви не знайомі з ним, він призначений для швидкого набору коду. Додатково встановлювати його не потрібно.

Установка VS Code

Для встановлення VS Code на комп'ютер потрібно перейти на цей веб-сайт. Після цього на сторінці вибрати вашу операційну систему та натиснути на значок "Завантаження". Після завершення завантаження програми встановити її собі на комп'ютер.

Щоб краще орієнтуватися в програмі, ви можете встановити мовний пакет для російської мови. Для цього відкрийте панель «Розширення» ( Ctrl+Shift+X ) і введіть текст «Russian Language Pack for Visual Studio Code». Після цього виберіть його в результатах пошуку та встановіть його.

У Visual Studio Code є безліч різних плагінів крім мовних пакетів. Призначені вони розширення функціональності цього редактора. Всі плагіни для цього редактора розміщені на Marketplace.

Загальне налаштування VS Code

VS Code містить велику кількість налаштувань, за допомогою яких ви можете налаштувати цей редактор під себе.

Зміна налаштувань у VS Code здійснюється у відповідному вікні. Відкрити його можна кількома способами:

• через комбінацію клавіш Ctrl+, ;
• через пункт меню "Файл -> Налаштування -> Параметри" (у версії англійською мовою "File -> Preferences -> Settings");
• натиснути на значок шестерні і вибрати в меню пункт «Параметри» (Settings).

Список параметрів, які користувачі найчастіше налаштовують:

• editor.tabsize - кількість прогалин при табуляції;
• editor.insertSpaces - чи вставляти пробіли при натисканні Tab;
• editor.detectIndentation - чи потрібно параметри "#editor.tabsize" та "editor.insertSpaces" визначати автоматично при відкритті файлу на основі його вмісту;
• editor.wordWrap - керує тим, як слід переносити рядки;
• editor.fontSize – розмір шрифту в пікселях;
• editor.mouseWheelZoom - чи потрібно включати зміну розміру шрифту в редакторі при натиснутій клавіші Ctrl і рух колесика миші;
• editor.minimap.enabled - включає або вимикає відображення міні-карти;
• editor.formatOnSave - чи виконувати автоматичне форматування файлу за його збереження;
• workbench.startupEditor - керує тим, що відображатиметься під час запуску, якщо вміст редактора не було відновлено з попереднього сеансу;
• files.insertFinalNewline - якщо цей параметр увімкнено, то при збереженні файлу в його кінець вставляється порожній рядок;
• files.trimFinalNewlines - якщо цей параметр активний, то при збереженні файлу будуть видалені всі порожні рядки, що йдуть за останнім наприкінці файлу;
• files.trimTrailingWhitespace - якщо цей параметр увімкнено, то при збереженні файлу будуть видалені всі пробілові символи на кінцях рядків;
• files.autoSave – для включення автозбереження файлів;
• terminal.integrated.cwd - дозволяє задати шлях явного запуску, яким буде запущений термінал;
• telemetry.enableTelemetry - включає або відключає надсилання відомостей про використання та помилки до веб-служби Майкрософт;
• telemetry.enableCrashReporter - дозволяє надсилати звіти про збої до веб-служби Майкрософт;

Змінювати настройки можна як глобально, і безпосередньо для поточного проекту. Зміна глобальних налаштувань здійснюється у вікні "Параметри" на вкладці "Користувач". Ці налаштування зберігаються у файлі «settings.json». Відкрити його можна, натиснувши значок «Відкрити параметри (JSON)».

Приклад файлу "settings.json":

{ "editor.wordWrap": "wordWrapColumn", "editor.wordWrapColumn": 120, "editor.minimap.enabled": false, "editor.formatOnSave": true, "editor.tabSize": 2, "editor.detectIndentation" : false, "editor.fontSize": 17, "editor.mouseWheelZoom": true, "workbench.startupEditor": "none", "files.insertFinalNewline": true, "files.trimFinalNewlines": true, "files.trimTrailingWhite : true, "telemetry.enableTelemetry": false, "telemetry.enableCrashReporter": false, "files.autoSave": "afterDelay", "files.autoSaveDelay": 10000 }

До речі, змінювати настройки можна просто за допомогою редагування цього файлу.

Збереження налаштувань для робочої директорії виконується у спеціальний файл "settings.json", який буде додано до папки ".vscode".Налаштування параметрів для робочої директорії (проекту) також можна виконати просто за допомогою редагування цього файлу.

Налаштування VS Code для HTML та CSS

Visual Studio Code забезпечує базову підтримку при написанні HTML та CSS із коробки. Є підсвічування синтаксису, розумні доповнення з IntelliSense і форматування, що настроюється. VS Code також має чудову підтримку Emmet.

Навіщо потрібний Emmet? Він дає змогу дуже швидко писати код.

Наприклад, Emmet абревіатура ul>li*3>span.item-$ після натискання клавіші Tab створить наступний код:

У CSS абревіатура Emmet як dn створить код display: none.

VS Code має вбудовані засоби форматування коду. Можна настроїти параметри форматування в налаштуваннях. Знаходяться вони в розділах "Розширення -> HTML" та "Розширення -> CSS".

Комбінація клавіш для форматування в VS Code: Shift+Alt+F .

Функціональність VS Code під час роботи з HTML та CSS можна покращити за допомогою розширень.

Ось перелік деяких із них:

• Auto Rename Tag – автоматично змінює ім'я тега, що закриває, при перейменуванні відкривається;
• Auto Close Tag – автоматично додає закриває HTML/XML тег при введенні закриває дужки тега, що відкривається (крім HTML, це доповнення додає цю можливість в JavaScript і багато інших мов);
• HTMLHint - плагін для статичного аналізу HTML коду;
• HTML CSS Support – підтримка CSS для документів HTML;
• IntelliSense for CSS class names in HTML - плагін для пропозиції варіантів завершення імені CSS класу HTML на основі визначень, знайдених ним у вашому робочому просторі;
• Autoprefixer - для автоматичного додавання CSS властивостей із префіксами;
• CSS Peek - дозволяє переглянути властивості, прикріплені до класу або ідентифікатору без перемикання на файл CSS, в якому вони описані;
• Prettier – Code formatter – для форматування коду (HTML, CSS, JavaScript та ін.);

VS Code має можливість, яка дозволяє згортати області CSS коду укладені між /*#region*/ та /*#endregion*/ :

Налаштування VS Code для розробки JavaScript

Розробку веб-проекту в Windows 10 можна ввести не тільки з використанням програм, призначених тільки для цієї операційної системи, але і за допомогою WSL (Linux). Якщо вам подобається Linux і ви хочете його використовувати, Windows 10 дозволяє вам це зробити з коробки (тобто безпосередньо з дистрибутива). У наступному розділі наведено інструкцію з встановлення WSL у Windows 10 та налаштування Visual Studio Code для її використання як середовище розробки.

Крім цього, ОС Linux у більшості випадків - це система, яка потім у вас буде встановлена ​​на продакшені. А це означає, що ви отримаєте оточення як на сервері або ближче до цього.

Якщо ви не бажаєте використовувати WSL як середовище розробки або працюєте в іншій операційній системі, то в цьому випадку можете відразу ж перейти до розділу «Встановлення та налаштування ES Lint».

Як у Windows 10 встановити WSL і використовувати її у VS Code

Коротко про підсистему Windows для Linux (WSL). У Windows 10 з'явилася можливість здійснювати веб-розробку у середовищі з урахуванням Linux. Для цього вам необхідно просто увімкнути компонент Windows 10 "Підсистема Windows для Linux (WSL)" і встановити з Microsoft Store "улюблений" дистрибутив Linux (наприклад, Ubuntu 18.04).Підсистема WSL з'явилася в Windows 10, починаючи з оновлення Anniversary Update (1607), а версія 2004 цієї ОС вже включає WSL 2.

Більш детально процес встановлення WSL описаний у цій статті, а саме у розділах «Увімкнення підсистеми Windows для Linux» та «Встановлення програми Ubuntu». Якщо ви ще не читали цю статтю, то можете це зробити, перейшовши за наведеним вище посиланням.

Встановлення розширення "Remote - WSL" в VS Code. Для використання WSL як середовище для повної розробки безпосередньо з VS Code необхідно встановити розширення «Remote – WSL».

Це дозволить вам ввести веб-розробку прямо в середовищі на основі Linux, використовувати специфічні для неї набори інструментів та утиліт, а також запускати та налагоджувати свої програми в Linux, не виходячи з Windows.

Це розширення дозволить виконувати команди безпосередньо у WSL, а також редагувати файли, розташовані у WSL або в змонтованій файловій системі Windows (локальні диски знаходяться в /mnt) не турбуючись про проблеми сумісності.

Після встановлення розширення та перезавантаження редактора VS Code у вас з'явиться індикатор WSL у нижньому лівому куті вікна програми.

При натисканні на нього будуть показані команди Remote-WSL. Використовуючи їх, ви можете відкрити нове вікно VS Code, в якому як середовище використовуватиметься WSL. При цьому команда Remote-WSL: New Window виконає це з використанням дистрибутива Linux, який у вас призначений за замовчуванням, а команда Remote-WSL: New Window using Distro. » - Використовуючи конкретний дистрибутив Linux зі встановлених.

Версія дистрибутива Linux, яка зараз використовується у WSL відображається в індикаторі таким чином:

Встановлення та налаштування ESLint

ESLint – це інструмент, який дуже бажано встановити в систему, якщо ви розробляєте код JavaScript. Він показуватиме вам помилки в коді, а також направлятиме вас при його написанні так, щоб він був витриманий в єдиному стилі.

Перед тим, як переходити до установки ESLint, спочатку встановимо в ОС «Node.js v12.x».

У Ubuntu це здійснюється так:

curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash - sudo apt-get install -y nodejs

Вводитимемо ці команди через термінал VS Code. Відкрити його можна за допомогою комбінації клавіш Ctrl+Shift+ або клікнувши в головному меню на пункт «Термінал -> Створити термінал».

Перевірити номер встановленої версії «Node.js» можна так:

Після встановлення "Node.js" створимо папку для проекту у файловій системі ОС, а потім відкриємо її за допомогою VS Code.

Створення проекту зазвичай починається з його ініціалізації за допомогою npm. Цей процес можна виконати за допомогою наступної команди:

В результаті виконання цієї команди у вас з'явиться файл "package.json". Цей файл, крім інформації про проект та інші речі, ще міститиме набір залежностей для цього проекту. Маючи цей файл, ми зможемо за необхідності дуже швидко розгорнути проект на будь-якому іншому комп'ютері.

Тепер перейдемо до встановлення ESLint та деяких інших npm пакетів у проект:

sudo npm install --save-dev eslint eslint-config-airbnb-base eslint-plugin-import

Ключ --save-dev використовується для того, щоб зробити запис про ці пакети в package.json. Цей ключ додасть їх у секцію devDependencies.

Встановлення npm пакетів здійснюється в папку "node_modules" цього проекту.

Як стиль коду ми будемо використовувати Airbnb . Цей посібник використовується багатьма відомими організаціями і має дуже велику кількість зірок на GitHub.

Для того, щоб можна було використовувати Airbnb для розширення базової конфігурації ESLint, ми встановили пакети eslint-config-airbnb-base (без залежностей від React) та eslint-plugin-import (для підтримки синтаксису імпорту/експорту ES6+ та запобігання проблемам з неправильним написанням шляхів до файлів та імен імпорту).

Після закінчення завантаження пакетів приступимо до інтегрування ESLint у Visual Studio Code. Здійснюється це за допомогою встановлення розширення з однойменною назвою.

Для того, щоб ESLint працював необхідно створити конфігураційний файл. Це можна виконати як за допомогою команди ./node_modules/.bin/eslint --init (налаштування здійснюється через відповіді на запитання майстра), так і самостійно.

Конфігураційний файл необхідний для встановлення налаштувань, відповідно до яких ESLint здійснюватиме перевірку JavaScript коду.

Щоб зробити це самостійно, нам необхідно в корені проекту створити файл .eslintrc і додати до нього, наприклад, такі дані:

{ "env": { "browser": true, "es6": true }, "extends": "airbnb-base", "parserOptions": { "ecmaVersion": 6 } }

Ці дані будуть визначати наступні параметри для ESLint:

• env - це властивість визначає середовища, у яких JavaScript має працювати. Для фронтенда середовищем виступає браузер, тому додамо env властивість "browser": true . Властивість es6: true призначене для автоматичного включення синтаксису ES6.
• extends - призначений для вказівки конфігурації, за допомогою якої хочемо розширити загальну конфігурацію ESLint.Як значення extends вкажемо конфігурацію airbnb-base (без React). За потреби можна вказати не одну, а кілька конфігурацій. У цьому випадку кожна наступна конфігурація розширюватиме попередню. Тобто. якщо ми вкажемо якусь конфігурацію після airbnb-base , вона буде розширювати не загальну конфігурацію ESLint, а airbnb-base ;
• parserOptions - дозволяє встановити параметри мови JavaScript, які ми хочемо підтримувати. В даний час рекомендується використовувати при розробці проектів синтаксис ECMAScript 6. Вказання підтримки цієї версії здійснюється за допомогою ключа ecmaVersion значення 6. При необхідності ви можете вказати замість цієї іншу версію.

Якщо вам необхідно додатково лінтити помилки коду, розміщеного в тезі, то встановіть плагін eslint-plugin-html:

sudo npm install --save-dev eslint-plugin-html

Форматування коду JavaScript будемо виконувати за допомогою Prettier. Для правильної спільної роботи Prettier і ESLint встановимо такі пакети npm:

sudo npm install --save-dev prettier eslint-plugin-prettier eslint-config-prettier

Для того, щоб ESLint не переглядав певні папки і не видавав помилки, слід створити файл .eslintignore і прописати їх в ньому:

/.vscode /.git node_modules

Якщо у вас увімкнено стандартне форматування коду в VS Code при збереженні, то щоб як плагін для форматування js файлів застосовувався ESLint, слід до конфігураційного файлу «settings.json» додати наступне:

"editor.formatOnSave": true, // додати це "[javascript]": { "editor.defaultFormatter": "dbaeumer.vscode-eslint" }, "eslint.format.enable": true

Якщо ви хочете, щоб при збереженні файлів форматувалися тільки js файли, то editor.formatOnSave необхідно встановити значення false , а true цього ключа тільки в секції "[javascript]" :

"editor.formatOnSave": false, "[javascript]": { "editor.formatOnSave": true, "editor.defaultFormatter": "dbaeumer.vscode-eslint" }, "eslint.format.enable": true

Тепер ESlint перевірятиме JavaScript код і показуватиме в ньому помилки та попередження. Вони позначатимуться з використанням хвилястих ліній.

Результат перевірки JavaScript коду ESLint:

Додаткове налаштування VS Code

Ось ще деякий список плагінів для VS Code, які можуть розширити можливості Visual Studio Code для фронтенд розробки і не тільки:

• Project Manager – для зручного керування вашими проектами, незалежно від того, де вони розташовані;
• LiveServer – локальний сервер з можливістю автоматичного оновлення сторінок у браузері при їх зміні (запустити сервер можна за допомогою натискання на іконку Go Live у рядку стану або вибору пункту Open with Live Server в контекстному меню області редактора);
• Debugger for Chrome – застосовується для налагодження JavaScript коду серед редактора на основі браузера Chrome або будь-якого іншого, який підтримує протокол Chrome Debugger;
• Settings Sync – плагін для синхронізації налаштувань VS Code (зберігання налаштувань здійснюється на GitHub);
• Visual Studio IntelliCode – система, яка призначена для економії вашого часу, розміщуючи найчастіше використовувані елементи завершення для поточного контексту у верхній частині списку;
• TODO HighLight – для виділення TODO, FIXME та інших анотацій у коді;
• Version Lens – показує інформацію про версію пакета для npm, jspm, dub та dotnet ядра;
• GitLens – розширює можливості Git вбудованого в цей редактор (він дозволяє дуже просто зрозуміти чому та коли були змінені ті чи інші рядки коду, вивчити історію та розвиток кодової бази проекту та багато іншого).

Установка VS Code

Перший крок до початку роботи з VS Code – встановити його на свій комп'ютер.

1. Перейдіть на офіційний сайт VS Code: https://code.visualstudio.com/
2. Натисніть кнопку «Download» для операційної системи. Після завершення завантаження відкрийте файл інсталяції та дотримуйтесь інструкцій.
3. Після завершення інсталяції запустіть VS Code з меню програм або клацнувши значок на робочому столі.

Налаштування робочої області

Робоча область VS Code — це набір параметрів і конфігурацій, специфічних для проекту.

Коли ви відкриваєте робочу область, VS Code запам'ятовує відкриті вами файли та папки, встановлені вами розширення та налаштовані вами параметри.

Щоб налаштувати робочий простір у VS Code:

1. Відкрийте папку з файлами, з якими ви хочете працювати.
2. Натисніть File у верхньому меню, а потім виберіть Save Workspace As….
3. Дайте вашій робочій області ім'я та збережіть його.
4. Щоразу, коли ви відкриваєте VS Code у майбутньому, ви можете відкрити свій робочий простір, натиснувши «File», а потім вибравши «Open Workspace from File…».

Огляд інтерфейсу

Відкривши VS Code, ви побачите інтерфейс, який поділено на кілька частин:

1. Панель активності зліва містить значки для доступу до різних частин інтерфейсу.
2. Огляд допомагає отримати швидкий доступ до файлів та папок у вашому проекті. Також тут можна створювати/вилучати/перейменовувати файли та папки.
3. Область редактора посередині — це місце, де ви писатимете код.
4. Консольна панель для перегляду помилок, дебагу та введення команд (Bash, PowerShell).
5. Рядок стану показує кількість помилок та попереджень, поточну лінію та колонку в коді, мову програмування, а також дає швидкий доступ до плагінів.

Налаштування середовища

VS Code легко налаштовується і ви можете змінити практично все, що вам потрібно. Ось кілька налаштувань, які можна зробити, щоб змінити середовище програмування.

Зміна теми

Щоб змінити зовнішній вигляд VS Code, перейдіть в меню "File" і виберіть "Preference", а потім "Color Theme". Ви можете вибрати одну з багатьох вбудованих тем або встановити додаткові теми з магазину VS Code.

Зміна шрифту

Щоб змінити шрифт, що використовується в VS Code, перейдіть в меню "Файл", виберіть "Параметри", а потім "Параметри". У рядку пошуку введіть «Редактор: сімейство шрифтів» та виберіть параметр, щоб змінити шрифт.

Налаштування комбінацій клавіш

Щоб змінити сполучення клавіш, що використовуються в VS Code, перейдіть в меню "Файл", виберіть "Параметри", а потім "Сполучення клавіш". Ви можете шукати певні команди або переглядати список, щоб знайти команду, яку потрібно змінити.

Встановлення розширень

Однією з найбільших переваг VS Code є можливість розширення його функціональності за допомогою розширень. На ринку VS Code доступні тисячі розширень, починаючи від мовної підтримки та закінчуючи інструментами налагодження, темами та багатьом іншим. Щоб встановити розширення:

Перейдіть на вкладку «Розширення» на бічній панелі у лівій частині інтерфейсу.
Використовуйте рядок пошуку, щоб знайти розширення, яке потрібно встановити.
Натисніть кнопку "Встановити" для розширення.
Після встановлення розширення натисніть кнопку «Перезавантажити», щоб активувати його.

Висновок

Почати роботу з VS Code легко, і ви виявите, що це потужний та універсальний інструмент для всіх видів розробки. Чи пишіть ви код, працюєте з Git або налагоджуєте свої програми, VS Code пропонує функції, необхідні для продуктивної та ефективної роботи. З невеликою настройкою та допомогою розширень ви можете зробити VS Code по-справжньому своїм, адаптованим до ваших конкретних потреб та уподобань.

Як користуватись Visual Studio Code

Visual Studio Code – це один із найпопулярніших редакторів коду, розроблений корпорацією Microsoft. Він розповсюджується у безкоштовному доступі та підтримується всіма актуальними операційними системами: Windows, Linux та macOS. VS Code є звичайним текстовим редактором з можливістю підключення різних плагінів, що дає можливість працювати з різними мовами програмування для розробки будь-якого IT-продукту.

Незважаючи на таку високу популярність програми, її функціонал досі залишається не таким очевидним, через що багато користувачів віддають перевагу продукту конкурента, ніж VS Code. Щоб вирішити всі проблеми, що виникають під час роботи з Visual Studio Code, рекомендую ознайомитися з докладним гайдом налаштування цього редактора коду. У ньому я покажу, що VS Code – це потужний інструмент, яким може скористатися кожен.

Встановлення Visual Studio Code

З встановленням середовища не повинно виникнути жодних проблем, але давайте все ж таки проведемо невеликий лікнеп. Виконаємо кілька дій:

1. Переходимо на офіційний сайт та завантажуємо інсталяційний файл.
2. Наступним кроком запускаємо інсталятор і ставимо редактор коду на комп'ютер. У блоці «Виберіть додаткові завдання» рекомендую відзначити два пункти, що дозволяють запускати файли через меню, що випадає – так ви зможете швидко відкрити код у VS Code.

На цьому встановлення завершено. Тепер ми можемо використовувати редактор коду за призначенням. Зазвичай з цим не повинно виникнути жодних проблем, проте на слабких машинах запуск утиліти часто переривається. Вилікувати таку недугу можна за допомогою додавання нового значення до шляху ярлика. Для цього відкриємо його властивості через правий клік миші та у графі «Об'єкт» пропишемо --disable-gpu.

Готово! Тепер програма має працювати на будь-якому комп'ютері.

Інтерфейс Visual Studio Code

При першому запуску перед нами з'явиться вікно привітання, через яке можна отримати швидкий доступ до раніше запущених проектів або створити нові. Весь інтерфейс англійською мовою (всього в кілька кліків він перекладається російською, але про це трохи пізніше). Поки розберемося з інтерфейсом: відкриємо для прикладу файл з кодом, подивимося, як його ідентифікує програма без попередніх налаштувань, і розберемо кожен блок утиліти.

Запустити файл із кодом ми можемо через правий клік миші -> Відкрити за допомогою Code. Файл можна відкрити і в програмі: для цього у верхньому правому кутку вибираємо "File" і тиснемо "Open File ...". Після цього переходимо в потрібну директорію та вибираємо файл.

В результаті перед нами з'явиться вікно з кодом файлу. Давайте візуально розділимо інтерфейс на блоки і розглянемо кожний більш детально.

Перше, що впадає в око, – це блок коду, для якого відведено найбільше місця. Назва функцій та інше підсвічується різними кольорами.Тут же вказано шлях до файлу, а трохи вище розташовані вкладки-файли, якими можна переміщатися. За допомогою них ми можемо додавати не просто один файл із кодом, а цілий проект.

Наступний блок – ліва панель управління, що включає 5 основних вкладок: «Провідник», «Пошук», «Система управління версіями», «Запуск коду» і «Розширення». Перша надає користувачеві можливість переглядати вміст проекту та швидко переміщатися всередині нього.

Друга вкладка – пошук. Використовується для знаходження слів у документі. Він також може бути запущений за допомогою комбінації клавіш CTRL+SHIFT+F. Алгоритм використання досить простий – вводимо назву у пошук і дивимося результат.

Система керування версіями – призначена для взаємодії із git.

Запустити та перевірити працездатність коду ми можемо у наступній вкладці:

Ще одна важлива вкладка, за допомогою якої з Visual Studio Code можна зробити функціональну утиліту, це розширення. У ній знаходяться настановники для всіх популярних інструментів, що використовуються розробниками.

Наступний блок – нижній статус-бар. У ньому відображається загальна інформація про стан програми. Зверніть увагу, що VS Code автоматично визначає мову програмування та інформує нас про це.

І ще один розділ – права панель, що включає невеликий дисплей, який відображає код у зменшеному варіанті, а також дозволяє зручно скролити всередині нього. Тут ми можемо розділити вікно коду на кілька стовпців, а також закрити всі файли одним кліком – для цього використовуються дві верхні кнопки.

Як бачите, якщо пройтися інтерфейсом програми, то вона вже не здається такою складною.Щоб зробити все ще простіше, проведемо русифікацію всіх елементів інтерфейсу. Про те, як це зробити, поговоримо далі.

Русифікація Visual Studio Code

Щоб провести русифікацію програми, відкриваємо вкладку з розширеннями та прописуємо запит vscode-language-pack-ru. В результаті буде відображено новий елемент з кнопкою "Install" - клацаємо по ній і очікуємо завершення установки.

Перезавантажуємо програму і дивимося, що мова інтерфейсу була змінена російською:

Якщо ви захочете повернути англомовний інтерфейс, потрібно відкрити розділ з плагінами і видалити встановлений пакет з російською мовою.

Зовнішній вигляд

Ми можемо повністю змінити колірну схему утиліти. Щоб це зробити, скористаємося комбінацією клавіш CTRL+SHIFT+P і введемо запит theme. У списку виберемо «Параметри: Колірна тема».

У результаті з'явиться список можливих тем – наприклад візьмемо сонячну тему.

Після застосування теми інтерфейс набуде наступного вигляду:

Зверніть увагу, що це не весь список тем, ви можете встановити й інші. Для цього перейдіть у самий низ списку та виберіть «Встановити додаткові колірні теми…». Після цього в лівій частині з'явиться додатковий блок з доступними рішеннями кольорів.

Ось так ми можемо змінити зовнішній вигляд програми. Тепер давайте перейдемо до технічних моментів та розглянемо роботу найважливіших плагінів.

Управління проектами

За промовчанням Visual Studio Code підтримує роботу з кількома проектами, але переміщатися між ними не дуже комфортно. Для зручності зазвичай використовують плагін під назвою Project Manager. З його допомогою відкривається можливість переміщення між робочими областями лише в один клік.Установка відбувається через магазин розширень, про який ми говорили раніше. Після того, як менеджер проектів буде встановлений, у лівій панелі управління з'явиться нова вкладка для роботи з плагіном.

Тепер робота з проектами не повинна викликати жодних труднощів.

Автоформатування коду

Один із важливих етапів програмування – вміння приводити все до єдиного виду з правильними відступами. Для таких завдань VS Code є спеціальні плагіни, що дозволяють форматувати весь текстовий документ. Це такі розширення, як PHP-CS-Fixer для PHP, Prettier для JS/HTML/CSS та інші.

Розглянемо, як форматується код, написаний на JavaScript:

1. Візьмемо для прикладу функцію, відступи в якій збудовані випадковим чином.
2. Встановлюємо плагін Prettier через магазин розширень та відкриваємо документ, який потрібно відформатувати. Затискаємо комбінацію клавіш CTRL+SHIFT+P і вводимо запит Format Document.
3. Дивимося на код і бачимо, що він перетворився і набув акуратного вигляду.

Аналогічно ми можемо відформатувати код, написаний іншими мовами програмування. Для цього достатньо встановити необхідне розширення.

Автодоповнення

У популярних програмах, подібних до Visual Studio, вбудована функція автодоповнення, що допомагає завершити код. Наприклад, ви пишіть рядок коду, а середовище підказує, як його завершити. За допомогою цієї опції можна не тільки пригадати потрібну функцію, а й швидко написати код.

За промовчанням функція автодоповнення у Visual Studio Code доступна лише для деяких мов. Для інших мов програмування є додаткові пакети із закінченням «intellisense».

Подивитися, які пакети доступні, ви можете у магазині плагінів.

Рекомендую встановити PHP Intellisense, CSS Intellisense та Path Intellisense.

Управління Vim

Vim – це вільний текстовий редактор, який працює на основі vi. За умовчанням він встановлений на кожній операційній системі Unix. Крім того, він доступний і у Visual Studio Code. Для роботи з ним потрібно встановити розширення з аналогічною назвою:

Тепер ми можемо переміщатися файлом клавішами h, j, k, l, використовувати Esc і зберігати файл командою :w.

Налагодження коду

Для того, щоб запустити код у VS Code, нам потрібно скористатися одним із розширень. Наприклад, JavaScript підійде Debugger for Chrome. Дізнатися, яке розширення необхідне конкретної мови, можна через «Виконати» -> «Встановити додаткові відладчики…».

В результаті в лівій частині вікна буде відображено список доступних плагінів - знайдіть в ньому відповідний для вас і дотримуйтесь інструкцій.

Після того, як потрібний плагін буде встановлений, можна запускати налагодження коду. Для цього достатньо відкрити пункт "Виконати" та натиснути на кнопку "Запустити налагодження". Також це можна зробити за допомогою кнопки «F5».

За допомогою плагінів ми можемо налагодити код, написаний будь-якою мовою програмування.

Висновок

Сьогодні ми розібрали функціонал інструменту Visual Studio Code. Це середовище хороше як для професіоналів, але й новачків, вивчають основи програмування. Одна з переваг програми – мінімальна вимога до заліза: запустити програму можна практично на будь-якому комп'ютері.

Сподіваюся, що робота в VS Code більше не буде для вас проблемою, а на активні проекти чекає успіх. Успіхів!