Описание интерфейса VSCode

1. Страница запуска

После завершения установки VSCode щёлкните значок VSCode, и появится начальный экран, как показано ниже:

На изображении выше показан приветственный экран Visual Studio Code (VS Code). Это начальная страница редактора кода, обеспечивающая быстрый доступ к различным функциям и ресурсам.

Ниже приведено описание каждой части на изображении:

Панель действий：

  • Расположена слева, содержит несколько значков, каждый из которых представляет функциональное представление VSCode.
  • Четыре функции отмечены на изображении красными стрелками:
    • Управление документами: Возможно, относится к Проводнику, используется для управления файлами и папками.
    • Поиск: Используется для поиска файлов или текста по всему рабочему пространству.
    • Управление версиями: Обычно интегрировано с Git для управления версиями кода.
    • Debug: Используется для запуска сеанса отладки для отладки кода.

Старт：

  • Расположена над панелью действий и содержит ярлыки для часто используемых функций.
  • На изображении три опции отмечены красными рамками:
    • New File: Создать новый файл.
    • Open...: Открыть файл или папку.
    • Run Command...: Выполнить команды с помощью палитры команд.

Недавно открытые папки (Недавние)：

  • Отображает список недавно открытых папок, что позволяет быстро переключаться на предыдущий рабочий каталог.
  • Недавно открытые папки отмечены на изображении красной рамкой, например "example-test".

Пошаговое руководство (обучение)：

  • Расположен в правой части экрана приветствия, он предоставляет несколько быстрых ссылок, помогающих пользователям узнать о VS Code и использовать его.
  • На изображении три ссылки отмечены красными рамками:
    • Начало работы с VS Code: Содержит руководство по способам настройки и использованию именно VS Code.
    • Изучите основы: Ссылки на основы VS Code, помогающие пользователям понять ключевые возможности.
    • Повышение продуктивности: Советы по повышению эффективности при использовании VS Code.

Документация VS Code：

  • Расположена над разделом пошаговых руководств, вероятно, это ссылка на официальную документацию VS Code.

2. Страница редактирования

Интерфейс для открытия или редактирования кода показан ниже:

Панель действий и боковая панель

В левой части интерфейса переключайтесь между различными функциональными модулями с помощью значков:

  • Проводник (первый значок): Показывает структуру файлов проекта на изображении, которая включает:
    • EXAMPLE-TESTПапки: папка проекта текущего рабочего пространства.
    • test.htmlФайлы: HTML-файл, редактируемый в данный момент.
  • Поиск (вторая иконка): Используется для глобального поиска по содержимому файлов (неактивно).
  • Система управления версиями (третья иконка): Отображает состояние Git для удобного управления версиями кода.
  • Запуск и отладка (четвёртая иконка): Позволяет устанавливать точки останова и запускать код.
  • Расширения (пятая иконка): Используется для установки и управления плагинами.

Сразу справа от панели действий отображается конкретное содержимое текущего функционального модуля:

  • Сейчас отображаетсяПроводник。
  • Структура проекта чётко отображается, включая:
    • EXAMPLE-TESTВсе файлы в папке.
    • Файл, редактируемый в данный моментtest.html。

Область редактора

Расположена в середине интерфейса, используется для отображения и редактирования содержимого файлов:

  • Область редактора отображаетtest.htmlКод файла.
  • Поддерживает подсветку синтаксиса (например,DOCTYPE htmlи<h1>теги).
  • Курсор находится на строке 11 (в нижней строке состояния отображается "Строка 11").

Строка состояния

Расположена внизу и отображает информацию о текущем файле и среде редактирования:

  • Состояние Git: Текущая ветка —main(левый нижний угол).
  • Информация о файле：
    • Формат кодировки: UTF-8.
    • Последовательность конца строки: LF.
    • Текущий тип файла: HTML.
  • Состояние терминала: Показывает тип текущего открытого терминала какzsh。
Другие расширения