实时模板变量
展开实时模板缩写时,其变量会作为可输入字段显示,供您输入值,或直接用值替换。 这些可能是可以修改的默认值,也可能是通过 functions 计算得出的值。
要在模板中声明变量,请使用以下格式: $VAR$。
在表达式中,请使用不带开头和结尾美元符号 $ 的变量名,例如: lowercaseAndDash(ComponentName)。
请使用表达式定义每个变量,并针对表达式无法计算值时提供默认值。
此表达式可以包含以下结构:
用双引号括起的字符串常量
实时模板中定义的其他变量名称
预定义函数及其可选参数
配置模板变量
在 设置 对话框(Ctrl+Alt+S )中,进入 。
选择要配置变量的模板。
在模板文本中指定变量并单击 编辑变量(E)…。
在 编辑模板变量 对话框中,您可以对每个变量执行以下操作:
更改变量名称。
使用 预定义函数 定义表达式。
指定在表达式无法计算值时使用的默认值。 默认值应使用双引号括起。
指定是否在表达式成功计算出值时,在提示用户输入时跳过该变量。
预定义模板变量
WebStorm 支持以下不可修改的预定义实时模板变量:
$END$指示代码片段完成后光标所在的位置,您将无法再按 Tab 跳转到下一个变量。$SELECTION$用于环绕模板,表示要包裹的代码片段。 模板展开后,会按模板中的指定内容包裹所选文本。 例如,当您在代码中选择EXAMPLE,并通过指定缩写或按下 Ctrl+Alt+T 并从列表中选择所需模板来调用"$SELECTION$"模板时,WebStorm 会将选中文本包裹在双引号中,如下所示:"EXAMPLE"。
实时模板变量中使用的函数
以下函数可用于定义实时模板变量:
函数 | 说明 |
|---|---|
| 返回指示当前语言环境中块注释结束的字符。 |
| 返回指示当前语言环境中块注释开始的字符。 |
| 将字符串转换为 camelCase 格式。 例如, |
| 将字符串的首字母大写。 例如, |
| 将字符串的所有字母大写,并在各部分之间插入下划线。 例如, |
| 返回系统剪贴板中的内容。 |
| 返回当前语言环境中注释结束的字符。 对于带行注释的语言,返回值为空。 |
| 返回当前语言环境中注释起始的字符。 对于带行注释的语言,返回的值为行注释起始符,与 lineCommentStart() 相同。 |
| 在变量位置调用 code completion。 |
| 返回将传递给函数的所有字符串参数的连接结果。 例如, |
| 返回可进行迭代的变量名称。 |
| 返回数组元素的列表。 |
| 返回最常用变量名中的某个建议索引变量名,例如: |
| 根据变量类型和初始值表达式,返回推荐的变量名称,依据您的代码样式设置中的命名规则。 例如,如果变量用于在迭代中存储某个元素,WebStorm 将根据被迭代容器的名称,合理推测变量名。 |
| 返回当前系统日期。 默认情况下,在不传递参数时,返回当前系统格式的日期。 要使用其他格式,请根据 SimpleDateFormat 规范提供参数。 例如, |
| 返回某个表或视图的列名列表。 |
| 返回某个表或视图的名称。 |
| 将字符串的首字母替换为对应的小写字母。 例如, |
| 当表达式用于 return 语句中时,返回默认值。 当表达式为错误类型时,使用 |
| 在模板展开时,返回用于代码补全建议的字符串列表。 例如, |
| 转义特殊字符,以使结果可用作 Java 字符串。 例如,它会将制表符替换为 |
| 返回模板展开所在表达式的期望类型(例如在赋值语句右侧、 仅在 Java 上下文中可用。 |
| 返回当前文件的名称(包含扩展名)。 |
| 返回当前文件的名称(不包含扩展名)。 |
| 返回当前文件的绝对路径。 |
| 返回当前文件相对于当前项目的路径。 要查看某个文件的相对路径,可右键点击该文件并选择 复制引用 ,或按下 Ctrl+Alt+Shift+C。 |
| 返回作为参数传入的字符串中的第一个单词。 例如, |
| 执行作为字符串传入的 Groovy 脚本。 第一个参数是一个字符串,可以是脚本文本,或包含该脚本的文件路径。 函数会将其他可选参数作为 以下示例展示了一个
groovyScript("_1.toUpperCase()", MyVar)
以下示例展示了一个
groovyScript("def result = ''; _1.split().eachWithIndex { item, index -> result = result + index.next() + '. ' + item + System.lineSeparator() }; return result;", SELECTION)
最后一个示例使用了 |
| 返回当前 JavaScript 数组的名称。 |
| 返回当前 JavaScript 类的名称。 |
| 返回当前 JavaScript 组件的类型。 |
| 根据模块名称,从 |
| 返回当前 JavaScript 方法的名称。 |
| 返回当前 JavaScript 类的完整名称。 |
| 布尔参数用于确定当前上下文中是否允许使用常量。 如果未指定参数,则允许使用常量。 模板展开时,会显示一个列表,其中包含适用于 TypeScript 和 ES6 的 |
| 根据文件名,为类型为 |
| 从最常用的变量中返回推荐的索引变量名称: |
| 根据变量的类型和初始化表达式,返回建议的变量名称,依据是指向变量命名规则的代码样式设置。 例如,如果变量用于在迭代中保存一个元素,WebStorm 会根据所迭代容器的名称来推测最合理的名称。 |
| 返回指示当前语言上下文中行注释起始的字符。 |
| 返回当前行号。 |
| 将字符串转换为小写并插入 n-dash 作为分隔符。 例如, |
| 查找 例如, |
| 将字符串转换为 snake_case。 例如, |
| 返回以空格为分隔符的指定字符串。 例如, |
| 将参数中传入的字符串中的空格替换为下划线。 例如, |
| 返回指定分隔符之前的子字符串。 这对于移除测试文件名中的扩展名非常有用。 例如, |
| 返回当前系统时间。 默认情况下,如果没有参数,则返回当前系统格式的时间。 如需使用其他格式,请根据 SimpleDateFormat 规范提供参数。 例如, |
| 将带有下划线(例如 snake_case )的字符串转换为 camelCase。 例如, |
| 将字符串中的下划线转换为空格。 例如, |
| 返回当前用户的名称。 |
示例
让我们为 Angular 组件创建一个 ngcomp 模板,与默认的 a-component 类似。 该模板将包含 3 个变量:
第一个
$ComponentName$将成为新组件类名称的占位符。第二个
$selector$将成为组件选择器的名称。第三个
$END$表示模板展开后并填入 $ComponentName$ 和$selector$占位符后光标应该停留的位置。
在编辑器中,选择要用于模板的代码,按下 Ctrl+Shift+A ,然后调用 另存为代码模板… 操作。

输入用于调用模板的缩写,例如
ngcomp,并添加模板描述,例如 New Angular component。
将变量添加到模板中。
将
SearchComponent替换为$ComponentName$。将
selector: '$selector$',添加到Component({})内部。将
$END$添加到ngOnInit(){}。

根据 Angular Style Guide ,选择器名称通常是组件名称的短横线大小写版本,因此先指定组件名称更合理。 不过,在代码中选择器是排在前面的。
为解决此问题,请点击 编辑变量(E)… 并使用箭头图标调整变量顺序。 现在
ComponentName将排在首位,模板展开时光标将首先跳转至该变量。
如果我们只需指定类名,并通过类名转换自动填充选择器名称,那将非常理想。 为此,请点击变量
selector旁边的 表达式 字段,从列表中选择lowercaseAndDash函数,然后将ComponentName作为参数输入。可选:
您可以在
selector旁边选择 如果定义则跳过。 在这种情况下,编辑完组件名称并按下 Enter 后,光标会移至$END$位置,而不是$selector$。现在让我们来看看新模板的实际效果: