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 (описание изменений, внесенных в проект), нажмите значок галочки, чтобы зафиксировать и отправить изменения.
После завершения работы над проектом выберите значок hamburger menu в верхнем левом углу, чтобы вернуться к репозиторию на 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. Хотя мы стремимся к точности, пожалуйста, учитывайте, что автоматические переводы могут содержать ошибки или неточности. Оригинальный документ на его родном языке следует считать авторитетным источником. Для получения критически важной информации рекомендуется профессиональный перевод человеком. Мы не несем ответственности за любые недоразумения или неправильные интерпретации, возникшие в результате использования данного перевода.