Встановлення та налаштування Visual Studio Code
У цьому матеріалі ми розповімо, як встановлювати Visual Studio Code, редактор коду для кросс-платформної розробки програм.
Він схожий на звичайний текстовий редактор, але в ньому є додаткові інструменти та функції, які стануть у нагоді розробникам.
Це один із найзручніших і найпопулярніших редакторів коду. До того ж Visual Studio Code пропонує широкі можливості для підстроювання під ваші потреби: там можна налаштовувати власні гарячі клавіші, підключати файли конфігурації, для нього є багато плагінів. Тому на нашому курсі ми користуватимемося саме ним.
Де завантажити
Завантажити Visual Studio Code можна з офіційного сайту: https://code.visualstudio.com/download. Там ви знайдете версії для основних операційних систем.
Як і більшість його аналогів, Visual Studio Code є безкоштовним.
![](https://cdn.cases.media/image/wide/5563205c-a067-4e62-89aa-e33603890ed4.png)
Як встановити
Коли інсталяційний файл завантажиться, запустіть його. Інсталятор запропонує вам прийняти умови ліцензійної угоди, після чого відкриється таке вікно:
![](https://cdn.cases.media/image/wide/10d5f8b7-b105-41b6-99be-abccefb1c277.png)
Ми рекомендуємо поставити галочки у всіх пунктах.
Після цього натисніть кнопку «Далі» та запустіть інсталяцію.
Після завершення установки редактор запуститься, і ви побачите його інтерфейс.
![](https://cdn.cases.media/image/wide/c905c6eb-ae3a-4d5c-b8a6-199e14b92584.png)
Як підключити плагіни
У Visual Studio Code можна підключати плагіни. Це розширення, які дозволяють працювати з додатковими типами файлів, перевіряти помилки, прискорювати написання коду тощо. Розробляють плагіни самі програмісти, яким не вистачає якихось функцій, тому їх існує безліч. Більшість із них безкоштовні.
Шукати плагіни потрібно у Visual Studio Marketplace: https://marketplace.visualstudio.com/vscode
Давайте познайомимося з деякими з них і встановимо у свій редактор.
HTMLHint
https://marketplace.visualstudio.com/items?itemName=HTMLHint.vscode-htmlhint
Валідатор розмітки. Перевіряє код HTML на наявність синтаксичних помилок.
![](https://cdn.cases.media/image/wide/b774bcfa-1f4d-48f5-935d-854e4d2e7714.png)
CSS Peek
https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek
При роботі з HTML показує у спливаючому вікні властивості CSS. Це значно полегшує роботу: можна шукати необхідну властивість у великому CSS-файлі.
![](https://cdn.cases.media/image/original/3332657b-c390-4704-b1c4-c7048a154f0b.gif)
stylelint
https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint
Допомагає уникати синтаксичних помилок у коді таблиць стилів на чистому CSS та з препроцесорами SASS та Less, а також дотримуватися загальноприйнятих стандартів.
![](https://cdn.cases.media/image/wide/50ab715f-9127-45a4-a7c3-4ad1e005c130.png)
Error Lens
https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens
Показує помилки прямо в рядках коду в реальному часі.
![](https://cdn.cases.media/image/wide/c213784e-a856-4b1e-8294-202ae8a6c24e.png)
Live Server
https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
Показує результати обробки коду в реальному часі — не потрібно постійно перезавантажувати сторінку, щоб побачити зміни.
![](https://cdn.cases.media/image/original/d6bd3729-5f10-445e-8d8b-e147cb326e91.gif)
Prettier
https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
Автоматично форматує код згідно із жорстко заданими правилами.
![](https://cdn.cases.media/image/original/4ee2d602-849e-4c7d-a4af-65b90d7a91b6.gif)
Path Intellisense
https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense
Нагадує шлях до файлів. Це прискорює роботу, тому що не потрібно шукати потрібні файли вручну.
![](https://cdn.cases.media/image/original/3b804f0a-1a24-4056-a0e0-084bc85f60cb.gif)
Indent Rainbow
https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow
Розфарбовує тло відступу перед текстом, чергуючи різні кольори на кожному кроці. Це спрощує читання і сприйняття коду, адже рівень вкладеності стає більш наочним.
![](https://cdn.cases.media/image/wide/abbd30ca-495b-4763-9097-2babd50ab35c.png)