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 标签内，代码补全 Ctrl+Space 和导航到定义 Ctrl+B 适用于 Vue.js 组件和属性。

完整的 Vue.js 属性和方法

• GoLand 还会建议 Vue.js 属性、 data object 中的属性、计算属性和方法的补全。

完整插槽名称

• GoLand 提供了来自库组件和您项目中定义的组件的 slots名称的补全。

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

• 如果您正在使用 Vuetify、 Quasar 或 BootstrapVue ，插槽名称的代码补全也是可用的。

完成在不同文件中定义的组件

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

  例如，如果组件的各部分是在单独的 JavaScript 和样式表文件中定义，并通过 src 属性在 fasterxml 文件中进行链接，那么在模板中会像方法一样正确补全用 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 服务器 (Volar)。

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

     请注意，TypeScript 语言服务不支持 TypeScript 版本 5.0.0 及更高版本。 因此，如果您的项目使用其中一个版本，通过 GoLand 内部代码检查将提供错误高亮显示。

   • 选择 已禁用 可同时关闭 TypeScript 语言服务和 Vue 语言服务器，并从 GoLand 的内部支持获取代码辅助。

4. 选择 启用服务驱动的类型引擎 复选框，以根据 Vue Language 服务器 的数据评估符号的类型。

   默认情况下，复选框是清除的，因此类型评估、解析、代码检查和重构基于 GoLand 内部 TypeScript 引擎的类型信息。

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

配置缩进

默认情况下，顶级标签内的代码会以 Vue.js 特有的风格进行统一缩进。 您可以将此缩进配置为依赖于所使用的语言，例如，特定于 HTML 或 Pug。

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

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

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

3. 在 缩进顶级选项卡的子选项卡 字段中，指定代码应有初始缩进的顶级标签。

   默认情况下，只有在 template 选项卡内的代码具有初始缩进。 如有必要，使用逗号作为分隔符添加其他选项卡。 例如，如果您在字段中指定 script ，则所有 script 选项卡内的代码会如 预览 面板所示获得初始缩进。

配置 spaces

1. 默认情况下，GoLand 会在大括号的开头 ({) 和结尾 (}) 之间自动插入空格，适用于 使用 Mustache 语法的 Vue.js 文本插值。

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

2. 默认情况下，当您在块注释中封闭一个代码片段时，文本会在打开 /* 字符后立即开始，没有任何空格。 在关闭 */ 字符前都没有插入空格。

   这种默认的代码样式可能与一些代码检查工具的规则发生冲突，例如，ESLint。 要优化代码风格，请配置起始和结束区块注释中的前后空格。

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

配置换行和大括号

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

2. 如果一个 Vue.js 插值内的 JavaScript 表达式 有换行符，GoLand 将自动从新的一行开始此 JavaScript 表达式，并在其后添加新的一行。

   清除 在 '{{' 后换行 和 在 '}}' 前换行 复选框以改变此默认行为。

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 ，然后在 脚本 列表中选择要运行的脚本。 它很可能是默认的 dev 脚本，但您也可以在 package.json 中配置其他脚本，例如在自定义端口上运行应用。

   

3. 可选：

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

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

   

运行应用程序

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

   

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

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

   

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

通过单个 npm run/debug 配置运行和调试 Vue.js 应用程序

1. 在代码中设置 断点。

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

   如果您使用 create-vue 生成了应用程序，GoLand 已经使用默认名称 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. 单击 运行。

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

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

   

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

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

1. 在代码中设置 断点。

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

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

   

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

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

   

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

   

5. 单击 调试。

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

   

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

1. 在代码中设置 断点。

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

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

   

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