生成代码

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

此外，WebStorm 提供代码补全和 Emmet支持。

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

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

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

插入实时模板

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

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

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

查看可用实时模板列表

按下 Ctrl+Alt+S 以打开设置，然后选择编辑器 | 实时模板。
打开的实时模板页面显示了按语言分组的所有已配置实时模板。更多信息，请参见创建实时模板。

解包和移除语句

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

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

完成成对字符

WebStorm 能够自动添加闭括号和其他成对元素。

在设置对话框（Ctrl+Alt+S ）中，单击常规下的编辑器，然后单击智能键。打开的智能键页面。
要在按下 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。
在生成弹出窗口中，点击构造函数。
如果类包含字段，请选择要由构造函数初始化的字段，然后点击 OK。

生成 getter 和 setter

WebStorm 能为您类中的字段生成存取器和变异器方法（getters 和 setters）。 WebStorm 根据您的代码生成命名首选项生成 getter 和 setter 的名称。有关更多信息，请参阅 JavaScript 代码样式：代码生成和 TypeScript 代码样式：代码生成。

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 的字段，然后点击 OK。

实现接口或抽象类的方法

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

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

重写超类的方法

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

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

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

关闭重写方法体的生成

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

最后修改日期： 2025年 12月 8日