生成代码

WebStorm 提供多种方式生成常用代码结构和重复性元素，从而帮助提升工作效率。这些方式包括：创建新文件时使用的 file templates ，根据上下文使用的自定义或预定义 live templates ，各种包裹器或自动补全配对字符。

此外，WebStorm 还支持 code completion 和 Emmet。

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

WebStorm 提供多种预定义的 live templates ，可用于实现常见的代码结构。您还可以定义自定义模板，以支持符合自身工作流场景的用例。

您可以通过插入和展开实时模板创建代码结构，也可以使用 surround templates 包裹代码片段。例如，您可以将代码片段包裹在标签中，请参阅 Wrapping a code fragment in a tag。

插入实时模板

将光标置于要展开模板的位置。
输入模板缩写并按下触发键（默认是 Tab）。
或者，也可以按 Ctrl+J 启用代码补全，或从上下文菜单中选择插入实时模板并从建议列表中选择所需模板。要查看所选建议的 Quick Documentation ，请按 Ctrl+Q。
如果所选模板需要用户输入，第一个输入字段将以红框标记。在该框中输入值，然后按 Enter 或 Tab 完成输入并跳转到下一个字段。完成最后一个输入字段后，光标将移至结构末尾，编辑器将恢复正常模式。
有关详细信息，请参阅 Live templates: parametrized templates。

使用实时模板包裹代码片段

在编辑器中，选择要包裹的代码，然后按 Ctrl+Alt+T。
在建议列表中选择所需模板。将鼠标悬停在建议模板上时，某些模板会在弹出窗口中显示预览。

查看可用的实时模板列表

按 Ctrl+Alt+S 打开设置，然后选择编辑器 | 实时模板。
打开的 Live Templates 页面会显示按语言分组的所有已配置实时模板。有关详细信息，请参阅创建实时模板。

展开并移除语句

WebStorm 可帮助您快速从包裹语句中展开或提取表达式。此操作适用于 JavaScript 控制结构 if ...else、 for、 while 和 do...while ，以及 XML 和 HTML 标签。

将光标放在要提取或展开的表达式上。
在主菜单中选择代码 | 解包/移除或按 Ctrl+Shift+Delete。 WebStorm 会根据当前上下文，显示包含可执行操作的弹出菜单。待提取的语句以蓝色背景显示，待删除的语句以灰色背景显示。
点击所需操作，或使用上下箭头键选择后按 Enter。

补全配对字符

WebStorm 可自动添加闭括号及其他配对元素。

在设置对话框（Ctrl+Alt+S ）中，点击常规下的编辑器，然后点击智能键。此时会打开智能键页。
要在按下 Enter 时自动添加闭括号，请在 Enter 区域中选中插入匹配的 } 复选框。
要自动插入闭合标签，请在 XML/HTML 区域中选中相关复选框。

缩进级别在代码样式中定义。

生成构造函数

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。
在生成弹出窗口中，单击构造函数。
如果类中包含字段，请选择需要由构造函数初始化的字段，然后单击确定。

生成 getter 和 setter

WebStorm 可为类中的字段生成访问器和修改器方法（getters 和 setters）。 WebStorm 会根据您的代码生成命名偏好生成 getter 和 setter 的名称。如需了解详细信息，请参阅 JavaScript Code Style: Code Generation 和 TypeScript Code Style: Code Generation。

class Person {
    private name: string
    private lastName: string
}
                    
    

class Person {
    get name(): string {
        return this._name;
    }

    get lastName(): string {
        return this._lastName;
    }

    private _name: string
    private _lastName: string
}
                    
    

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 方法可生成用于设置类字段值的修改器方法。
- Getter 与 Setter 方法可同时生成访问器与修改器方法。
在打开的对话框中，选择要为其生成 getter 或 setter 的字段，然后单击确定。

实现接口或抽象类的方法

如果类声明实现了接口或抽象类，则必须实现父类或基接口中的方法。 WebStorm 会为所实现的方法创建代码框架。

从类的上下文菜单中选择生成 Alt+Insert ，然后从弹出窗口中选择实现成员，或直接按下 Ctrl+I。
在打开的对话框中，选择要实现的方法，然后单击确定。

重写父类的方法

您可以通过从预定义模板生成所需代码来重写父类的任意方法。 WebStorm 会创建一个代码框架，其中包含对超类方法的调用，您只需在方法体中提供有意义的源代码。

从类的上下文菜单中选择生成 Alt+Insert ，然后从弹出窗口中选择重写方法，或直接按下 Ctrl+O。
在打开的对话框中，选择要重写的方法。方法列表不包含那些已被重写或当前子类无法访问的方法。
单击确定并提供方法体的源代码。在左侧边距中使用标记重写方法的图标可查看基类名称，并打开被重写的方法声明。

您还可以使用代码补全功能，从补全建议列表中选择父方法。 WebStorm 会自动添加参数、生成 super() 调用，并在可能的情况下显示类型信息。详细信息请参阅代码补全。

关闭为重写生成方法体的功能

在设置对话框（Ctrl+Alt+S ）中，转到语言与框架 | JavaScript。
在打开的 JavaScript 页面中，取消选中为重写操作在补全中展开方法体复选框。

最后修改日期： 2025年 9月 26日