JavaScript 后缀模板
后缀代码补全 允许您在刚键入的表达式周围添加模板代码。 当您在点号后键入其缩写（后缀）并按下展开键（默认为 Tab ），或在代码补全弹出窗口中选择该缩写时，模板会被展开。
WebStorm 附带一组预定义的后缀模板，并允许您为 JavaScript 和 TypeScript 定义自己的自定义模板，请参阅 创建自定义模板。 请注意，JavaScript 预定义模板也适用于 TypeScript 文件。
可以复制、更新和移除自定义模板。 对于预定义模板，您只能更改它们的后缀，例如，将一个较长的键替换为一个较短的键。
按下 Ctrl+Alt+S 打开设置，然后选择 。
在打开的 后缀补全 页面上，选择 启用后缀模板 复选框。
该页面显示了可用后缀及其相应模板的列表。 当您选择一个后缀时， 描述 面板会通过展示模板展开前后的代码片段来说明相应的转换。
若要激活后缀，请选中其旁边的复选框。
应用后缀模板
输入您的表达式并加上一个点。
键入后缀并按下展开键（默认为 Tab ），或从建议列表中选择后缀。 如果必要，请选择一个表达式来替换或围绕。
所有后缀模板的默认扩展键是 Tab。 查看 更改默认扩展键以了解如何选择另一个。
创建自定义模板
在 设置 对话框（Ctrl+Alt+S ），转到 。
在打开的 后缀补全 页面上，点击
，并选择模板将要使用的语言。 您可以选择 JavaScript 和 TypeScript 或 TypeScript。
在打开的 创建新模板 对话框中：
在 键 字段中指定模板后缀。
从 最低语言级别 列表中选择语言级别。
输入模板代码，在需要插入初始表达式的地方添加
$EXPR$。 在您希望光标最终停留的位置添加$END$。
默认情况下，如果调用的模板技术上适用于多个表达式，WebStorm 会提示您选择所需的表达式。
要在调用模板时让 WebStorm 自动转换最顶部的适用表达式，请选择 应用到最顶层表达式 复选框。
以与任何预定义模板相同的方式应用新创建的自定义模板：输入模板表达式后加点，然后输入后缀，例如
sum.write，然后按展开键（Tab）。
请参阅下面 创建 React 组件模板中的另一个自定义模板示例。
您也可以创建一个与现有模板略有不同的新模板，例如，在语言上下文或文本光标的最终位置方面。 WebStorm 允许您复制原始模板并在副本中进行必要的更改。
从现有模板创建一个新的自定义模板
在 设置 对话框（Ctrl+Alt+S ），转到 。
在打开的 后缀补全 页面上，选择您想要从中创建新模板的自定义模板，然后点击工具栏上的
。在打开的 编辑模板 对话框中，请根据需要编辑模板，并输入一个新的后缀。
更改默认扩展键
在 设置 对话框 Ctrl+Alt+S 中，前往 ，然后从 使用扩展模板 列表中选择一个新密钥。
禁用后缀完成
要取消展开所有已配置的后缀模板，请清除 启用后缀模板 复选框。
如需禁止扩展特定模板，请清除其后缀旁边的复选框。
示例：创建 React 组件模板
以下是一个模板示例，该模板将展开为一个新的 React 组件的类。
创建新的 React 组件模板
在 设置 对话框（Ctrl+Alt+S ），转到 。
在打开的 后缀补全 页面上，点击
，并选择 JavaScript。 将打开 创建新模板 对话框。在 键 字段中，输入
rcomp缩写。从 最低语言级别 列表中选择 ECMAScript 6+。 这意味着该模板将仅用于语言级别为 ECMAScript 6+ 或 Flow 的 JavaScript 文件中。
了解更多信息，请参阅 选择 JavaScript 语言版本。
输入模板文本，在初始表达式（由
.rcomp引导）将出现的位置添加$EXPR$。 不要忘记在模板展开后希望光标所在的位置添加$END$。class $EXPR$ extends Component { render() { return ( <div> $END$ </div> ); } } export default $EXPR$;
应用新的 React 组件模板
在编辑器中，输入新组件的名称
Button并加上一个点。从建议列表中选择 rcomp。 WebStorm 生成一个类
Button并将光标放置在$END$变量所在的位置。