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 语言版本 了解详情。
键入包含
$EXPR$的模板文本，以标记初始表达式（以.rcomp开头）出现的位置。 请勿忘记在模板展开后希望光标所在的位置添加$END$。class $EXPR$ extends Component { render() { return ( <div> $END$ </div> ); } } export default $EXPR$;
应用新的 React 组件模板
在编辑器中，键入新组件的名称
Button，然后输入一个点。在建议列表中选择 rcomp。 WebStorm 会生成一个类
Button，并将光标放置在原先变量$END$所在的位置。