适用于 JavaScript 的 Visual Studio IDE 概述

在此 5-10 分钟的 Visual Studio 集成开发环境(IDE)简介中,我们将介绍一些窗口、菜单和其他 UI 功能。

如果尚未安装 Visual Studio,请转到 Visual Studio 下载 页免费安装它。

开始窗口

启动 Visual Studio 后看到的第一件事是启动窗口。 “开始”窗口旨在帮助你更快地“获取代码”。 它具有关闭或签出代码、打开现有项目或解决方案、创建新项目或直接打开包含某些代码文件的文件夹的选项。 如果启动窗口未打开,请选择 “文件 > 开始窗口 ”将其打开。

Visual Studio 2022 中开始窗口的屏幕截图。

Visual Studio 2019 中开始窗口的屏幕截图。

如果这是你第一次使用 Visual Studio,则最近的项目列表将为空。

如果使用非基于 MSBuild 的代码库,请使用 “打开本地文件夹 ”选项在 Visual Studio 中打开代码。 有关详细信息,请参阅 在没有项目或解决方案的情况下在 Visual Studio 中开发代码。 否则,可以创建新项目或从源提供程序(如 GitHub 或 Azure DevOps)克隆项目。

不带代码选项的 Continue 仅打开 Visual Studio 开发环境,无需加载任何特定项目或代码。 可以选择此选项加入 Live Share 会话或附加到用于调试的进程。 还可以按 Esc 关闭开始窗口并打开 IDE。

创建项目

若要继续探索 Visual Studio 的功能,让我们创建一个新项目。

  1. 在开始窗口中,选择“ 创建新项目”,然后在搜索框中键入 javascripttypescript ,以筛选项目类型列表,使其名称或语言类型中包含“javascript”或“typescript”。

    Visual Studio 提供了各种项目模板,可帮助你快速开始编码。

    Visual Studio 开始窗口中搜索项目模板的屏幕截图。

    Visual Studio 开始窗口中搜索项目模板的屏幕截图。

  1. 选择 JavaScript Express 应用程序 项目模板,然后单击“ 下一步”。
  1. 选择 空白 Node.js Web 应用程序 项目模板,然后单击“ 下一步”。
  1. 在显示的 “配置新项目 ”对话框中,接受默认项目名称,然后选择“ 创建”。

    项目已创建。 在右窗格中,选择 app.js编辑器 窗口中打开该文件。 编辑器显示文件的内容,可在 Visual Studio 中执行大部分编码工作。

    Visual Studio 中编辑器的屏幕截图。

    创建项目,并在编辑器窗口中打开名为 server.js 的文件。 编辑器显示文件的内容,可在 Visual Studio 中执行大部分编码工作。

    Visual Studio 中编辑器的屏幕截图。

解决方案资源管理器

解决方案资源管理器通常位于 Visual Studio 的右侧,显示项目、解决方案或代码文件夹中文件和文件夹层次结构的图形表示形式。 可以浏览层次结构并导航到 解决方案资源管理器中的文件。

Visual Studio 中解决方案资源管理器的屏幕截图。

Visual Studio 中解决方案资源管理器的屏幕截图。

Visual Studio 命令顶部的菜单栏将命令分组为类别。 例如, “项目” 菜单包含与正在使用的项目相关的命令。 在 “工具” 菜单上,可以通过选择 “选项”来自定义 Visual Studio 的行为方式,或者通过选择 “获取工具和功能”将功能添加到安装中。

Visual Studio 中菜单栏的屏幕截图。

Visual Studio 中菜单栏的屏幕截图。

选择“视图”菜单,然后选择“错误列表”,打开“错误列表”窗口。

错误列表

错误列表显示有关代码当前状态的错误、警告和消息。 如果文件中存在任何错误(例如缺少大括号或分号),或者项目中的任意位置,则会在此处列出它们。

Visual Studio 中错误列表的屏幕截图。

Visual Studio 中错误列表的屏幕截图。

输出窗口

输出”窗口显示项目生成和源代码管理工具的输出信息。

让我们生成项目以查看一些生成输出。 在 “生成 ”菜单中,选择“ 生成解决方案”。 “ 输出 ”窗口会自动获取焦点并显示成功的生成消息。

Visual Studio 中“输出”窗口的屏幕截图。

Visual Studio 中“输出”窗口的屏幕截图。

搜索框是在 Visual Studio 中执行几乎任何操作的一种快速简便的方法。 您可以输入一些与您想做的事情相关的文本,它会显示与该文本相关的选项列表。 例如,假设你想增加构建输出的详细程度,以便显示关于构建的确切信息的其他详细内容。 这是你可以这样做的方法:

  1. 如果未看到搜索框,请按 Ctrl + Q 将其打开。

  2. 在搜索框中键入verbosity。 在显示的结果中,选择 “项目”和“解决方案”-“> 生成并运行”。

    Visual Studio 中搜索框的屏幕截图。

    Visual Studio 中搜索框的屏幕截图。

    选项 ”对话框将打开“ 生成和运行 选项”页。

  3. MSBuild 项目生成输出详细程度下,选择 “普通”,然后单击“ 确定”。

  4. 通过右键单击 解决方案资源管理器 中的项目并选择上下文菜单中选择“ 重新生成 ”,再次生成项目。

    这一次, “输出 ”窗口显示生成过程中的更详细日志记录。

    Visual Studio 中详细生成输出的屏幕截图。

    Visual Studio 中详细生成输出的屏幕截图。

“发送反馈”菜单

如果在使用 Visual Studio 时遇到任何问题,或者如果你有有关如何改进产品的建议,则可以使用 Visual Studio 窗口顶部的 “发送反馈 ”菜单。

Visual Studio 中“发送反馈”菜单的屏幕截图。

Visual Studio 中“发送反馈”菜单的屏幕截图。

后续步骤

我们只是简单地了解了 Visual Studio 的一些功能,以熟悉其用户界面。 若要进一步了解:

另请参阅