Vue.js

创建一个 Vue.js 组件

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

  

提取组件

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

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

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

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

   

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

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

  

• 在 template 标签内，代码补全 Ctrl+Space 和导航到定义 Ctrl+B 适用于 Vue.js 组件和属性。

  

完整的 Vue.js 属性和方法

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

  

完整插槽名称

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

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

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

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

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

  例如，如果您的组件部分定义在单独的 JavaScript 和样式表文件中，并通过 vue 文件中的 源 属性进行链接，那么 JavaScript 中定义的属性将在模板中像方法一样正确完成。

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

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

在 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 语言服务器 字段中，指定要使用的 Vue Language 服务器 版本。

   • 接受建议的默认版本。

   • 如果您安装了另一个版本的 @vue/language-server 包，则该版本会出现在列表中。 您可以选择它或接受默认版本。

     

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

3. 指定要使用的服务。

   • 默认情况下，选择 自动 选项，这意味着默认使用 Vue Language 服务器 (Volar)。

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

     请注意，TypeScript Language Service 不支持 TypeScript 5.0.0 及以后版本。 因此，如果您的项目使用其中一个版本，通过 IntelliJ IDEA 内部代码检查将提供错误高亮显示。

   • 选择 已禁用 关闭 TypeScript Language Service 和 Vue Language 服务器，并获得 IntelliJ IDEA 的内部支持编码帮助。

4. 选择 使用服务器中的类型 复选框，以根据 Vue Language 服务器 的数据评估符号的类型。

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

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

配置缩进

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

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

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

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

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

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

配置 spaces

1. 默认情况下，IntelliJ IDEA 会在大括号的开头 ({) 和结尾 (}) 之间自动插入空格，适用于 使用 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 表达式 有换行符，IntelliJ IDEA 将自动从新的一行开始此 JavaScript 表达式，并在其后添加新的一行。

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

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

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

使用 Prettier 重新格式化代码

• 在编辑器中，选择要重新格式化的代码片段。 要重新格式化文件或文件夹，请在 项目 工具窗口 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. 在嵌入的 终端 （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 Language Service 运行，因此您可以使用 IntelliJ IDEA 禁用 TSLint 集成，以避免重复错误报告。

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

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

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

   

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

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

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

   

3. 可选：

   要在浏览器中打开应用程序，请按照以下步骤更新配置：在 浏览器 / 实时编辑 选项卡中，选中 在启动后 复选框，选择要在其中打开应用程序的浏览器，并指定应用程序将运行的 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 解释器和使用的软件包管理器。

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

   

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

   

5. 点击 运行。

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

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

   

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

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

1. 在您的代码中设置 断点。

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

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

   

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

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

   

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

   

5. 点击 调试。

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

   

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

1. 在您的代码中设置 断点。

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

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

   

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