生成代码

WebStorm 提供了多种生成通用代码结构和重复元素的方法，可帮助您提高生产力。这些可以是创建新文件时使用的文件模板、自定义或预定义的实时模板，这些模板根据上下文、各种包装或字符的自动配对以不同方式应用。

此外，WebStorm 提供代码完成和Emmet支持。

使用实时模板创建代码结构

WebStorm为许多常见的代码结构提供了许多预定义的实时模板。您还可以定义自定义模板以涵盖特定于您的工作流程的用例。

您可以通过插入和扩展实时模板以及使用环绕模板包装代码片段来创建代码结构。例如，您可以将代码片段包含在标签中，请参阅将代码片段包装在标签中。

将插入符号放在您希望模板展开的位置。
键入模板缩写并按调用键（Tab默认情况下）。
或者，要使用代码完成，请按Ctrl+J或从上下文菜单中选择“插入实时模板”，然后从建议列表中选择所需的模板。要查看所选建议的快速文档，请按Ctrl+Q。
如果所选模板需要用户输入，则第一个输入字段用红框标记。在此框架中输入您的值，然后按Enter或Tab完成输入并传递到下一个输入字段。完成最后一个输入字段后，插入符号移动到构造的末尾，编辑器返回常规操作模式。
有关详细信息，请参阅实时模板：参数化模板。

WebStorm 让您可以从封闭语句中快速展开或提取表达式。此操作可用于 JavaScript if ...else、for、while和do...while控制结构以及XML和HTML标记。

将插入符号放在要提取或展开的表达式处。
选择代码 | 从主菜单中展开/删除Ctrl+Shift+Delete或按。WebStorm 显示一个弹出窗口，其中包含当前上下文中可用的所有操作。需要提取的语句显示在蓝色背景上，要删除的语句显示在灰色背景上。
单击所需的操作或使用向上和向下箭头键选择它，然后按Enter。

WebStorm 可以自动添加右大括号和其他配对元素。

在Settings/Preferences对话框 ( Ctrl+Alt+S) 中，单击Editor下的General，然后单击Smart Keys。智能钥匙页面打开。
要在按下时自动添加右大括号Enter，请选择Enter区域中的Insert pair }复选框。
通过选择XML/HTML区域中的相关复选框来配置关闭标签的自动插入。

缩进级别在Code Style中定义。

WebStorm 可以生成一个构造函数，该构造函数使用相应参数的值初始化特定字段。

类人{私有只读名称：字符串私有只读姓氏：字符串}

类人{私有只读名称：字符串私有只读姓氏：字符串构造函数（名称：字符串，姓氏：字符串）{ this.name = name; this.lastName = 姓氏；} }

WebStorm 可以为类中的字段生成访问器和修改器方法（getter和setter）。WebStorm 根据您的代码生成命名偏好生成 getter 和 setter 的名称，有关详细信息，请参阅JavaScript 代码样式：代码生成和TypeScript 代码样式：代码生成。

类人{私人姓名：字符串私人姓氏：字符串}

类人{获取名称（）：字符串{返回this._name；} get lastName(): string { return this._lastName; } 私有 _name：字符串 私有 _lastName：字符串 }
                    

类人 { 设置名称（值：字符串） { this._name = 值；} 设置 lastName(value: string) { this._lastName = value; } 私有 _name：字符串 私有 _lastName：字符串 }
                    

从类的上下文菜单中选择生成或按Alt+Insert。
在“生成”弹出窗口中，单击以下选项之一：
- Getter生成访问器方法以获取类字段的当前值。
- Setter生成用于设置类字段值的 mutator 方法。
- Getter 和 Setter生成访问器和修改器方法。
在打开的对话框中，选择要为其生成 getter 或 setter 的字段，然后单击OK。

如果一个类被声明为实现接口或抽象类，它必须实现父类或基接口的方法。WebStorm 为已实现的方法创建存根。

您可以通过从预定义的模板生成必要的代码来覆盖父类的任何方法。WebStorm 创建一个包含对超类方法的调用的存根，您只需在方法的主体中提供一些有意义的源代码。

您还可以使用代码完成并从完成建议列表中选择父方法。如果可能，WebStorm 会自动添加参数、生成super()调用并显示类型信息。从代码完成中了解更多信息。

在Settings/Preferences对话框 ( Ctrl+Alt+S) 中，转到Languages and Frameworks | JavaScript。
在打开的JavaScript页面上，清除Expand method body in completion for overrides复选框。

最后修改：2021 年 5 月 25 日