leestott
a2fda673a6
|
1 week ago | |
|---|---|---|
| .. | ||
| README.md | 1 week ago | |
| assignment.md | 1 week ago | |
README.md
Використання редактора коду
Цей урок охоплює основи використання VSCode.dev, веб-редактора коду, щоб ви могли вносити зміни до свого коду та брати участь у проєкті без необхідності встановлювати щось на свій комп'ютер.
Цілі навчання
У цьому уроці ви навчитеся:
- Використовувати редактор коду в проєкті
- Відстежувати зміни за допомогою системи контролю версій
- Налаштовувати редактор для розробки
Попередні вимоги
Перед початком вам потрібно створити обліковий запис на GitHub. Перейдіть на GitHub і створіть обліковий запис, якщо у вас його ще немає.
Вступ
Редактор коду — це важливий інструмент для написання програм і співпраці над існуючими проєктами. Як тільки ви зрозумієте основи редактора та навчитеся використовувати його функції, ви зможете застосовувати ці знання під час написання коду.
Початок роботи з VSCode.dev
VSCode.dev — це редактор коду у веб-браузері. Вам не потрібно нічого встановлювати, щоб ним користуватися, так само як відкривати будь-який інший вебсайт. Щоб почати роботу з редактором, відкрийте наступне посилання: https://vscode.dev. Якщо ви не ввійшли до GitHub, дотримуйтесь інструкцій для входу або створення нового облікового запису, а потім увійдіть.
Після завантаження редактор має виглядати приблизно так:
Є три основні секції, починаючи з крайньої лівої сторони і рухаючись вправо:
- Панель активності, яка містить кілька іконок, таких як лупа 🔎, шестерня ⚙️ та інші.
- Розширена панель активності, яка за замовчуванням відкриває Провідник, називається бічною панеллю.
- І, нарешті, область коду праворуч.
Натисніть на кожну з іконок, щоб відобразити різні меню. Після цього натисніть на Провідник, щоб повернутися до початкового вигляду.
Коли ви почнете створювати код або змінювати існуючий, це буде відбуватися у найбільшій області праворуч. Ви також будете використовувати цю область для перегляду існуючого коду, що зробите далі.
Відкриття репозиторію GitHub
Перше, що вам потрібно зробити, — це відкрити репозиторій GitHub. Існує кілька способів відкриття репозиторію. У цьому розділі ви побачите два різні способи, як можна відкрити репозиторій, щоб почати працювати над змінами.
1. За допомогою редактора
Використовуйте сам редактор, щоб відкрити віддалений репозиторій. Якщо ви перейдете на VSCode.dev, ви побачите кнопку "Open Remote Repository":
Ви також можете скористатися командною палітрою. Командна палітра — це поле введення, де ви можете ввести будь-яке слово, яке є частиною команди або дії, щоб знайти потрібну команду для виконання. Використовуйте меню у верхньому лівому куті, потім виберіть View, а потім Command Palette, або скористайтеся наступним комбінацією клавіш: Ctrl-Shift-P (на MacOS — Command-Shift-P).
Після відкриття меню введіть open remote repository, а потім виберіть перший варіант. З'являться кілька репозиторіїв, до яких ви належите або які ви відкривали раніше. Ви також можете використати повну URL-адресу GitHub, щоб вибрати один із них. Використайте наступну URL-адресу та вставте її у поле:
https://github.com/microsoft/Web-Dev-For-Beginners
✅ Якщо все пройшло успішно, ви побачите всі файли цього репозиторію, завантажені у текстовий редактор.
2. Використання URL-адреси
Ви також можете використовувати URL-адресу безпосередньо для завантаження репозиторію. Наприклад, повна URL-адреса поточного репозиторію — https://github.com/microsoft/Web-Dev-For-Beginners, але ви можете замінити домен GitHub на VSCode.dev/github і завантажити репозиторій безпосередньо. Отримана URL-адреса буде https://vscode.dev/github/microsoft/Web-Dev-For-Beginners.
Редагування файлів
Після того, як ви відкрили репозиторій у браузері/vscode.dev, наступним кроком буде внесення оновлень або змін до проєкту.
1. Створення нового файлу
Ви можете створити файл всередині існуючої папки або в кореневій директорії/папці. Щоб створити новий файл, відкрийте місце/директорію, куди ви хочете зберегти файл, і виберіть іконку 'New file ...' на панелі активності (ліворуч), дайте йому назву і натисніть Enter.
2. Редагування та збереження файлу в репозиторії
Використання vscode.dev корисне, коли вам потрібно швидко оновити свій проєкт без завантаження будь-якого програмного забезпечення локально.
Щоб оновити код, натисніть іконку 'Explorer', також розташовану на панелі активності, щоб переглянути файли та папки в репозиторії.
Виберіть файл, щоб відкрити його в області коду, внесіть зміни та збережіть.
Після завершення оновлення проєкту виберіть іконку source control, яка містить усі нові зміни, які ви внесли до репозиторію.
Щоб переглянути зміни, які ви внесли до проєкту, виберіть файл(и) у папці Changes на розширеній панелі активності. Це відкриє 'Робоче дерево', де ви зможете візуально побачити зміни, внесені до файлу. Червоний колір показує видалення з проєкту, а зелений — додавання.
Якщо ви задоволені внесеними змінами, наведіть курсор на папку Changes і натисніть кнопку +, щоб підготувати зміни до коміту. Підготовка означає підготовку ваших змін для їхнього коміту до GitHub.
Якщо ж ви не задоволені деякими змінами і хочете їх скасувати, наведіть курсор на папку Changes і виберіть іконку undo.
Потім введіть commit message (Опис змін, які ви внесли до проєкту), натисніть іконку check, щоб закомітити та відправити зміни.
Після завершення роботи над проєктом виберіть іконку hamburger menu у верхньому лівому куті, щоб повернутися до репозиторію на github.com.
Використання розширень
Встановлення розширень у VSCode дозволяє додавати нові функції та налаштовувати середовище розробки у вашому редакторі для покращення робочого процесу. Ці розширення також допомагають додати підтримку для кількох мов програмування і часто є або загальними розширеннями, або мовно-орієнтованими.
Щоб переглянути список усіх доступних розширень, натисніть іконку Extensions на панелі активності та почніть вводити назву розширення у текстовому полі з написом 'Search Extensions in Marketplace'.
Ви побачите список розширень, кожне з яких містить назву розширення, ім'я видавця, короткий опис, кількість завантажень та рейтинг у вигляді зірок.
Ви також можете переглянути всі раніше встановлені розширення, розширення, популярні серед більшості розробників, у папці Popular, а також рекомендовані розширення для вас — або від користувачів у тому ж робочому просторі, або на основі ваших нещодавно відкритих файлів — у папці Recommended.
1. Встановлення розширень
Щоб встановити розширення, введіть його назву у поле пошуку та натисніть на нього, щоб переглянути додаткову інформацію про розширення в області коду, як тільки воно з'явиться на розширеній панелі активності.
Ви можете натиснути синю кнопку встановлення на розширеній панелі активності, щоб встановити розширення, або скористатися кнопкою встановлення, яка з'являється в області коду після вибору розширення для завантаження додаткової інформації.
2. Налаштування розширень
Після встановлення розширення вам може знадобитися змінити його поведінку та налаштувати його відповідно до ваших уподобань. Для цього виберіть іконку Extensions, і цього разу ваше розширення з'явиться у папці Installed, натисніть на Gear icon і перейдіть до Extensions Setting.
3. Управління розширеннями
Після встановлення та використання розширення vscode.dev пропонує варіанти управління розширенням залежно від різних потреб. Наприклад, ви можете:
-
Вимкнути: (Ви тимчасово вимикаєте розширення, коли більше не потребуєте його, але не хочете повністю видаляти)
Виберіть встановлене розширення на розширеній панелі активності > натисніть Gear icon > виберіть 'Disable' або 'Disable (Workspace)' АБО відкрийте розширення в області коду та натисніть синю кнопку Disable.
-
Видалити: Виберіть встановлене розширення на розширеній панелі активності > натисніть Gear icon > виберіть 'Uninstall' АБО відкрийте розширення в області коду та натисніть синю кнопку Uninstall.
Завдання
Створіть вебсайт-резюме за допомогою vscode.dev
Огляд та самостійне навчання
Дізнайтеся більше про VSCode.dev та його інші функції.
Відмова від відповідальності:
Цей документ був перекладений за допомогою сервісу автоматичного перекладу Co-op Translator. Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критично важливої інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.