Visual Studio Code або просто VS Code - це безкоштовний, популярний редактор, що має безліч доповнень, який в першу чергу призначений для створення і налагодження сучасних веб-і хмарних додатків.
Розроблений він компанією Microsoft і доступний для операційних систем Windows, MacOS і Linux. Поширюється дана програма безкоштовно, вихідний код її доступний на GitHub.
VS Code підтримує велику кількість мов програмування, включає в себе відладчик, засоби для роботи з Git, підсвічування синтаксису, технологію автодоповнення IntelliSense, інструменти для рефакторинга, термінал і багато іншого.
Установка VS Code
Для установки VS Code на комп'ютер необхідно перейти на цей сайт. Після цього на сторінці вибрати потрібну операційну систему і натиснути на значок "Завантаження". Після завершення скачування програми встановити її на комп'ютер. Щоб краще орієнтуватися в програмі можна встановити мовний пакет для російської мови. Для цього потрібно відкрити панель «Розширення» (Ctrl + Shift + X) і ввести текст «Russian Language Pack for Visual Studio Code». Після цього обрати в результатах пошуку і встановити.
Налаштування VS Code для HTML і CSS
Visual Studio Code забезпечує базову підтримку при написанні HTML і CSS. Є підсвічування синтаксису, розумні доповнення з IntelliSense і настроюється форматування. VS Code також має відмінну підтримку Emmet.
Навіщо потрібен Emmet? Він дозволяє дуже швидко писати код. Наприклад, Emmet абревіатура ul> li * 3> span.item$ - після натискання кнопки Tab створить наступний код:
<ul >
<li><span class="item-1"></span></li>
<li><span class="item-2"></span></li>
<li><span class="item-3"></span></li>
</ul>
Плагіни для HTML і CSS
Встановити плагіни можна у настроюваннях, викликавши їх клавіатурною комбінацією Ctrl+Shft+X і у полі "Пошуку розширень" ввести назви плагінів:
- Emmet
- Color Highlighter - Подсвічує HTML-кольори
- Debugger for Chrome - Інтеграція з відлагоджувачем Google Chrome або іншими відлагоджувачами, що підтримують його протокол
- Project Manager - Менеджер проєктів для VS Code
- Live Server - плагін, який вміє створювати локальний сервер і автоматично оновлює веб-сторінку при редагуванні.
- Auto Complete Tag: Auto Close Tab - вміє закривати теги не тільки в html, а й в багатьох інших мовах. Auto Rename Tag - змінює закриває елемент автоматично, якщо перейменувати відкриває.
- Image Preview - дозволяє швидко працювати з зображеннями в коді.
- Material Theme - найпопулярніша тема для редактора
- Prettier автоформатування коду, авто вирівнювання відступів в HTML, CSS, JS
- Material Icon Theme - гарні іконки