Vite
GoLand 与 Vite 构建工具集成，提升前端开发体验。 Vite 包含一个开发服务器和一个构建命令。 构建服务器通过原生 ES 模块提供源文件。 构建命令会使用 Rollup 打包代码，该工具已预配置为输出高度优化的生成环境静态资源。
GoLand 支持 Vue style 标签中的 tsconfig.json 和 jsconfig.json 路径映射，并识别 Vite aliases。
在包含多个模块且使用不同 Vite 配置的项目中，GoLand 可自动检测每个模块的相关配置文件，并使用其模块解析规则，参见下方的 指定要使用的 Vite 配置文件。
开始之前
下载并安装 Node.js。
请确保在设置中启用了 JavaScript and TypeScript 插件。 按 Ctrl+Alt+S 打开设置，然后选择 。 单击 已安装 选项卡。 在搜索框中输入 JavaScript and TypeScript。 有关插件的更多信息，请参见 管理插件。
按照 从 JetBrains Marketplace 安装插件中所述，在 设置 | 插件 页签的 Marketplace 选项卡中安装并启用 Vite插件。
创建新的 Vite 应用
推荐使用 create-vite包来开始新的 Vite 应用程序，GoLand 将使用 npx为您下载并运行它。 结果，您的开发环境已预配置为使用 Vite 和一个流行框架的基础模板，例如 React、 Vue.js、 Svelte等。
当然，您仍然可以自行下载 create-vite ，或创建一个空的 GoLand 项目并在其中安装 Vite。
使用 create-vite 生成 Vite 应用
在主菜单中点击 。 或者，在欢迎屏幕中点击 。
在左侧窗格中选择 Vite。
在右侧窗格中：
指定用于存储项目相关文件的文件夹路径。
在 Node 解释器 字段中，指定要使用的 Node.js 解释器。 从列表中选择已配置的解释器，或选择 添加 来配置新的解释器。
在 Vite 列表中，选择 npx create-vite。
或者，对于 npm 版本 5.1 及更早版本，通过在 终端 Alt+F12 中运行
npm install --g create-vite手动安装create-vite包。 创建应用程序时，选择存储create-vite包的文件夹。在 模板 列表中，选择适用于您在应用程序中将使用的框架的 社区维护的 Vite 模板。
可选：
若要使用 TypeScript 替代 JavaScript，请选择 使用 TypeScript 模板 复选框。 GoLand 将为您的应用程序生成 .ts 文件和一个 tsconfig.json 配置文件。
单击 创建 后，GoLand 将生成一个特定于 Vite 的项目，其中包含所有所需的配置文件并下载所需依赖项。 GoLand 还会为运行应用程序创建一个具有默认设置的 npm dev配置。
在空的 GoLand 项目中安装 Vite
在这种情况下，您需要自行配置构建流水线。 请访问 Vite 官方网站了解如何将 Vite 添加到项目中。
创建空的 GoLand 项目
在主菜单中点击 。 或者，在欢迎屏幕中点击 。
在左侧窗格中选择 空 项目。 在右侧窗格中，指定应用程序文件夹并点击 创建。
在空项目中安装 Vite
打开将使用 Vite 的空 项目。
在嵌入式 终端 （Alt+F12 ）中，输入：
npm install --save-dev vite
使用已有的 Vite 应用开始工作
若要继续开发现有 Vite 应用程序，请在 GoLand 中打开并下载所需的依赖项。
打开已存在于本地的应用源代码
在 欢迎 屏幕上点击 打开 ，或从主菜单中选择 。 在打开的对话框中，选择您的源文件所在的文件夹。
从版本控制系统检出应用源代码
在 欢迎 屏幕上点击 克隆。
或者，从主菜单中选择 或 。
在主菜单中，您看到的可能不是 Git ，而是与项目关联的其他版本控制系统。 例如， Mercurial 或 Perforce。
下载依赖项
在弹出窗口中点击 执行 'npm install' 或 执行 'yarn install'：
您可以使用 npm、 Yarn 1或 Yarn 2 ，详细信息请参阅 npm 和 Yarn。
或者，在编辑器或 项目 工具窗口 Alt+1 中，从 package.json 的上下文菜单中选择 执行 'npm install' 或 执行 'yarn install'。
项目安全性
当您打开在 GoLand 外部创建并导入其中的项目时，GoLand 会显示一个对话框，供您决定如何处理该包含不熟悉源码的项目。
请选择以下选项之一：
安全模式预览 ：在此情况下，GoLand 以预览模式打开项目。 这意味着您可以浏览项目的源文件，但无法运行任务和脚本，或运行/调试项目。
GoLand 会在编辑器区域顶部显示通知，您可以随时点击 信任项目… 链接加载项目。
信任项目 ：在此情况下，GoLand 会打开并加载项目。 这意味着项目已初始化，项目插件已解析，依赖项已添加，并且所有 GoLand 功能都可用。
不打开 ：在此情况下，GoLand 不会打开该项目。
详见 项目安全。
在 GoLand 中配置 Vite
创建 Vite 配置文件
指定要使用的 Vite 配置文件
基于对 Vite 配置文件的分析，GoLand 可识别 Vite 配置、解析模块，并在 JavaScript 和 TypeScript 文件中提供编码辅助。
在 GoLand 中，您可以选择自动或手动两种配置模式。
使用 自动配置时，GoLand 会为每个 JavaScript 或 TypeScript 文件自动检测相应的 Vite 配置文件。
使用 手动配置时，您需要在项目中指定要使用的 Vite 配置文件。 当 GoLand 无法识别您的 Vite 配置文件名称时，可使用手动配置，详见下方 受支持的 Vite 配置名称列表。
选择 Vite 配置的检测方式
打开 设置 对话框（Ctrl+Alt+S ），然后转到 。
在 检测用于模块解析的 Vite 配置文件 区域，选择以下选项之一：
自动： 在该模式下，对于 JavaScript 或 TypeScript 文件，GoLand 将首先在该文件所在的文件夹中查找 Vite 配置文件，然后是其父级文件夹，依此类推。
因此，如果您的项目由多个具有不同 Vite 配置的模块组成，每个模块将使用其自身的 Vite 配置文件中的模块解析规则（若找到该配置文件）。
GoLand 能识别以下名称的 JavaScript 或 TypeScript Vite 配置文件，识别顺序如下：
vite.config.js ／ vite.config.ts
vite.config.mjs
vite.config.cjs
手动： 在 配置文件 字段中，指定要使用的 Vite 配置文件的位置。
在该模式下，指定配置文件中的解析规则将应用于项目中的所有模块。
如果 GoLand 无法识别您的 Vite 配置文件名称，请选择此选项，参阅上方的 受支持的 Vite 配置名称列表。
运行 Vite 应用
点击
，位于 dev脚本旁边的空白处，或在 package.json 中执行npm run dev命令，在 终端 Alt+F12 中运行，或双击dev在 npm 工具窗口 （ ）中的任务。
请等待应用程序编译完成并启动开发服务器。
运行 工具窗口或 终端 显示应用运行的 URL。 如果应用是通过 create-vue 生成的，则默认 URL 为 http://localhost:5173/ 。 点击此链接以查看应用。
通过运行/调试配置运行 Vite 应用
对于在 GoLand create-vite 向导中使用 新建项目 创建的应用（如上所述 ），GoLand 会生成名为 npm dev 的默认 npm配置。 该配置将运行 vite 命令，用于启动开发服务器并使应用进入开发模式。
在其他情况下，您需要 手动创建运行／调试配置 ，并配置实际的设置，如主机、端口等。
创建 npm 运行/调试配置
转到 。 或者，也可以在工具栏的 运行 小组件中选择 编辑配置。
在打开的 编辑配置 对话框中，点击工具栏上的 添加 按钮（
），并从列表中选择 npm。在打开的 配置 选项卡中的 运行/调试配置：npm 对话框中，指定 package.json 的位置、Node.js 解释器和要使用的包管理器。
在 命令 字段中，从列表中选择 run ，然后从 脚本 列表中选择需要运行的脚本。 通常是默认的
dev脚本，当然，您也可以在 package.json 中配置另一个脚本，例如用于在自定义端口上运行该应用。
可选：
如需在浏览器中打开应用，请更新配置如下：在 浏览器／实时编辑 选项卡中，选中 启动后 复选框，选择用于打开应用的浏览器，并指定应用将运行的 URL 地址。
如果计划调试应用，请选择 Google Chrome 或其他 基于 Chromium 的浏览器。
运行应用
从工具栏的列表中选择 npm dev 运行配置，并点击其旁边的
。
请等待应用程序编译完成并启动开发服务器。
运行 工具窗口或 终端 显示您的应用运行的 URL。 点击此链接以查看应用。
另外，您也可以启用 GoLand 在启动时打开该应用 如上所述。
调试 Vite 应用
您可以通过 启动运行／调试配置 ，或从显示应用开发模式运行 URL 的 运行工具窗口中，开始调试会话。
通过运行/调试配置开始调试
要调试您的 Vite 应用，您需要两个运行／调试配置：
一个用于以开发模式启动应用的 npm 配置， 如上所述。
一个用于附加调试器到正在开发模式中运行的应用的 JavaScript 调试 配置。
如 使用 npm 运行/调试配置运行和调试 Vite 应用中所述，您可以在 npm 配置中创建一个 JavaScript 调试 配置，以同时启动它们。
或者，按照 使用 JavaScript Debug 运行/调试配置开始调试中所述，分别创建并启动一个 npm 和一个 JavaScript 调试 运行/调试配置。
使用一个 npm 运行/调试配置运行并调试 Vite 应用
在代码中设置 断点。
创建一个 npm 配置， 如上所述。
如果您使用
create-vite生成了应用，GoLand 已经创建了一个默认名称为 npm dev 的 npm 配置。 该配置可通过 运行 小部件和 运行/调试配置 对话框访问。
在打开的 运行/调试配置：npm 对话框的 配置 选项卡中，指定 package.json 的位置、Node.js 解释器和要使用的包管理器。
在 命令 字段中，从列表中选择 运行 ，然后从 脚本 列表中选择要运行的脚本。 最可能是默认的
dev脚本，但您也可以在 package.json 中配置另一个，例如在自定义端口上运行应用。在 浏览器 / 实时编辑 选项卡中，选中 启动后 复选框，从列表中选择 Google Chrome 或其他 基于 Chromium 的浏览器 ，选中 使用 JavaScript 调试器 复选框，然后指定您的应用将运行的 URL。
单击 运行。
要重新运行该配置，请在 运行 小部件中从列表中选择它，然后单击旁边的
。GoLand 以开发模式运行应用程序，同时启动调试会话。
在命中第一个断点时，切换到 Debug 工具窗口 ，然后照常操作： 单步调试程序、 停止并恢复 程序执行、 在暂停时检查 、探索调用堆栈和变量、设置监视、计算变量值、 查看实际 HTML DOM ，依此类推。
使用 JavaScript Debug 运行/调试配置开始调试
在代码中设置 断点。
以 如上所述的方式启动应用程序开发模式，并等待应用程序编译完成且开发服务器准备就绪。
运行 工具窗口或 终端 显示应用程序正在运行的 URL。 将该 URL 复制到 稍后在 JavaScript Debug 配置中指定。
创建一个 JavaScript 调试 配置。 为此，请在主菜单中转到 ，单击
，然后从列表中选择 JavaScript 调试。在打开的 运行/调试配置：JavaScript 调试 对话框中，指定配置的名称以及应用程序在开发模式下运行的 URL 地址。 您可以在 运行 工具窗口或 终端 中复制该 URL， 如上所述。
单击 调试。
要重新运行该配置，请在 运行 小部件中从列表中选择它，然后单击旁边的
。
在命中第一个断点时，切换到 Debug 工具窗口 ，然后照常操作： 单步调试程序、 停止并恢复 程序执行、 在暂停时检查 、探索调用堆栈和变量、设置监视、计算变量值、 查看实际 HTML DOM ，依此类推。
从“运行”工具窗口或内置终端中开始调试
如果您的应用程序在 localhost 上以开发模式运行，特别是如果它是使用 create-vite 生成的，则可以直接在 >运行 工具窗口或内置 终端 中启动调试会话。
在代码中设置 断点。
以 如上所述的方式启动应用程序开发模式，并等待应用程序编译完成且开发服务器准备就绪。
运行 工具窗口或 终端 显示应用程序正在运行的 URL。 按住 Ctrl+Shift 并单击该 URL 链接。 GoLand 使用自动生成的 配置启动类型为 JavaScript Debug 的调试会话。
如果您是从 New Terminal 启动的应用程序开发模式，只需单击链接旁边的 在浏览器中开始调试 按钮即可。
在命中第一个断点时，切换到 Debug 工具窗口 ，然后照常操作： 单步调试程序、 停止并恢复 程序执行、 在暂停时检查 、探索调用堆栈和变量、设置监视、计算变量值、 查看实际 HTML DOM ，依此类推。
Node.js 17+ 的故障排除
如果您使用的是 Node.js 版本 17 或更高版本，在调试会话期间可能会遇到网络连接问题，从而导致调试器附加失败或无法加载 sourcemap。
解决方法是将 --host 127.0.0.1 传递给服务器。 您可以通过以下几种方式之一完成此操作：
更新
dev中的脚本 package.json ："dev": "vite --host=127.0.0.1"或者，将
dns.setDefaultResultOrder('ipv4first')添加到 vite.config.ts 中。