Vite

创建一个空的 JetBrains Rider 解决方案

1. 点击 新建解决方案 屏幕上的 欢迎 或从主菜单中选择 文件 | 新建 解决方案。 “ 新建 解决方案 对话框 ”打开。

2. 在左侧窗格中，选择 空 解决方案。 在右侧窗格中，指定应用程序文件夹并点击 创建。

在空的解决方案中安装 Vite

1. 打开空的 解决方案，在这里您将使用 Vite。

2. 在命令行 shell 或嵌入式 终端 （Alt+F12 ）中输入：

   npm install --save-dev vite

选择如何检测 Vite 配置

1. 打开 设置/首选项 对话框（Ctrl+Alt+S ），然后转到 语言与框架 | JavaScript | Vite。

2. 在 检测 Vite 配置文件以进行模块解析 区域，选择以下选项之一：

   • 自动： 在这种模式下，对于 JavaScript 或 TypeScript 文件，JetBrains Rider 将首先在此 JavaScript 或 TypeScript 文件所在的文件夹中查找 Vite 配置文件，然后在其父文件夹中查找，以此类推。

     因此，如果您的项目包含多个具有不同 Vite 配置的模块，每个模块将使用其自己的 Vite 配置文件中的模块解析规则（如果找到此类配置）。

     JetBrains Rider 能识别以下名称及顺序的 JavaScript 或 TypeScript Vite 配置文件：

     • vite.config.js / vite.config.ts

     • vite.config.mjs

     • vite.config.cjs

   • 手动： 在 配置文件 字段中，指定要使用的 Vite 配置的位置。

     在这种模式下，指定配置文件中的解析规则将应用于项目中的所有模块。

     如果您的 Vite 配置文件名称未被 JetBrains Rider 识别，请参阅上面的 已识别的 Vite 配置名称列表。

     

创建一个 npm 运行/调试配置

1. 转到 运行 | 编辑配置。 或者，在工具栏上的 运行 小部件中选择 编辑配置。

   

   在打开的 编辑配置 对话框中，点击工具栏上的 添加 按钮（ ），然后从列表中选择 npm。

2. 在打开的 配置 对话框的 运行/调试 配置：npm 选项卡中，指定 package.json 、Node.js 运行时以及要使用的包管理器的位置。

   在 命令 字段中，从列表中选择 run ，然后在 脚本 列表中选择要运行的脚本。 它很可能是默认的 dev 脚本，但您也可以在 package.json 中配置其他脚本，例如在自定义端口上运行应用。

   

3. 可选：

   要在浏览器中打开应用程序，请按照以下步骤更新配置：在 Browser / Live Edit 选项卡中，选中 启动后 复选框，选择要在其中打开应用程序的浏览器，并指定应用程序将运行的 URL 地址。

   如果您打算调试该应用，请选择 Google Chrome 或其他 基于 Chromium 的浏览器。

   

运行应用程序

1. 在工具栏的列表中选择 npm dev 运行配置，并单击其旁边的 。

   

2. 请等待应用编译完成且开发服务器就绪。

   在 运行 工具窗口或 终端 中会显示您的应用正在运行的 URL。 单击此链接以查看应用。

   

   或者，启用 JetBrains Rider 以在启动时打开应用程序 如上所述。

使用单个 npm run/debug 配置运行和调试 Vite 应用程序

1. 在代码中设置 断点。

2. 创建一个 npm 配置， 如上所述。

   如果您使用 create-vite 生成了应用程序，JetBrains Rider 已经使用默认名称 npm dev 创建了一个 npm 配置。 此配置可通过 运行 小部件或 运行/调试配置 对话框获得。

   

3. 在打开的 配置 对话框的 运行/调试 配置：npm 选项卡中，指定 package.json 、Node.js 运行时以及要使用的包管理器的位置。

   在 命令 字段中，从列表中选择 run ，然后在 脚本 列表中选择要运行的脚本。 它很可能是默认的 dev 脚本，但您也可以在 package.json 中配置其他脚本，例如在自定义端口上运行应用。

   

4. 在 Browser / Live Edit 选项卡中，选中 启动后 复选框，从列表中选择 Google Chrome 或其他 Chromium-based browser ，选中 使用 JavaScript 调试器 复选框，然后指定您的应用程序将运行的 URL。

   

5. 单击 运行。

   要重新运行该配置，请在 运行 小部件的列表中选择它，并单击其旁边的 。

   JetBrains Rider 在开发模式下运行应用程序，同时启动调试会话。

   

6. 当第一个断点被触发时，切换到 调试工具窗口 并像往常一样继续： 逐步执行程序、 停止和恢复程序执行、 在暂停时检查 、探索调用堆栈和变量、设置监视、评估变量、 查看实际的 HTML DOM 等。

   如需忽略源代码映射并逐步执行实际运行的代码，请在 调试 工具窗口的工具栏上按 。

使用 JavaScript Debug 运行/调试配置开始调试

1. 在代码中设置 断点。

2. 启动应用程序的开发模式 ，如上所述 ，并等待应用程序编译完成以及开发服务器就绪。

   在 运行 工具窗口或 终端 中会显示您的应用正在运行的 URL。 请复制此 URL 到 稍后在 JavaScript Debug 配置中指定。

   

3. 创建一个 JavaScript 调试 配置。 要执行此操作，请在主菜单中转到 运行 | 编辑配置 ，点击 ，然后从列表中选择 JavaScript 调试。

4. 在打开的 运行/调试配置：JavaScript Debug 对话框中，指定配置的名称以及应用程序在开发模式下运行的 URL 地址。 您可以在 运行 工具窗口或 终端 中复制此 URL， 如上所述。

   

5. 单击 调试。

   要重新运行该配置，请在 运行 小部件的列表中选择它，并单击其旁边的 。

   

6. 当第一个断点被触发时，切换到 调试工具窗口 并像往常一样继续： 逐步执行程序、 停止和恢复程序执行、 在暂停时检查 、探索调用堆栈和变量、设置监视、评估变量、 查看实际的 HTML DOM 等。

   如需忽略源代码映射并逐步执行实际运行的代码，请在 调试 工具窗口的工具栏上按 。

1. 在代码中设置 断点。

2. 启动应用程序的开发模式 ，如上所述 ，并等待应用程序编译完成以及开发服务器就绪。

3. 在 运行 工具窗口或 终端 中会显示您的应用正在运行的 URL。 按住 Ctrl+Shift 并单击此 URL 链接。 JetBrains Rider 将使用自动生成的类型为 JavaScript 调试 的 配置启动调试会话。

   

   如果您从 New Terminal 以开发模式启动了应用程序，您只需点击链接旁边的 在浏览器中启动调试 按钮即可。

   

   默认情况下，不显示按钮。 要显示它，请打开 设置/首选项 对话框（Ctrl+Alt+S ），转到 高级设置 ，并在 JavaScript 和 TypeScript 区域中选中 在终端中为本地主机链接显示“在浏览器中开始调试”按钮 复选框。