12 KiB
Використання редактора коду: освоєння VSCode.dev
Ласкаво просимо!
Цей урок проведе вас від основ до просунутого використання VSCode.dev — потужного веб-редактора коду. Ви навчитеся впевнено редагувати код, керувати проектами, відстежувати зміни, встановлювати розширення та співпрацювати як професіонал — усе це прямо з браузера, без необхідності встановлення.
Цілі навчання
До кінця цього уроку ви зможете:
- Ефективно використовувати редактор коду для будь-якого проекту, будь-де
- Легко відстежувати свою роботу за допомогою вбудованого контролю версій
- Персоналізувати та покращити свій робочий процес розробки за допомогою налаштувань редактора та розширень
Передумови
Щоб розпочати, зареєструйте безкоштовний GitHub акаунт, який дозволяє керувати репозиторіями коду та співпрацювати з людьми по всьому світу. Якщо у вас ще немає акаунта, створіть його тут.
Чому варто використовувати веб-редактор коду?
Редактор коду, як-от VSCode.dev, є вашим командним центром для написання, редагування та управління кодом. Завдяки інтуїтивно зрозумілому інтерфейсу, безлічі функцій і миттєвому доступу через браузер, ви можете:
- Редагувати проекти на будь-якому пристрої
- Уникнути складнощів із встановленням
- Миттєво співпрацювати та вносити зміни
Коли ви освоїте VSCode.dev, ви будете готові виконувати завдання з програмування будь-де і будь-коли.
Початок роботи з VSCode.dev
Перейдіть на VSCode.dev — без встановлення, без завантажень. Вхід через GitHub відкриває повний доступ, включаючи синхронізацію ваших налаштувань, розширень і репозиторіїв. Якщо буде запропоновано, підключіть свій акаунт GitHub.
Після завантаження ваш робочий простір виглядатиме так:
, ⚙️ (Налаштування), файли, контроль версій тощо.
- Бічна панель: Змінює контекст залежно від вибраної іконки на панелі активності (за замовчуванням Explorer для відображення файлів).
- Область редактора/коду: Найбільша секція праворуч — тут ви будете редагувати та переглядати код.
Клацніть по іконках, щоб дослідити функції, але поверніться до Explorer, щоб залишатися на місці.
Відкриття репозиторію GitHub
Метод 1: Через редактор
-
Перейдіть на VSCode.dev. Натисніть "Open Remote Repository."
.
 і натисніть Enter.
Якщо все пройшло успішно, ви побачите весь проект, готовий до редагування!
Метод 2: Миттєво через URL
Перетворіть будь-який URL репозиторію GitHub, щоб відкрити його прямо у VSCode.dev, замінивши github.com на vscode.dev/github.
Наприклад:
- GitHub:
https://github.com/microsoft/Web-Dev-For-Beginners - VSCode.dev:
https://vscode.dev/github/microsoft/Web-Dev-For-Beginners
Ця функція значно прискорює доступ до будь-якого проекту.
Редагування файлів у вашому проекті
Коли ваш репозиторій відкрито, ви можете:
1. Створити новий файл
- У бічній панелі Explorer перейдіть до потрібної папки або використовуйте кореневу.
- Натисніть іконку ‘New file ...’.
- Назвіть файл, натисніть Enter, і ваш файл з’явиться миттєво.
 і видалення (червоний).
![View changes](../images/working-tree.png зміни, натиснувши+поруч із файлами, щоб підготувати їх до фіксації. - Скасувати небажані зміни, натиснувши іконку скасування.
- Введіть чітке повідомлення про фіксацію, потім натисніть галочку, щоб зафіксувати та відправити.
Щоб повернутися до вашого репозиторію на GitHub, виберіть меню гамбургер у верхньому лівому куті.
![Stage & commit changes](../images/edit-vscode.dev З розширеннями
Розширення дозволяють додавати мови, теми, налагоджувачі та інструменти продуктивності до VSCode.dev — роблячи ваше програмування простішим і цікавішим.
Перегляд і управління розширеннями
-
Натисніть іконку Extensions на панелі активності.
-
Знайдіть розширення у полі 'Search Extensions in Marketplace'.
![Extension details](../images/extension-details:
- Installed: Усі розширення, які ви додали
- Popular: Популярні в індустрії
- Recommended: Рекомендовані для вашого робочого процесу
![View extensions](
1. Встановлення розширень
-
Введіть назву розширення в пошуку, натисніть на нього та перегляньте деталі в редакторі.
-
Натисніть синю кнопку Install у бічній панелі або в основній області коду.
![Install extensions](../images/install-extension 2. Налаштування розширень
-
Знайдіть встановлене розширення.
-
Натисніть Gear icon → виберіть Extension Settings, щоб налаштувати поведінку на свій смак.
![Modify extension settings](../images/extension-settings 3. Управління розширеннями Ви можете:
-
Disable: Тимчасово вимкнути розширення, залишивши його встановленим
-
Uninstall: Повністю видалити, якщо більше не потрібно
Знайдіть розширення, натисніть Gear icon і виберіть ‘Disable’ або ‘Uninstall’, або використовуйте сині кнопки в області коду.
Завдання
Перевірте свої навички: Створіть сайт-резюме за допомогою vscode.dev
Додаткове вивчення та самостійна робота
- Глибше ознайомтеся з офіційною документацією VSCode Web.
- Досліджуйте розширені функції робочого простору, комбінації клавіш і налаштування.
Тепер ви готові програмувати, створювати та співпрацювати — будь-де, на будь-якому пристрої, використовуючи VSCode.dev!
Відмова від відповідальності:
Цей документ було перекладено за допомогою сервісу автоматичного перекладу Co-op Translator. Хоча ми прагнемо до точності, звертаємо вашу увагу, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникли внаслідок використання цього перекладу.