Vue.js

创建 Vue.js 组件

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

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

   

提取组件

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

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

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

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

   

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

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

  

• 在 template 标签中，Vue.js 组件和属性支持代码补全 Ctrl+Space 及跳转到定义 Ctrl+B。

  

补全 Vue.js 属性和方法

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

  

补全插槽名称

• WebStorm 可为库组件及项目中定义的组件中的 slot 名称提供补全建议。

  如果您的项目包含具有命名 slot 的组件，WebStorm 会在 v-slot 指令中的 template 标签里提供这些名称的建议。

  

• 如果您使用的是 Vuetify、 Quasar 或 BootstrapVue ，同样支持对 slot 名称的代码补全。

  

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

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

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

  

• 在组件的 template 属性中的模板字符串内部，也可以获得与在 template 标签中所获得的相同的代码补全。

  

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

补全 Vue.js 注入中的代码

在 HTML 文件中的 Vue.js 注入中，WebStorm 能识别 Vue.js 语法并相应地高亮显示您的代码。 在 HTML 文件中通过 CDN 引用的 Vue.js 库，WebStorm 也可以为其符号提供补全，无需将这些库添加到项目依赖中。

1. 打开包含指向外部 Vue.js 库的 CDN 链接的 HTML 文件。 WebStorm 高亮显示该链接。

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

该库将添加到 设置 | 语言与框架 | JavaScript | 库 页面上的 JavaScript 库列表中。 如需了解更多信息，请参阅 通过 CDN 链接添加库的配置方法。

配置参数提示

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

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

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

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

4. 对于某些方法和函数，WebStorm 在任何上下文中都不会显示参数提示。 点击 排除列表... 可查看这些方法和函数，尝试为其启用参数提示，或向列表中添加新项。

5. 如需在任何上下文中隐藏任意值类型的参数提示，请取消选中 Vue 模板 复选框（位于 参数名称 下）。

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 语言服务不适用于 TypeScript 5.0.0 及更高版本。 因此，如果项目使用的是这些版本之一，错误高亮将通过 WebStorm 内部代码检查提供。

   • 选择 已禁用 ，以关闭 TypeScript 语言服务和 Vue Language Server，并由 WebStorm 内部支持提供代码支持。

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

   默认情况下，该复选框未选中，因此类型评估、解析、代码检查与重构均基于 WebStorm 内部 TypeScript 引擎的类型信息。

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

配置缩进

默认情况下，顶层标签内的代码会以 Vue.js 专用样式统一缩进。 您可以根据所用语言配置此缩进方式，例如为 HTML 或 Pug 专用样式。

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

2. 默认情况下，所有顶层标签中的内容都使用 Vue.js 专用样式统一缩进。 接受默认缩进设置，或使用页面上的控件自定义缩进。 更改设置时，右侧面板中的 预览 将显示这些更改对代码格式的影响。

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

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

   默认情况下，仅 template 标签中的代码会进行初始缩进。 如有必要，请使用逗号作为分隔符添加其他标签。 例如，如果在字段中指定了 script ，则所有 script 标签内的代码将按 预览 面板所示进行初始缩进。

配置空格

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

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

2. 默认情况下，当您将代码片段包含在块注释中时，文本会紧跟在起始 /* 字符之后，无需空格。 在结束 */ 字符之前也不会插入空格。

   此默认代码风格可能与某些 linter 的规则发生冲突，例如 ESLint。 要改善代码风格，请配置在块注释中添加前导和尾随空格。

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

配置换行与括号

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

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

   取消选择 在 '{{' 后换行 和 在 '}}' 前换行 复选框以更改此默认行为。

3. 按照 Vue.js 代码风格：可视化参考线中的说明配置多个右边距。

4. 按照 换行选项中的说明配置插值中的换行格式。

使用 Prettier 重新格式化代码

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

• 要自动对特定文件运行 Prettier，请打开 设置 对话框（Ctrl+Alt+S ），转到 Languages、Frameworks | 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 语言服务 运行，因此您可以禁用 TSLint 与 WebStorm 的集成，以避免重复的错误报告。

   为此，请打开 设置 对话框（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 的运行配置，然后点击其旁边的 。 这可以是自动生成的 dev 配置，也可以是您根据 上述说明手动创建的自定义配置。

   

2. 请等待应用程序编译完成并准备好开发服务器。

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

   

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

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

1. 在代码中设置 断点。

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

   如果您的应用程序是使用 create-vue 生成的，WebStorm 已使用默认名称 npm dev 创建了一个 npm 配置。 该配置可通过 运行 小部件以及 运行/调试配置 对话框访问。

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

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

   

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

   

5. 单击 运行。

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

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

   

6. 当第一个断点被触发时，切换到 Debug 工具窗口并照常进行操作： 单步执行程序、 暂停并继续程序执行、 在挂起时检查其状态 ，查看调用堆栈和变量，设置监视，评估变量， 查看实际 HTML DOM 等。

使用 JavaScript Debug 运行/调试配置启动调试

1. 在代码中设置 断点。

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

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

   

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

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

   

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

   

5. 单击 调试。

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

   

6. 当第一个断点被触发时，切换到 Debug 工具窗口并照常进行操作： 单步执行程序、 暂停并继续程序执行、 在挂起时检查其状态 ，查看调用堆栈和变量，设置监视，评估变量， 查看实际 HTML DOM ，等等。

1. 在代码中设置 断点。

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

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

   

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