Vue.js

创建一个 Vue.js 组件

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

  

提取组件

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

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

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

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

   

脚本、样式和模板块内的完整代码

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

  

• 在template标签内，可以使用代码完成Ctrl+Space和导航到Ctrl+BVue.js 组件和属性的定义。

  

完整的 Vue.js 属性和方法

• WebStorm 还建议完成 Vue.js 属性、data对象中的属性、计算属性和方法。

  

完整的插槽名称

• WebStorm 为来自库组件和项目中定义的组件的插槽名称提供补全。

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

  

• 如果您使用的是Vuetify、Quasar或BootstrapVue，还可以使用插槽名称的代码完成。

  

在单独文件中定义的完整组件

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

  例如，如果组件的各个部分定义在单独的 JavaScript 和样式表文件中，这些文件通过属性链接到vuesrc文件中，则JavaScript 中定义的属性会像方法一样在模板中正确完成。

  

• 组件属性中的模板文字内的模板template可以完成，就像这段代码在template标签内一样。

  

  template如果模板在单独的 HTML 文件中定义然后链接到属性，则完成也可用。

Vue.js 注入中的完整代码

在 HTML 文件中的 Vue.js 注入中，WebStorm 识别 Vue.js 语法并相应地突出显示您的代码。您还可以完成从 HTML 文件中的 CDN 链接的 Vue.js 库中的符号，而无需将这些库添加到您的项目依赖项中。

1. 打开带有指向外部 Vue.js 库的 CDN 链接的 HTML 文件。WebStorm 突出显示该链接。

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

该库被添加到Settings/Preferences |上的 JavaScript 库列表中。语言和框架 | JavaScript | 库页面，有关详细信息，请参阅配置通过 CDN 链接添加的库。

配置参数提示

1. 打开Settings/Preferences对话框 ( Ctrl+Alt+S) 并转到Editor | 镶嵌提示 | Vue。

2. 从列表中选择参数提示，确保选中显示参数提示复选框，然后指定要显示参数提示的上下文。

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

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

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

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

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

   

配置缩进

默认情况下，顶级标签中的代码以 Vue.js 特定的样式统一缩进。您可以将此缩进配置为取决于所使用的语言，例如，是 HTML 或 Pug 特定的。

1. 在Settings/Preferences对话框 ( Ctrl+Alt+S) 中，转到Editor | 代码风格 | Vue Template，然后打开Tabs and Indents选项卡。

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

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

3. 在Indent children of top-level tag字段中，指定代码应具有初始缩进的顶级标记。

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

配置空间

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

   要自动禁止插入空格，请打开Settings/Preferences对话框 ( Ctrl+Alt+S)，转到Editor | 代码风格 | Vue Template，然后打开Spaces选项卡并清除Interpolations复选框。

2. 默认情况下，当您将代码片段包含在块注释中时，文本会在开始/*字符之后开始，没有任何空格。在结束*/字符之前也没有插入空格。

   此默认代码样式可能与某些 linter 的规则冲突，例如 ESLint。要改进代码样式，请在前导和尾随空格中配置封闭块注释。

   在Settings/Preferences对话框 ( Ctrl+Alt+S) 中，转到Editor | 代码风格 | JavaScript或编辑器 | 代码风格 | TypeScript，打开Code Generation选项卡，并在Comments区域配置空格和格式。

配置换行和大括号

1. 在Settings/Preferences对话框 ( Ctrl+Alt+S) 中，转到Editor | 代码风格 | Vue Template，然后打开Wrapping and Braces选项卡。

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

   清除“{{”之后的新行和“}}”之前的新行复选框以更改此默认行为。

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

4. 如Wrapping options中所述配置插值中的换行。

使用 Prettier 重新格式化代码

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

• 要针对特定​​文件自动运行 Prettier，请打开Settings/Preferences对话框 ( Ctrl+Alt+S)，转到Languages and Frameworks | JavaScript | Prettier，并使用On code reformatting和On save复选框指定将触发 Prettier 的操作。

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

应用更漂亮的代码样式规则

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

  

• 要重新应用 Prettier 代码样式（在您单击窗格中的否或修改代码样式之后），请按并从Find Action列表中Ctrl+Shift+A选择Apply Prettier Code Style Rules 。

安装和配置 typescript-tslint-plugin

1. 在嵌入式终端( Alt+F12) 中，键入：

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

2. 在tsconfig.jsonplugins文件的属性中，键入：

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

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

   为此，请打开设置/首选项对话框 ( Ctrl+Alt+S)，转到语言和框架 | 打字稿 | TSLint，然后选择禁用 TSLint。

1. 从工具栏上的列表中选择npm serve运行配置，然后单击列表旁边的。

   或者，npm start在终端 Alt+F12中运行或双击npm 工具窗口start中的任务（查看 | 工具窗口 | npm）。

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

   运行工具窗口或终端显示应用程序运行的 URL，默认为http ://localhost:8080/。单击此链接以查看应用程序。

   

当开发服务器运行时，只要您更改任何源文件并保存更新，您的应用程序就会自动重新加载。

调试使用 Vue CLI 创建的应用程序

1. 在代码中设置断点。

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

3. 从列表中选择自动生成的调试应用程序配置，然后单击列表旁边的。

   

调试在 localhost 上运行的应用程序

1. 在代码中设置断点。

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

3. 运行工具窗口或终端显示应用程序运行的 URL，默认为http ://localhost:8080/。按住Ctrl+Shift并单击此 URL 链接。WebStorm 使用自动生成的JavaScript Debug类型的调试应用程序配置启动调试会话。

   

调试在自定义 URL 上运行的应用程序

1. 在代码中设置断点。

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

3. 运行工具窗口或终端显示应用程序正在运行的URL。复制此 URL 地址，稍后您将在调试配置中指定它。要查看您的应用程序，只需单击链接。

4. 创建一个JavaScript 调试配置。为此，请转到运行 | 在主菜单上编辑配置，单击，然后从列表中选择JavaScript 调试。在“运行/调试配置：JavaScript 调试”对话框中，将保存的 URL 粘贴到URL字段中并保存配置。

5. 要启动新创建的配置，请从配置列表中选择它，然后单击列表旁边的。