Vue.js

创建 Vue.js 组件

1. 在 项目 工具窗口 Alt+1 中，选择新组件的父文件夹，然后从列表中选择 Vue 组件。

2. 在 新建 Vue 组件 弹窗中，输入组件文件名，并选择组件类型： Composition API 或 Options API。

   

提取组件

1. 选择要提取的模板片段并调用组件提取操作：

   • 要使用意图操作，请按 Alt+Enter ，然后从列表中选择 提取 Vue 组件。

   • 要使用重构，请在主菜单或所选内容的上下文菜单中选择 重构 | 提取 | 提取 Vue 组件。

2. 输入新组件的名称。 如果该名称已被使用或无效，GoLand 将显示警告。 否则，将创建一个新的单文件组件，并将其导入父组件中。

   

在 script、style 和 template 块中补全代码

• 默认情况下，GoLand 在 script 代码块中为 ECMAScript 6 提供代码补全，在 style 代码块中为 CSS 提供代码补全。

• 在 template 标签内，可使用 Vue.js 组件和属性的代码补全 Ctrl+Space 与转到定义 Ctrl+B 功能。

补全 Vue.js 属性与方法

• GoLand 还为 Vue.js 属性、“ data” 对象中的属性、计算属性和方法提供补全建议。

补全 slot 名称

• GoLand 为库组件和您项目中定义的组件的 slot 名称提供补全功能。

  如果您的项目中包含具有具名 slot 的组件，GoLand 会在 v-slot 指令的 template 标签中显示这些名称的建议。

• 如果您使用 Vuetify、 Quasar 或 BootstrapVue ，也可使用 slot 名称的代码补全功能。

补全独立文件中定义的组件

• 如果 组件定义在多个文件中 ，GoLand 会识别组件各部分之间的关联，并为属性、数据和方法提供正确的代码补全。

  例如，如果组件的各部分分别定义在通过 vue 文件中的 src 属性链接的 JavaScript 和样式表文件中，那么模板中会像方法一样正确补全 JavaScript 中定义的属性。

• 组件的 template 属性中的模板字面量中的模板会像位于 template 标签中一样获得代码补全。

  如果模板定义在单独的 HTML 文件中，并链接到 template 属性，也会提供代码补全。

在 Vue.js 注入中补全代码

在 HTML 文件中的 Vue.js 注入中，GoLand 能够识别 Vue.js 语法并相应地高亮代码。 您还可以为 HTML 文件中通过 CDN 链接的 Vue.js 库中的符号获得代码补全，而无需将这些库添加到项目依赖中。

1. 打开包含指向外部 Vue.js 库的 CDN 链接的 HTML 文件。 GoLand 会高亮此链接。

2. 要启用该库的代码补全，请在链接上按 Alt+Enter ，然后从列表中选择 下载库。 或者，悬停在链接上并单击 下载库。

配置参数提示

1. 打开 设置 对话框（Ctrl+Alt+S ），然后转到 编辑器 | 内嵌提示。

2. 在 参数名称 下展开 Vue。

3. 通过选中相应的复选框指定希望在哪些上下文中显示参数提示。

   预览显示您在设置中所做更改如何影响代码外观。

4. 对于某些方法和函数，GoLand 在任何上下文中都不会显示参数提示。 单击 排除列表... 可查看这些方法和函数，可能为它们启用参数提示，或将新项目添加到列表中。

1. 键入要使用的模板缩写，或按 Ctrl+J 并从可用模板列表中选择。

2. 要展开模板，请按 Tab。

3. 要在模板中从一个变量切换到另一个变量，请再次按 Tab。

   

1. 在 设置 对话框（Ctrl+Alt+S ）中，转到 语言与框架 | TypeScript | Vue。

2. 在 Vue 语言服务器 字段中，指定要使用的 Vue Language Server 版本。

   • 接受建议的默认版本。

   • 如果已安装其他版本的 @vue/language-server 软件包，该版本将显示在列表中。 您可以选择该版本，或接受默认版本。

     

   • 或者，点击 选择 或 并指定自定义 @vue/language-server 软件包的路径。

3. 指定要使用的服务。

   • 默认选择 自动 选项，这意味着默认使用 Vue Language Server (Volar)。

   • 选择 经典 TypeScript 服务 以便在 .ts 和 .vue 文件中始终使用 TypeScript Language Service。

     请注意，TypeScript language service 不支持 TypeScript 5.0.0 及更高版本。 因此，如果您的项目使用这些版本之一，错误高亮将通过 GoLand 的内部代码检查功能提供。

   • 选择 已禁用 可关闭 TypeScript language service 与 Vue Language Server，并通过 GoLand 的内部支持获取编码辅助。

4. 选中 启用基于服务的类型引擎 复选框以根据 Vue Language Server 的数据评估符号的类型。

   默认未选中该复选框，因此，类型评估、解析、代码检查及重构将基于 GoLand 内部 TypeScript 引擎中的类型信息。

   此默认行为可能导致性能问题以及类型解析中的错误，因为 GoLand 内部 TypeScript 引擎所用的类型评估算法与 Vue Language Server 不同。选中该复选框可帮助避免这些问题。 选中该复选框可帮助避免这些问题。

配置缩进

默认情况下，顶级标签中的代码统一缩进，采用 Vue.js 专用风格。您可以将缩进配置为依赖于所用语言，例如为 HTML 或 Pug 特定风格。 您可以将该缩进配置为依赖所使用的语言，例如针对 HTML 或 Pug 进行特定处理。

1. 在 设置 对话框（Ctrl+Alt+S ）中，转到 编辑器(E) | 代码样式 | Vue 模板 ，然后打开 制表符与缩进 选项卡。

2. 默认情况下，所有顶层标签中的内容会统一缩进，采用 Vue.js 特有的样式。 采用默认缩进设置，或使用页面上的控件自定义缩进设置。 当您更改设置时，右侧窗格中的 预览 显示这些更改如何影响代码格式。

   要使顶层标签中的代码根据其语言进行缩进，请选择 特定于区块内使用的语言。

3. 在 缩进顶层标签的子标签 字段中，指定应具备初始缩进的顶层标签。

   默认情况下，仅 template 标签中的代码具有初始缩进。 如有需要，使用逗号作为分隔符添加其他标签。 例如，如果在字段中指定 script ，则所有 script 标签中的代码将获得初始缩进，如 预览 窗格中所示。

配置空格

1. 默认情况下，在 使用 Mustache 语法的 Vue.js 文本插值中，GoLand 会在左大括号（{ ）后和右大括号（} ）前自动插入空格。

   若要禁止自动插入空格，请打开 设置 对话框（Ctrl+Alt+S ），转到 编辑器 | 代码样式 | Vue 模板 ，然后打开 空格 选项卡并取消选中 插值 复选框。

2. 默认情况下，当将代码片段放入块注释中时，文本会在起始 /* 字符之后立即开始，不带任何空格。 在结束 */ 字符之前也不会插入空格。

   此默认代码样式可能与某些 linter 的规则（例如 ESLint）冲突。 为提高代码样式，请为块注释配置开头和结尾的空格。

   在 设置 对话框（Ctrl+Alt+S ）中，转到 编辑器(E) | 代码样式 | JavaScript 或 编辑器(E) | 代码样式 | TypeScript ，打开 代码生成 选项卡，并在 注释 区域中配置空格和格式设置。

配置换行和大括号

1. 在 设置 对话框（Ctrl+Alt+S ）中，转到 编辑器 | 代码样式 | Vue 模板 ，然后打开 换行与大括号 选项卡。

2. 如果 Vue.js 插值中的 JavaScript 表达式包含换行符，GoLand 会自动从新的一行开始该表达式，并在其后添加另起一行。

   取消选中 在“{{”之后换行 和 在“}}”之前换行 复选框可更改此默认行为。

3. 按照 Vue.js 代码样式：视觉指南中所述配置多个右侧边距。

4. 按照 换行选项中所述配置插值中的换行。

使用 Prettier 重新格式化代码

• 在编辑器中，选择要重新格式化的代码片段。 要重新格式化文件或文件夹，请在 项目 工具窗口中选择它 Alt+1。 然后在上下文菜单中选择 使用 Prettier 重新格式化。

• 要使 Prettier 自动作用于特定文件，请打开 设置 对话框（Ctrl+Alt+S ），转到 语言 & 框架 | JavaScript | Prettier ，并使用 在代码重新格式化时 和 保存时 复选框指定触发 Prettier 的操作。

应用 Prettier 代码样式规则

• 在启用了 Prettier 的项目中，打开 package.json ，然后单击选项卡顶部窗格中的 是。

  

• 若要重新应用 Prettier 代码样式（在单击窗格中的 否 之后或修改代码样式之后），请按 Ctrl+Shift+A ，然后从 查找操作 列表中选择 应用 Prettier 代码风格规则。

安装并配置 typescript-tslint-plugin

1. 在嵌入的 终端 （Alt+F12 ）中键入：

   npm install --save-dev typescript-tslint-plugin

2. 在 plugins 文件的 tsconfig.json 属性中键入：

   { "compilerOptions": { "plugins": [{"name": "typescript-tslint-plugin"}] } }

3. 当您使用 typescript-tslint-plugin 时，TSLint 通过 TypeScript 语言服务运行，因此为了避免重复错误报告，可以禁用与 GoLand 的 TSLint 集成。

   为此，请打开 设置 对话框（Ctrl+Alt+S ），转到 语言与框架 | TypeScript | TSLint ，并选择 禁用 TSLint。

创建 npm 运行/调试配置

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

   

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

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

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

   

3. 可选：

   如需在浏览器中打开应用，请按如下方式更新配置：在 浏览器 / 实时编辑 选项卡中，选中 启动后 复选框，选择要打开应用的浏览器，并指定应用运行的 URL 地址。

   如果准备调试应用，请选择 Google Chrome 或其他 基于 Chromium 的浏览器。

   

运行应用程序

1. 在工具栏上的 运行 小部件中，从列表中选择一个类型为 npm 的运行配置，然后点击其旁边的 。 该配置可以是自动生成的 dev 配置，或是您自行 如上所述创建的自定义配置。

   

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

   运行 工具窗口或 终端 会显示应用正在运行的 URL。 如果您的应用是通过 create-vue 生成的，则默认 URL 为 http://localhost:5173/ 。 点击此链接以查看应用。

   

   或者，可以启用 GoLand 在启动时自动打开应用， 如上所述。

使用单个 npm 运行/调试配置运行和调试 Vue.js 应用

1. 在代码中设置 断点。

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

   如果您通过 create-vue 生成了应用，GoLand 已创建一个默认名称为 npm dev 的 npm 配置。 该配置可在 运行 小部件中和 运行/调试配置 对话框中找到。

3. 在打开的 运行/调试配置：npm 对话框中的 配置 标签页，指定 package.json 的位置、Node.js 解释器和包管理器。

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

   

4. 在 浏览器 / 实时编辑 标签中，选中 启动后 复选框，从列表中选择 Google Chrome 或其他 基于 Chromium 的浏览器 ，再选中 使用 JavaScript 调试器 复选框，并指定应用将运行的 URL。

   

5. 点击 运行。

   如需重新运行该配置，请在 运行 小部件中的列表中选择它，然后点击其旁边的 。

   GoLand 会以开发模式运行该应用的同时启动调试会话。

   

6. 命中第一个断点后，切换至 Debug 工具窗口 ，然后按常规方式继续： 逐步执行程序、 暂停并恢复程序执行、 在暂停时检查程序，查看调用栈和变量，设置监视，评估变量， 查看实际 HTML DOM等。

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

1. 在代码中设置 断点。

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

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

   

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

   如果您使用 create-vue 生成了应用程序，GoLand 已使用默认名称 调试应用 和默认 URL http://localhost:5173 创建了一个 JavaScript 调试 运行/调试配置。 从 JavaScript 调试 节点下的列表中选择该运行/调试配置。

   

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

   

5. 点击 调试。

   要重新运行该配置，请从 运行 小部件中的列表中选择该配置，然后点击其旁边的 。

   

6. 程序在第一个断点处暂停时，切换到 调试工具窗口 并照常操作： 单步调试程序、 停止与恢复 程序执行、 在暂停时检查程序 、查看调用栈与变量、设置监视、计算变量、 查看实际 HTML DOM 等。

1. 在代码中设置 断点。

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

3. 运行 工具窗口或 终端 显示了应用程序运行的网址。 按住 Ctrl+Shift 并点击此 URL 链接。 GoLand 将使用一种类型为 JavaScript Debug 的自动生成的 调试应用程序 配置启动调试会话。

   

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