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

Я вже давно використовую VS Code для створення веб сайтів. Мені подобається, що це дуже легкий, але в той же час дуже потужний редактор з величезною кількістю розширень. Завдяки величезній кількості налаштувань його можна легко налаштувати «під себе». Я використовую цей редактор для верстки веб-сторінок (HTML / CSS / SCSS) і програмування на JavaScript. Що не маловажно, у нього вбудована підтримка JavaScript и Node.js.

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

Отже, ви завантажили та встановили. Познайомимося із інтерфейсом.

Сторінка привітання

Visual Studio Code Welcome
Visual Studio Code Welcome

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

У розділі Start можна створити новий файл, відкрити папку або створити папку.

Секція Recent містить швидкі посилання на файли та папки, з якими ви працювали раніше.

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

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

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

Елементи інтерфейсу

Елементи інтерфейсу Visual Studio Code
Visual Studio Code Interface

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

Зліва вертикально розташувалися:

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

Вгорі список з полем пошуку – це панель команд, яка містить усі можливі команди для виконання в редакторі. За замовчуванням вона закрита та відкривається за допомогою комбінації клавіш Ctrl+Shift+P (для Windows).

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

Трохи нижче розташувалися вбудований термінал, разом із консолями налагодження, виведення та проблем. За замовчуванням вони зачинені. Швидко закрити/відкрити їх можна за допомогою комбінації клавіш Ctrl+.

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

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





Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься.