Vue.js

Create a Vue.js component创建Vue.js组件

• In the Project tool window, select the parent folder for the new component, and then choose Vue Component from the list.在“项目”工具窗口中，选择新组件的父文件夹，然后从列表中选择Vue组件。

  

Extract components提取成分

1. Select the template fragment to extract and invoke component extraction:选择要提取并调用组件提取的模板片段：

   • To use the intention action, press Alt+Enter, and then choose Extract Vue Component from the list.要使用意图操作，请按Alt+Enter，然后从列表中选择“提取Vue组件”。

   • To use the refactoring, choose Refactor | Extract | Extract Vue Component from the main menu or from the context menu of the selection.要使用重构，请从主菜单或所选内容的关联菜单中选择“重构”|“提取”|“提取Vue组件”。

2. Type the name of the new component. 键入新组件的名称。If this name is already used or invalid, WebStorm shows a warning. Otherwise a new single-file component is created and imported into the parent component.如果此名称已被使用或无效，WebStorm将显示警告。否则，将创建一个新的单文件组件并将其导入父组件。

   

Complete code inside script, style, and template blocks脚本、样式和模板块内的补全代码

• By default, WebStorm provides code completion for ECMAScript 6 inside script blocks and for CSS inside style blocks.默认情况下，WebStorm为script块内的ECMAScript 6和style块内的CSS提供代码补全。

  

• Inside the template tag, code completion Ctrl+Space and navigation to the definition Ctrl+B for Vue.js components and attributes is available.在template标记中，可以对Vue.js组件和属性使用代码补全Ctrl+Space和导航到定义Ctrl+B。

  

Complete Vue.js properties and methods完整的Vue.js属性和方法

• WebStorm also suggests completion for Vue.js properties, properties in the data object, computed properties, and methods.WebStorm还建议完成Vue.js属性、data对象中的属性、计算属性和方法。

  

Complete slot names完整的插槽名称

• WebStorm provides completion for the names of slots from library components and from components defined in your project.WebStorm提供了库组件和项目中定义的组件的插槽名称的完整性。

  If your project contains a component with named slots, WebStorm shows suggestions for these names in the v-slot directive of a template tag.如果您的项目包含具有命名插槽的组件，WebStorm会在template标记的v-slot指令中显示这些名称的建议。

  

• If you’re using Vuetify, Quasar, or BootstrapVue, code completion for slot names is also available.如果您使用的是Vuetify、Quasar或BootstrapVue，也可以使用插槽名称的代码完成。

  

Complete components defined in separate files在单独文件中定义的完整组件

• If a component is defined in several files, WebStorm recognizes the links between the parts of the component and provides proper code completion for properties, data, and methods.如果在多个文件中定义了一个组件，WebStorm将识别组件各部分之间的链接，并为属性、数据和方法提供适当的代码补全。

  For example, if the parts of your component are defined in separate JavaScript and stylesheet files that are linked in the vue file through the src attribute, properties defined in JavaScript are properly completed in the template as methods do.例如，如果组件的各个部分在单独的JavaScript和样式表文件中定义，这些文件通过src属性链接到vue文件中，则JavaScript中定义的属性会像方法一样在模板中正确完成。

  

• Templates inside template literals in the template property of a component get completion just as if this code were inside a template tag.组件的template属性中的template文本中的模板获得补全，就像此代码位于模板标记中一样。

  

  Completion is also available if a template is defined in a separate HTML file and then linked to the template property.如果模板在单独的HTML文件中定义，然后链接到template属性，则补全也可用。

Complete code inside Vue.js injectionsVue.js中的完整代码

Within Vue.js injections inside HTML files, WebStorm recognizes Vue.js syntax and highlights your code accordingly. 在HTML文件中的Vue.js注入中，WebStorm识别Vue.js语法并相应地突出显示代码。You can also get completion for symbols from Vue.js libraries that are linked from a CDN in an HTML file without adding these libraries to your project dependencies.您还可以完成Vue.js库中的符号，这些符号从HTML文件中的CDN链接而来，而无需将这些库添加到项目依赖项中。

1. Open the HTML file with a CDN link to an external Vue.js library. 使用指向外部Vue.js库的CDN链接打开HTML文件。WebStorm highlights the link.WebStorm突出显示了链接。

2. To enable completion for the library, press Alt+Enter on the link and select Download library from the list. 要启用库的完成，请在链接上按Alt+Enter，然后从列表中选择下载库。Alternatively, hover the mouse over the link and click Download library.或者，将鼠标悬停在链接上，然后单击“下载库”。

The library is added to the list of JavaScript libraries on the Settings/Preferences | Languages and Frameworks | JavaScript | Libraries page, see Configuring a library added via a CDN link for details.该库被添加到“设置/首选项”|“语言和框架”|“JavaScript”|“库”页面上的JavaScript库列表中，有关详细信息，请参阅配置通过CDN链接添加的库。

Configure parameter hints配置参数提示

1. Open the Settings/Preferences dialog Ctrl+Alt+S and go to Editor | Inlay Hints | Vue.打开“设置/首选项”对话框Ctrl+Alt+S并转到“编辑器”|“镶嵌提示”|“Vue”。

2. Select Parameter hints from the list, make sure the Show parameter hints checkbox is selected, and then specify the context where you want parameter hints shown.从列表中选择“参数提示”，确保选中“显示参数提示”复选框，然后指定要显示参数提示的上下文。

3. For some methods and functions, WebStorm does not show parameter hints in any context. 对于某些方法和函数，WebStorm在任何上下文中都不显示参数提示。Click Exclude list... to view these methods and functions, possibly enable parameter hints for them, or add new items to the list.单“击排除列表...”以查看这些方法和函数，可能需要为它们启用参数提示，或者向列表中添加新项。

1. Type the abbreviation of the template to use or press Ctrl+J and select it from the list of available templates.键入要使用的模板的缩写，或按Ctrl+J并从可用模板列表中选择它。

2. To expand the template, press Tab.要展开模板，请按Tab键。

3. To move from one variable to another inside the template, press Tab again.要在模板内从一个变量移动到另一个变量，请再次按Tab键。

   

Configure indentation配置缩进

By default, code within top-level tags is indented uniformly, in the Vue.js-specific style. 默认情况下，顶级标记中的代码以特定于Vue.js的样式一致性缩进。You can configure this indentation to depend on the language used, for example, be HTML or Pug-specific.您可以将此缩进配置为取决于所使用的语言，例如，特定于HTML或Pug。

1. In the Settings/Preferences dialog Ctrl+Alt+S, go to Editor | Code Style | Vue, and open the Tabs and Indents tab.在“设置/首选项”对话框Ctrl+Alt+S中，转到“编辑器”|“代码样式”|“Vue”，然后打开选项卡和缩进选项卡。

2. By default, the contents of all top-level tags are indented uniformly, in the Vue.js-specific style. 默认情况下，所有顶级标记的内容都以Vue.js特定样式一致性缩进。Accept the default indentation settings or customize them using the controls on the page. 接受默认缩进设置或使用页面上的控件自定义它们。As you change the settings, the Preview in the right-hand pane shows how the the changes affect code formatting.更改设置时，右侧窗格中的“预览”将显示更改如何影响代码格式。

   To have the code inside top-level tags indented with regard to its language, select Specific to the language in the block.要使顶级标记中的代码相对于其语言缩进，请选择“特定于块中的语言”。

3. In the Indent children of top-level tag field, specify the top-level tags where the code should have initial indentation.在顶级标记的缩进子项字段中，指定代码应具有初始缩进的顶级标记。

   By default, only the code inside template tags has initial indentation. 默认情况下，只有template标记中的代码具有初始缩进。If necessary, add other tags using commas as separators. 如有必要，使用逗号作为分隔符添加其他标记。For example, if you specify script in the field, the code inside all script tags gets initial indentation as shown in the Preview pane.例如，如果在字段中指定script，则所有脚本标记中的代码都会获得初始缩进，如“预览”窗格中所示。

Configure spaces配置空间

1. In the Settings/Preferences dialog Ctrl+Alt+S, go to Editor | Code Style | Vue, and open the Spaces tab.在“设置/首选项”对话框中，按Ctrl+Alt+S，转到“编辑器”|“代码样式”|“Vue”，然后打开“空间”选项卡。

2. By default, WebStorm automatically inserts spaces after the opening curly brace ({) and before the closing one (}) in Vue.js text interpolations with Mustache syntax.默认情况下，WebStorm会自动在使用Mustache语法的Vue.js文本插值中在开始的大括号（{）之后和结束的大括号（}）之前插入空格。

   To suppress inserting spaces automatically, clear the Interpolations checkbox.要禁止自动插入空间，请清除“插值”复选框。

Configure wrapping and braces换行和括号

1. In the Settings/Preferences dialog Ctrl+Alt+S, go to Editor | Code Style | Vue, and open the Wrapping and Braces tab.在“设置/首选项”对话框Ctrl+Alt+S中，转到“编辑器”|“代码样式”|“Vue”，然后打开“换行和括号”选项卡。

2. If a JavaScript expression inside a Vue.js interpolation has line breaks, WebStorm automatically starts this JavaScript expression from a new line and adds a new line after it.如果Vue.js插值中的JavaScript表达式有换行符，WebStorm会自动从新行启动此JavaScript表达式，并在其后添加新行。

   Clear the New line after '{{' and the New line before '}}' checkboxes to change this default behavior.清除'{{'之后的新行和'}}'之前的新行复选框以更改此默认行为。

3. Configure multiple right margins as described in Vue.js code style: Visual guides.按照Vue.js代码样式：视觉指南中的说明配置多个右页边距。

4. Configure wrapping in interpolations as described in Wrapping options.按照换行选项中的说明配置插值中的换行。

Reformat code with Prettier用Prettier重新格式化代码

• In the editor, select the code fragment to reformat. 在编辑器中，选择要重新格式化的代码片段。To reformat a file or a folder, select it in the Project tool window. 要重新格式化文件或文件夹，请在“项目”工具窗口中选择它。Then press Ctrl+Alt+Shift+P or select Reformat with Prettier from the context menu.然后按Ctrl+Alt+Shift+P或从关联菜单中选择“使用Prettier重新格式化”。

• To run Prettier automatically against specific files, open the Settings/Preferences dialog Ctrl+Alt+S, go to Languages and Frameworks | JavaScript | Prettier, and use the On code reformatting and On save checkboxes to specify the actions that will trigger Prettier.要针对特定文件自动运行Prettier，请打开“设置/首选项”对话框Ctrl+Alt+S中，转到“语言和框架”|“JavaScript”|“Prettier”，并使用“代码重新格式化”和“保存时”复选框指定将触发Prettier的操作。

  For details, see Run Prettier automatically on save and Set Prettier as default formatter.有关详细信息，请参阅在保存时自动运行Prettier和将Prettier设置为默认格式化程序。

Apply Prettier code style rules应用更漂亮的代码样式规则

• In the project where Prettier is enabled, open package.json and click Yes in the pane at the top of the tab.在启用Prettier的项目中，打开package.json并在选项卡顶部的窗格中单击Yes。

  

• To re-apply the Prettier code style (after you've clicked No in the pane or modified the code style), press Ctrl+Shift+A and select Apply Prettier Code Style Rules from the Find Action list.要重新应用Prettier代码样式（在窗格中单击“否”或修改代码样式后），请按Ctrl+Shift+A并从“查找操作”列表中选择“应用Prettier代码样式规则”。

Install and configure 安装和配置typescript-tslint-plugin

1. In the embedded Terminal(Alt+F12), type:在嵌入式终端（Alt+F12）中，键入：

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

2. In the plugins property of your tsconfig.json file, type:在tsconfig.json文件的plugins属性中，键入：

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

3. When you are using typescript-tslint-plugin, TSLint is running via the TypeScript Language Service so you can disable the TSLint integration with WebStorm to avoid duplicate error reporting.使用typescript-tslint-plugin,时，TSLint通过Typescript语言服务运行，因此可以禁用与WebStorm的tslint集成，以避免重复错误报告。

   To do that, open the Settings/Preferences dialog Ctrl+Alt+S, go to Languages and Frameworks | TypeScript | TSLint, and select Disable TSLint.为此，请打开“设置/首选项”对话框Ctrl+Alt+S，转到“语言和框架”|“TypeScript”|“TSLint”，然后选择“禁用TSLint”。

1. Select the npm serve run configuration from the list on the toolbar and click next to the list.从工具栏上的列表中选择npm serve run配置，然后单击列表旁边的。

   Alternatively, run npm start in the Terminal Alt+F12 or double-click the start task in the npm tool window(View | Tool Windows | npm).或者，在终端Alt+F12中运行npm start或双击npm工具窗口（“查看”|“工具窗口”|“npm”）中的启动任务。

2. Wait till the application is compiled and the development server is ready.等待应用程序编译完成，开发服务器准备就绪。

   The Run tool window or the Terminal shows the URL at which your application is running, by default it is http://localhost:8080/. 运行工具窗口或终端显示应用程序运行的URL，默认情况下为http://localhost:8080/。Click this link to view the application.单击此链接可查看应用程序。

   

When the development server is running, your application is automatically reloaded as soon as you change any of the source files and save the updates.当开发服务器运行时，只要更改任何源文件并保存更新，应用程序就会自动重新加载。

Debug applications created with Vue CLI调试使用Vue CLI创建的应用程序

1. Set the breakpoints in your code.在代码中设置断点。

2. Start the application in the development mode as described above and wait till the application is compiled and the development server is ready.按上述开发模式启动应用程序，并等待应用程序编译完成，开发服务器准备就绪。

3. Select the autogenerated Debug Application configuration from the list and click next to the list.从列表中选择自动生成的调试应用程序配置，然后单击列表旁边的。

   

Debug applications running on localhost调试本地主机上运行的应用程序

1. Set the breakpoints in your code.在代码中设置断点。

2. Start the application in the development mode as described above and wait till the application is compiled and the development server is ready.按上述开发模式启动应用程序，并等待应用程序编译完成，开发服务器准备就绪。

3. The Run tool window or the Terminal shows the URL at which your application is running, by default it is http://localhost:8080/. 运行工具窗口或终端显示应用程序运行的URL，默认情况下为http://localhost:8080/。Hold Ctrl+Shift and click this URL link. 按住Ctrl+Shift并单击此URL链接。WebStorm starts a debugging session with an automatically generated Debug Application configuration of the type JavaScript Debug.WebStorm使用自动生成的JavaScript调试类型的调试应用程序配置启动调试会话。

   

Debug applications running on custom URLs调试在自定义URL上运行的应用程序

1. Set the breakpoints in your code.在代码中设置断点。

2. Start the application in the development mode as described above and wait till the application is compiled and the development server is ready.按上述开发模式启动应用程序，并等待应用程序编译完成，开发服务器准备就绪。

3. The Run tool window or the Terminal shows the URL at which your application is running. 运行工具窗口或终端显示应用程序运行的URL。Copy this URL address, you will later specify it in a debug configuration. 复制此URL地址后，您将在调试配置中指定它。To view your application, just click the link.要查看您的应用程序，只需单击链接。

4. Create a JavaScript Debug configuration. 创建JavaScript调试配置。To do that, go to Run | Edit Configurations on the main menu, click , and select JavaScript Debug from the list. 为此，请转到主菜单上的“运行”|“编辑配置”，单击，然后从列表中选择JavaScript调试。In the Run/Debug Configuration: JavaScript Debug dialog, paste the saved URL in the URL field and save the configuration.在运行/调试配置：JavaScript调试对话框中，将保存的URL粘贴到URL字段中，然后保存配置。

5. To launch your newly created configuration, select it from the list of configurations and click next to the list.要启动新创建的配置，请从配置列表中选择它，然后单击列表旁边的。