【WebStorm教程】WebStorm Generate code代码生成
代码 | 生成或Alt+Insert
配置：Ctrl+Alt+S 设置/首选项 | 编辑 | 文件和代码模板
WebStorm 提供了多种生成通用代码结构和重复元素的方法，可帮助您提高生产力。这些可以是创建新文件时使用的文件模板、自定义或预定义的实时模板，这些模板根据上下文、各种包装或字符的自动配对以不同方式应用。
此外，WebStorm 提供代码完成和Emmet支持。
从主菜单中，选择代码 | 生成 Alt+Insert以打开弹出菜单，其中包含您可以生成的可用构造。
使用实时模板创建代码结构
WebStorm为许多常见的代码结构提供了许多预定义的实时模板。您还可以定义自定义模板以涵盖特定于您的工作流程的用例。
您可以通过插入和扩展实时模板以及使用环绕模板包装代码片段来创建代码结构。例如，您可以将代码片段包含在标签中，请参阅将代码片段包装在标签中。
插入实时模板
- 将插入符号放在您希望模板展开的位置。
- 键入模板缩写并按调用键（Tab默认情况下）。
或者，要使用代码完成，请按Ctrl+J或从上下文菜单中选择“插入实时模板”，然后从建议列表中选择所需的模板。要查看所选建议的快速文档，请按Ctrl+Q。
- 如果所选模板需要用户输入，则第一个输入字段用红框标记。在此框架中输入您的值，然后按Enter或Tab完成输入并传递到下一个输入字段。完成最后一个输入字段后，插入符号移动到构造的末尾，编辑器返回常规操作模式。
用实时模板包围代码片段
- 在编辑器中，选择要包装的代码段并按下Ctrl+Alt+J或从上下文菜单或选择中选择使用实时模板环绕。
- 在建议列表中，选择所需的模板。
查看可用的实时模板列表
- 按Ctrl+Alt+S打开 IDE 设置并选择Editor | 实时模板。
- 打开的 实时模板页面显示按语言分组的所有已配置实时模板。
展开和删除语句
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 可以生成一个构造函数，该构造函数使用相应参数的值初始化特定字段。
没有构造函数
class Person {
private readonly name: string
private readonly lastName: string
}构造函数生成
class Person {
private readonly name: string
private readonly lastName: string
constructor(name: string, lastName: string) {
this.name = name;
this.lastName = lastName;
}
}- 从类的上下文菜单中选择生成或按Alt+Insert。
- 在Generate弹出窗口中，单击Constructor。
- 如果类包含字段，则选择要由构造函数初始化的字段，然后单击OK。
生成 getter 和 setter
WebStorm 可以为类中的字段生成访问器和修改器方法（getter和setter）。WebStorm 根据您的代码生成命名偏好生成 getter 和 setter 的名称。
没有 getter/setter
class Person {
private name: string
private lastName: string
}Getters
class Person {
get name(): string {
return this._name;
}
get lastName(): string {
return this._lastName;
}
private _name: string
private _lastName: string
}Setters
class Person {
set name(value: string) {
this._name = value;
}
set lastName(value: string) {
this._lastName = value;
}
private _name: string
private _lastName: string
}- 从类的上下文菜单中选择生成或按Alt+Insert。
在“生成”弹出窗口中，单击以下选项之一：
- Getter生成访问器方法以获取类字段的当前值。
- Setter生成用于设置类字段值的 mutator 方法。
- Getter 和 Setter生成访问器和修改器方法。
- 在打开的对话框中，选择要为其生成 getter 或 setter 的字段，然后单击OK。
实现接口或抽象类的方法
如果一个类被声明为实现接口或抽象类，它必须实现父类或基接口的方法。WebStorm 为已实现的方法创建存根。
- 从类的上下文菜单中选择生成Alt+Insert，然后从弹出窗口中选择实施成员，或者只需按Ctrl+I。
- 在打开的对话框中，选择要实现的方法并单击OK。
覆盖超类的方法
您可以通过从预定义的模板生成必要的代码来覆盖父类的任何方法。WebStorm 创建一个包含对超类方法的调用的存根，您只需在方法的主体中提供一些有意义的源代码。
- 从类的上下文菜单中选择“生成Alt+Insert”，然后从弹出窗口中选择“覆盖方法”或只需按Ctrl+O。
- 在打开的对话框中，选择要覆盖的方法。方法列表不包括已被覆盖或无法从当前子类访问的方法。
- 单击确定并提供方法主体的源代码。使用
左侧装订线中标记覆盖方法的图标查看基类的名称，并打开覆盖方法声明。
您还可以使用代码完成并从完成建议列表中选择父方法。如果可能，WebStorm 会自动添加参数、生成super()调用并显示类型信息。从代码完成中了解更多信息。
关闭覆盖的方法体的生成
- 在Settings/Preferences对话框 ( Ctrl+Alt+S) 中，转到Languages & Frameworks | JavaScript。
- 在打开的JavaScript页面上，清除Expand method body in completion for overrides复选框。
