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

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

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

Це один із найзручніших і найпопулярніших редакторів коду. До того ж Visual Studio Code пропонує широкі можливості для підстроювання під ваші потреби: там можна налаштовувати власні гарячі клавіші, підключати файли конфігурації, для нього є багато плагінів. Тому на нашому курсі ми користуватимемося саме ним.

Де завантажити

Завантажити Visual Studio Code можна з офіційного сайту: https://code.visualstudio.com/download. Там ви знайдете версії для основних операційних систем.

Як і більшість його аналогів, Visual Studio Code є безкоштовним.

Як встановити

Коли інсталяційний файл завантажиться, запустіть його. Інсталятор запропонує вам прийняти умови ліцензійної угоди, після чого відкриється таке вікно:

Ми рекомендуємо поставити галочки у всіх пунктах.

Після цього натисніть кнопку «Далі» та запустіть інсталяцію.

Після завершення установки редактор запуститься, і ви побачите його інтерфейс.

Як підключити плагіни

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

Шукати плагіни потрібно у Visual Studio Marketplace: https://marketplace.visualstudio.com/vscode

Давайте познайомимося з деякими з них і встановимо у свій редактор.

HTMLHint

https://github.com/htmlhint/HTMLHint

Валідатор розмітки. Перевіряє код HTML на наявність синтаксичних помилок.

CSS Peek

https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek

При роботі з HTML показує у спливаючому вікні властивості CSS. Це значно полегшує роботу: можна шукати необхідну властивість у великому CSS-файлі.

stylelint

https://stylelint.io/

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

Error Lens

https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens

Показує помилки прямо в рядках коду в реальному часі.

Live Server

https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

Показує результати обробки коду в реальному часі — не потрібно постійно перезавантажувати сторінку, щоб побачити зміни.

Prettier

https://marketplace.visualstudio.com/items?itemName=SimonSiefke.prettier-vscode

Автоматично форматує код згідно із жорстко заданими правилами.

Path Intellisense

https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense

Нагадує шлях до файлів. Це прискорює роботу, тому що не потрібно шукати потрібні файли вручну.


·
479
·
1
·
super 8
Головна