VSCode 界面说明

1、启动页面

在完成 VSCode 安装后，点击 VSCode 图标，启动界面如下所示：

上图展示了 Visual Studio Code（VS Code）的欢迎界面，它是一个代码编辑器的起始页，提供了快速访问不同功能和资源的入口。

以下是图片中各个部分的说明：

活动栏（Activity Bar）：

  • 位于左侧，包含多个图标，每个图标代表 VS Code 的一个功能视图。
  • 图片中用红色箭头标注了四个功能：
    • 文档管理：可能是指资源管理器，用于管理文件和文件夹。
    • 搜索：用于在整个工作区中搜索文件或文本。
    • 版本控制：通常与Git集成，用于代码版本管理。
    • debug调试：用于启动调试会话，进行代码调试。

启动（Start）：

  • 位于活动栏上方，包含常用功能的快捷方式。
  • 图片中用红色方框标注了三个选项：
    • 新建文件：创建一个新的文件。
    • 打开...：打开一个文件或文件夹。
    • 运行命令...：使用命令面板执行命令。

最近打开的目录（最近）：

  • 显示了最近打开的文件夹列表，方便快速切换到之前的工作目录。
  • 图片中用红色方框标注了最近打开的目录，例如"runoob-test"。

演练（Tutorial）：

  • 位于欢迎界面的右侧，提供了一些快速链接，帮助用户了解和使用VS Code。
  • 图片中用红色方框标注了三个链接：
    • 开始使用 VS Code：提供自定义方法和使用专属VS Code的指导。
    • 了解基础知识：链接到VS Code的基础知识，帮助用户了解必备功能。
    • 提高工作效率：提供提高使用VS Code效率的建议。

vscode文档：

  • 位于演练部分的上方，可能是指向 VS Code 官方文档的链接。

2、编辑页面

打开或编辑一个代码的界面如下所示：

活动栏与侧边栏

界面左侧，通过图标切换不同的功能模块：

  • 资源管理器（第一个图标）：在图片中显示了项目文件结构，其中包含：
    • RUNOOB-TEST 文件夹：当前工作区的项目文件夹。
    • test.html 文件：当前正在编辑的 HTML 文件。
  • 搜索（第二个图标）：用于全局搜索文件内容（未激活）。
  • 源代码管理（第三个图标）：显示 Git 状态，方便管理代码版本。
  • 运行和调试（第四个图标）：可以设置断点并运行代码。
  • 扩展（第五个图标）：用于安装和管理插件。

紧邻活动栏右侧，展示当前功能模块的具体内容：

  • 当前显示的是 资源管理器。
  • 项目结构清晰展示，包括：
    • RUNOOB-TEST 文件夹中的所有文件。
    • 当前正在编辑的文件 test.html。

编辑区

位于界面中间，用于显示和编辑文件内容：

  • 编辑区域显示 test.html 文件的代码。
  • 支持语法高亮（如 DOCTYPE html 和 <h1> 标签）。
  • 光标定位在第 11 行（底部状态栏显示"行 11"）。

状态栏

位于底部，显示当前文件和编辑环境的信息：

  • Git 状态：当前分支为 main（左下角）。
  • 文件信息：
    • 编码格式：UTF-8。
    • 行尾序列：LF。
    • 当前文件类型：HTML。
  • 终端状态：显示当前打开的终端类型为 zsh。