18 KiB
Использование редактора кода
Этот урок охватывает основы использования 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, чтобы зафиксировать и отправить изменения.
После завершения работы над проектом выберите иконку гамбургер-меню в верхнем левом углу, чтобы вернуться к репозиторию на github.com.
Использование расширений
Установка расширений в VSCode позволяет добавлять новые функции и настраивать параметры среды разработки в редакторе, чтобы улучшить рабочий процесс. Эти расширения также помогают добавлять поддержку для различных языков программирования и часто бывают либо универсальными, либо языковыми.
Чтобы просмотреть список всех доступных расширений, нажмите на иконку Extensions на панели активности и начните вводить название расширения в текстовом поле с надписью 'Search Extensions in Marketplace'. Вы увидите список расширений, каждое из которых содержит название расширения, имя издателя, краткое описание, количество загрузок и рейтинг в звездах.
Вы также можете просмотреть все ранее установленные расширения, развернув папку Installed, популярные расширения, используемые большинством разработчиков, в папке Popular, и рекомендованные расширения для вас, либо от пользователей в той же рабочей области, либо на основе недавно открытых файлов, в папке Recommended.
1. Установка расширений
Чтобы установить расширение, введите его название в поле поиска и нажмите на него, чтобы просмотреть дополнительную информацию о расширении в области кода, как только оно появится на расширенной панели активности.
Вы можете либо нажать синюю кнопку установки на расширенной панели активности, чтобы установить расширение, либо использовать кнопку установки, которая появляется в области кода после выбора расширения для загрузки дополнительной информации.
2. Настройка расширений
После установки расширения вам может понадобиться изменить его поведение и настроить его в соответствии с вашими предпочтениями. Для этого выберите иконку Extensions, и теперь ваше расширение появится в папке Installed, нажмите на иконку шестеренки и перейдите в Extensions Setting.
3. Управление расширениями
После установки и использования расширения vscode.dev предлагает варианты управления расширением в зависимости от различных потребностей. Например, вы можете:
-
Отключить: (Вы временно отключаете расширение, если оно вам больше не нужно, но не хотите полностью его удалять)
Выберите установленное расширение на расширенной панели активности > нажмите на иконку шестеренки > выберите 'Disable' или 'Disable (Workspace)' ИЛИ откройте расширение в области кода и нажмите синюю кнопку Disable.
-
Удалить: Выберите установленное расширение на расширенной панели активности > нажмите на иконку шестеренки > выберите 'Uninstall' ИЛИ откройте расширение в области кода и нажмите синюю кнопку Uninstall.
Задание
Создайте сайт-резюме, используя vscode.dev
Обзор и самостоятельное изучение
Прочитайте больше о VSCode.dev и некоторых его других функциях.
Отказ от ответственности:
Этот документ был переведен с использованием сервиса автоматического перевода Co-op Translator. Хотя мы стремимся к точности, пожалуйста, учитывайте, что автоматические переводы могут содержать ошибки или неточности. Оригинальный документ на его родном языке следует считать авторитетным источником. Для получения критически важной информации рекомендуется профессиональный перевод человеком. Мы не несем ответственности за любые недоразумения или неправильные интерпретации, возникающие в результате использования данного перевода.