12 KiB
Использование редактора кода: освоение VSCode.dev
Добро пожаловать!
Этот урок проведет вас от основ до продвинутого использования VSCode.dev — мощного веб-редактора кода. Вы научитесь уверенно редактировать код, управлять проектами, отслеживать изменения, устанавливать расширения и сотрудничать как профессионал — все это прямо из браузера, без необходимости установки.
Цели обучения
К концу урока вы сможете:
- Эффективно использовать редактор кода для любого проекта, где бы вы ни находились
- Легко отслеживать свою работу с помощью встроенной системы контроля версий
- Настраивать и улучшать рабочий процесс разработки с помощью персонализации редактора и расширений
Предварительные требования
Чтобы начать, зарегистрируйтесь на бесплатный GitHub, который позволяет управлять репозиториями кода и сотрудничать с разработчиками по всему миру. Если у вас еще нет аккаунта, создайте его здесь.
Почему стоит использовать веб-редактор кода?
Редактор кода, такой как VSCode.dev, — это ваш командный центр для написания, редактирования и управления кодом. С интуитивно понятным интерфейсом, множеством функций и мгновенным доступом через браузер вы можете:
- Редактировать проекты на любом устройстве
- Избежать сложностей с установкой программ
- Мгновенно сотрудничать и вносить вклад
Освоив VSCode.dev, вы будете готовы решать задачи программирования в любое время и в любом месте.
Начало работы с VSCode.dev
Перейдите на VSCode.dev — без установки и загрузок. Вход через GitHub открывает полный доступ, включая синхронизацию настроек, расширений и репозиториев. Если потребуется, подключите свой аккаунт GitHub.
После загрузки ваш рабочий интерфейс будет выглядеть так:
Он состоит из трех основных разделов слева направо:
- Панель действий: Иконки, такие как 🔎 (Поиск), ⚙️ (Настройки), файлы, контроль версий и др.
- Боковая панель: Меняется в зависимости от выбранной иконки на панели действий (по умолчанию Проводник для отображения файлов).
- Область редактора/кода: Самая большая секция справа — здесь вы будете редактировать и просматривать код.
Кликните по иконкам, чтобы изучить функции, но вернитесь к Проводнику, чтобы не потерять место.
Открытие репозитория GitHub
Метод 1: Через редактор
-
Перейдите на VSCode.dev. Нажмите "Open Remote Repository".
Используйте Командную палитру (Ctrl-Shift-P или Cmd-Shift-P на Mac).
- Выберите опцию.
- Вставьте URL вашего репозитория GitHub (например,
https://github.com/microsoft/Web-Dev-For-Beginners) и нажмите 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. Создать новый файл
- В боковой панели Проводник перейдите в нужную папку или используйте корневую директорию.
- Нажмите на иконку ‘New file ...’.
- Назовите файл, нажмите Enter, и он появится мгновенно.
2. Редактировать и сохранять файлы
- Кликните на файл в Проводнике, чтобы открыть его в области кода.
- Внесите необходимые изменения.
- VSCode.dev автоматически сохраняет изменения, но вы можете нажать Ctrl+S для ручного сохранения.
3. Отслеживать и фиксировать изменения с помощью контроля версий
VSCode.dev имеет встроенную систему контроля версий Git!
-
Нажмите на иконку 'Source Control', чтобы увидеть все внесенные изменения.
-
Файлы в папке
Changesпоказывают добавления (зеленым) и удаления (красным).
-
Подготовьте изменения к фиксации, нажав
+рядом с файлами. -
Отмените ненужные изменения, нажав на иконку отмены.
-
Напишите понятное сообщение фиксации, затем нажмите галочку, чтобы зафиксировать и отправить изменения.
Чтобы вернуться к вашему репозиторию на GitHub, выберите значок меню в верхнем левом углу.
Работа с расширениями
Расширения позволяют добавлять языки, темы, отладчики и инструменты для повышения продуктивности в VSCode.dev, делая вашу работу с кодом проще и интереснее.
Просмотр и управление расширениями
-
Нажмите на иконку расширений на панели действий.
-
Найдите расширение в поле 'Search Extensions in Marketplace'.
- Installed: Все установленные вами расширения
- Popular: Популярные в индустрии
- Recommended: Рекомендации, адаптированные под ваш рабочий процесс
1. Установка расширений
-
Введите название расширения в поиске, кликните по нему и ознакомьтесь с деталями в редакторе.
-
Нажмите синюю кнопку Install в боковой панели или в основной области кода.
2. Настройка расширений
-
Найдите установленное расширение.
-
Нажмите на иконку шестеренки → выберите Extension Settings, чтобы настроить его под свои предпочтения.
3. Управление расширениями
Вы можете:
-
Отключить: Временно выключить расширение, оставив его установленным
-
Удалить: Полностью удалить, если оно больше не нужно
Найдите расширение, нажмите на иконку шестеренки и выберите «Disable» или «Uninstall», либо используйте синие кнопки в области кода.
Задание
Проверьте свои навыки: Создайте сайт-резюме с использованием vscode.dev
Дополнительное изучение и самостоятельная работа
- Узнайте больше с официальной документацией VSCode Web.
- Исследуйте продвинутые функции рабочего пространства, горячие клавиши и настройки.
Теперь вы готовы писать код, создавать проекты и сотрудничать — где угодно, на любом устройстве, используя VSCode.dev!
Отказ от ответственности:
Этот документ был переведен с помощью сервиса автоматического перевода Co-op Translator. Несмотря на наши усилия обеспечить точность, автоматические переводы могут содержать ошибки или неточности. Оригинальный документ на его родном языке следует считать авторитетным источником. Для получения критически важной информации рекомендуется профессиональный перевод человеком. Мы не несем ответственности за любые недоразумения или неправильные интерпретации, возникшие в результате использования данного перевода.