VS Code

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

Установка Visual Studio Code 

1. Перейти  на офіційний сайт і завантажити інсталяційний файл.


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



Інтерфейс програми

Ліва панель управління включає в себе 5 основних вкладок: 

  • «Провідник», 
  • «Пошук», 
  • «Система управління версіями», 
  • «Запуск коду»
  • «Розширення». 

Перша  вкладка надає користувачеві можливість переглядати вміст проекту і швидко переміщатися всередині нього.

Система управління версіями - призначена для взаємодії з git
Запустити і перевірити працездатність коду можна в наступній вкладці:

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



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



Плагіни для веб-розробки

Встановити  плагіни можна у настроюваннях, викликавши їх клавіатурною комбінацією Ctrl+Shft+X і у полі "Пошуку розширень" ввести  назви плагінів:

  1. Emmet
  2. Color Highlighter - Подсвічує HTML-кольори
  3. Debugger for Chrome - Інтеграція з відлагоджувачем Google Chrome або іншими відлагоджувачами, що підтримують його протокол
  4. Project Manager - Менеджер проєктів для VS Code
  5. Live Server - плагін, який вміє створювати локальний сервер і автоматично оновлює  веб-сторінку при редагуванні.
  6. Auto Complete Tag: Auto Close Tab - вміє закривати теги не тільки в html, а й в багатьох інших мовах. Auto Rename Tag - змінює закриває елемент автоматично, якщо перейменувати відкриває.
  7. Image Preview -  дозволяє швидко працювати з зображеннями в коді.
  8. Material Theme - найпопулярніша тема для редактора
  9. Prettier автоформатування коду, авто вирівнювання відступів в HTML, CSS, JS
  10. Material Icon Theme - гарні іконки