Vue.js

创建一个 Vue.js 组件

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

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

   

提取组件

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

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

   • 要使用重构功能，请从主菜单或选择的上下文菜单中选择 重构 | 提取 | 提取 Vue 组件。

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

   

在 script、style 和 template 块中完成代码

• 默认情况下，IntelliJ IDEA 会为 script 块中的 ECMAScript 6 提供代码补全，为 样式 块中的 CSS 提供代码补全。

  

• 在 模板 标记内，可对 Vue.js 组件和特性使用代码补全、 Ctrl+Space 以及导航到定义 Ctrl+B。

  

完整的 Vue.js 属性和方法

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

  

完整插槽名称

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

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

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

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

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

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

• 组件的 模板 属性中的模板字符中的模板字面量会获得自动补全，就像这段代码在 模板 标签内一样。

  如果模板在单独的 HTML 文件中定义， 然后链接到 模板 属性， 也可以使用代码补全功能。

在 Vue.js 注入中完成代码

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

1. 打开包含指向外部 Vue.js 库的 CDN 链接的 HTML 文件。 IntelliJ IDEA 突出了该链接。

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

该库已添加到 设置 | 语言与框架 | JavaScript | 库 页面上的 JavaScript 库列表中。 有关更多信息，请参阅 配置通过 CDN 链接添加的库。

配置参数提示

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

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

3. 通过选择相应的复选框指定您希望显示参数提示的上下文。

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

4. 对于某些方法和函数，IntelliJ IDEA 在任何情况下都不会显示参数提示。 请点击 排除列表... 查看这些方法和函数，可能启用参数提示，或者向列表中添加新项目。

5. 要隐藏任意上下文中任意值类型的参数提示，请取消选中 Vue 模板 复选框下的 参数名称。

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

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

3. 在模板内从一个变量移动到另一个变量时，请再次按 Tab。

   

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

2. 指定要使用的服务。

   • 要使用 Vue 语言服务器 (Volar)，请接受默认的 自动 选项。

   • 要关闭 Vue 语言服务器 (Volar) 并从 IntelliJ IDEA 内部支持获取编码辅助，请选择 已禁用。

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

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

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

配置缩进

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

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

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

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

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

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

配置 spaces

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

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

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

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

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

配置换行和大括号

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

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

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

3. 按照 Vue.js 代码风格：视觉指南中的描述配置多个右边距。

4. 在 换行选项 中配置插值换行。

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

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

  有关更多信息，请参阅 保存时自动运行 Prettier 和 将 Prettier 设置为默认格式化程序。

应用 Prettier 代码样式规则

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

  

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

安装和配置 typescript-tslint-plugin

1. 在命令行 shell 或嵌入式 终端 （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 语言服务 运行，因此您可以禁用与 IntelliJ IDEA 的 TSLint 集成，以避免重复的错误报告。

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

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

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

   

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

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

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

   

3. 可选：

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

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

   

运行应用程序

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

   

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

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

   

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

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

1. 在代码中设置 断点。

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

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

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

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

   

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

   

5. 点击 运行。

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

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

   

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

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

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

1. 在代码中设置 断点。

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

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

   

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

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

   

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

   

5. 点击 调试。

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

   

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

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

1. 在代码中设置 断点。

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

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

   

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

   

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