实时模板变量

展开实时模板缩写时，其变量会作为可输入字段显示，供您输入值，或直接用值替换。这些可能是可以修改的默认值，也可能是通过 functions 计算得出的值。

要在模板中声明变量，请使用以下格式： $VAR$ 。

在表达式中，请使用不带开头和结尾美元符号 $ 的变量名，例如： lowercaseAndDash(ComponentName)。

请使用表达式定义每个变量，并针对表达式无法计算值时提供默认值。

此表达式可以包含以下结构：

用双引号括起的字符串常量
实时模板中定义的其他变量名称
预定义函数及其可选参数

配置模板变量

在设置对话框（Ctrl+Alt+S ）中，进入编辑器  |  实时模板。
选择要配置变量的模板。
在模板文本中指定变量并单击编辑变量(E)…。
在编辑模板变量对话框中，您可以对每个变量执行以下操作：
- 更改变量名称。
- 使用预定义函数定义表达式。
- 指定在表达式无法计算值时使用的默认值。默认值应使用双引号括起。
- 指定是否在表达式成功计算出值时，在提示用户输入时跳过该变量。

预定义模板变量

WebStorm 支持以下不可修改的预定义实时模板变量：

$END$ 指示代码片段完成后光标所在的位置，您将无法再按 Tab 跳转到下一个变量。
$SELECTION$ 用于环绕模板，表示要包裹的代码片段。模板展开后，会按模板中的指定内容包裹所选文本。例如，当您在代码中选择 EXAMPLE ，并通过指定缩写或按下 Ctrl+Alt+T 并从列表中选择所需模板来调用 "$SELECTION$" 模板时，WebStorm 会将选中文本包裹在双引号中，如下所示： "EXAMPLE"。

实时模板变量中使用的函数

以下函数可用于定义实时模板变量：

函数	说明
`blockCommentEnd()`	返回指示当前语言环境中块注释结束的字符。
`blockCommentStart()`	返回指示当前语言环境中块注释开始的字符。
`camelCase(<String>)`	将字符串转换为 camelCase 格式。例如， `camelCase("my-text-file")`、 `camelCase("my text file")` 和 `camelCase("my_text_file")` 均返回 `myTextFile`。
`capitalize(<String>)`	将字符串的首字母大写。例如， `capitalize("name")` 返回 `Name`。或者，您可以将其组合为 `capitalize(camelCase("my awesome class"))` ，从而获得 `MyAwesomeClass`。
`capitalizeAndUnderscore(<String>)`	将字符串的所有字母大写，并在各部分之间插入下划线。例如， `capitalizeAndUnderscore("FooBar")`、 `capitalizeAndUnderscore("foo bar")` 和 `capitalizeAndUnderscore("foo-bar")` 均返回 `FOO_BAR`。
`clipboard()`	返回系统剪贴板中的内容。
`commentEnd()`	返回当前语言环境中注释结束的字符。对于带行注释的语言，返回值为空。
`commentStart()`	返回当前语言环境中注释起始的字符。对于带行注释的语言，返回的值为行注释起始符，与 lineCommentStart() 相同。
`complete()`	在变量位置调用 code completion。
`concat(<String>, ...)`	返回将传递给函数的所有字符串参数的连接结果。例如， `concat(date()," ",user())` 返回当前系统日期与用户名，中间用空格分隔。
`dartIterableVariable()`	返回可进行迭代的变量名称。
`dartListVariable()`	返回数组元素的列表。
`dartSuggestIndexName()`	返回最常用变量名中的某个建议索引变量名，例如： `i`、 `j`、 `k` 等。当前作用域中尚未使用的名称将优先显示。
`dartSuggestVariableName()`	根据变量类型和初始值表达式，返回推荐的变量名称，依据您的代码样式设置中的命名规则。例如，如果变量用于在迭代中存储某个元素，WebStorm 将根据被迭代容器的名称，合理推测变量名。
`date([format])`	返回当前系统日期。默认情况下，在不传递参数时，返回当前系统格式的日期。要使用其他格式，请根据 SimpleDateFormat 规范提供参数。例如， `date("Y-MM-d, E, H:m")` 返回的日期格式为 `2020-02-27, Thu, 16:11`。
`dbColumns()`	返回某个表或视图的列名列表。 `dbColumns()` 用于上下文实时模板中（例如， `ins`）。您可以通过右键点击某个对象并选择 SQL 脚本来访问上下文实时模板。
`dbObjectName()`	返回某个表或视图的名称。 `dbObjectName()` 用于上下文实时模板中（例如， `top`）。您可以通过右键点击某个对象并选择 SQL 脚本来访问上下文实时模板。
`decapitalize(<String>)`	将字符串的首字母替换为对应的小写字母。例如， `decapitalize("Name")` 返回 `name`。
`defaultReturnValues`	当表达式用于 return 语句中时，返回默认值。当表达式为错误类型时，使用 `errorVariableName` 参数。
`enum(<String>, ...)`	在模板展开时，返回用于代码补全建议的字符串列表。例如， `enum("Foo","Bar","Baz")` 显示一个列表，您可以从中选择指定字符串中的一个。
`escapeString(<String>)`	转义特殊字符，以使结果可用作 Java 字符串。例如，它会将制表符替换为 `\t` ，换行符替换为 `\n` ，反斜杠转义为 `\\` ，引号转义为 `\"` ，等等。
`expectedType()`	返回模板展开所在表达式的期望类型（例如在赋值语句右侧、 `return` 之后、作为方法参数等）。仅在 Java 上下文中可用。
`fileName()`	返回当前文件的名称（包含扩展名）。
`fileNameWithoutExtension()`	返回当前文件的名称（不包含扩展名）。
`filePath()`	返回当前文件的绝对路径。
`fileRelativePath()`	返回当前文件相对于当前项目的路径。要查看某个文件的相对路径，可右键点击该文件并选择复制引用，或按下 `Ctrl+Alt+Shift+C`。
`firstWord(<String>)`	返回作为参数传入的字符串中的第一个单词。例如， `firstWord("one two three")` 返回 `one`。
`groovyScript(<String>, [arg, ...])`	执行作为字符串传入的 Groovy 脚本。第一个参数是一个字符串，可以是脚本文本，或包含该脚本的文件路径。函数会将其他可选参数作为 `_1`、 `_2`、 `_3`、...、 `_n` 变量的值传递给脚本。您还可以在脚本中使用 `_editor` 变量访问当前编辑器。以下示例展示了一个 `groovyScript()` 函数，它将给定字符串（另一个变量 $MyVar$ 的值）转换为大写字母： groovyScript("_1.toUpperCase()", MyVar) 以下示例展示了一个 `groovyScript()` 函数，该函数将所选文本拆分为单词并将其以编号列表的形式显示： groovyScript("def result = ''; _1.split().eachWithIndex { item, index -> result = result + index.next() + '. ' + item + System.lineSeparator() }; return result;", SELECTION) 最后一个示例使用了 `SELECTION` 预定义变量，意味着您需要选择文本并按 `Ctrl+Alt+T` （使用代码包围）来应用它。
`JsArrayVariable()`	返回当前 JavaScript 数组的名称。
`jsClassName()`	返回当前 JavaScript 类的名称。
`jsComponentTypeOf()`	返回当前 JavaScript 组件的类型。
`jsDefineParameter`	根据模块名称，从 `define(["module"], function (<parameter_in_question>>) {})` 中返回参数。
`jsMethodName()`	返回当前 JavaScript 方法的名称。
`jsQualifiedClassName()`	返回当前 JavaScript 类的完整名称。
`jsSuggestDefaultVariableKind(Boolean)`	布尔参数用于确定当前上下文中是否允许使用常量。如果未指定参数，则允许使用常量。模板展开时，会显示一个列表，其中包含适用于 TypeScript 和 ES6 的 `var`、 `let`、 `const` 选项，以及一个适用于早期 JavaScript 版本的 `var` 选项。
`jsSuggestImportedEntityName()`	根据文件名，为类型为 `import * as $ITEM$ from "$MODULE$"` 或 `import $ITEM$ from "$MODULE$"` 的 import 语句建议名称。
`jsSuggestIndexName()`	从最常用的变量中返回推荐的索引变量名称： `i`、 `j`、 `k` 等。当前作用域中尚未使用的名称将优先显示。
`jsSuggestVariableName()`	根据变量的类型和初始化表达式，返回建议的变量名称，依据是指向变量命名规则的代码样式设置。例如，如果变量用于在迭代中保存一个元素，WebStorm 会根据所迭代容器的名称来推测最合理的名称。
`lineCommentStart()`	返回指示当前语言上下文中行注释起始的字符。
`lineNumber()`	返回当前行号。
`lowercaseAndDash(<String>)`	将字符串转换为小写并插入 n-dash 作为分隔符。例如， `lowercaseAndDash("MyExampleName")` 和 `lowercaseAndDash("my example name")` 都返回 `my-example-name`。
`regularExpression(<String>, <Pattern>, <Replacement>)`	查找 `Pattern` 在 `String` 中的所有匹配项，并将其替换为 `Replacement`。您可以将模式指定为正则表达式，以查找字符串中所有与之匹配的内容。例如， `regularExpression(NAME, "a", "b")` 表达式将会把 $NAME$ 模板变量中的所有字母 "a" 替换为字母 "b"。您可以在模式部分使用正则表达式字符类，例如， `regularExpression(NAME, "[a-z]", "b")` 将替换变量中的任意字母。如果希望将 `\d` 或 `\w` 等模式视为正则表达式字符类，必须对斜线进行转义，使模式看起来像 `"\\d"`。
`snakeCase(<String>)`	将字符串转换为 snake_case。例如， `snakeCase("fooBar")` 和 `snakeCase("foo bar")` 都会返回 `foo_bar`。
`spaceSeparated(<String>)`	返回以空格为分隔符的指定字符串。例如， `spaceSeparated("fooBar")` 返回 `foo Bar`， `spaceSeparated("Foo_BAR")` 返回 `Foo BAR`。
`spacesToUnderscores(<String>)`	将参数中传入的字符串中的空格替换为下划线。例如， `spacesToUnderscores("foo bar BAZ")` 返回 `foo_bar_BAZ`。
`substringBefore(<String>, <Delimeter>)`	返回指定分隔符之前的子字符串。这对于移除测试文件名中的扩展名非常有用。例如， `substringBefore(fileName(),".")` 在文件名为 component-test.js 的文件中使用时将返回 `component-test`。
`time([format])`	返回当前系统时间。默认情况下，如果没有参数，则返回当前系统格式的时间。如需使用其他格式，请根据 SimpleDateFormat 规范提供参数。例如， `time("H:m z")` 返回格式化后的时间 `13:10 UTC`。
`underscoresToCamelCase(<String>)`	将带有下划线（例如 snake_case ）的字符串转换为 camelCase。例如， `underscoresToCamelCase(foo_bar_baz)` 和 `underscoresToCamelCase(FOO_BaR_baZ)` 都会返回 `fooBarBaz`。
`underscoresToSpaces(<String>)`	将字符串中的下划线转换为空格。例如， `underscoresToSpaces(foo_bar_baz)` 返回 `foo bar baz`， `underscoresToSpaces(FOO_BaR_baZ)` 返回 `FOO BaR baZ`。
`user()`	返回当前用户的名称。

示例

让我们为 Angular 组件创建一个 ngcomp 模板，与默认的 a-component 类似。该模板将包含 3 个变量：

第一个 $ComponentName$ 将成为新组件类名称的占位符。
第二个 $selector$ 将成为组件选择器的名称。
第三个 $END$ 表示模板展开后并填入 $ComponentName$ 和 $selector$ 占位符后光标应该停留的位置。

在编辑器中，选择要用于模板的代码，按下 Ctrl+Shift+A ，然后调用另存为代码模板… 操作。
输入用于调用模板的缩写，例如 ngcomp ，并添加模板描述，例如 New Angular component。
将变量添加到模板中。
1. 将 SearchComponent 替换为 $ComponentName$ 。
2. 将 selector: '$selector$', 添加到 Component({}) 内部。
3. 将 $END$ 添加到 ngOnInit(){}。
根据 Angular Style Guide ，选择器名称通常是组件名称的短横线大小写版本，因此先指定组件名称更合理。不过，在代码中选择器是排在前面的。
为解决此问题，请点击编辑变量(E)… 并使用箭头图标调整变量顺序。现在 ComponentName 将排在首位，模板展开时光标将首先跳转至该变量。
如果我们只需指定类名，并通过类名转换自动填充选择器名称，那将非常理想。为此，请点击变量 selector 旁边的表达式字段，从列表中选择 lowercaseAndDash 函数，然后将 ComponentName 作为参数输入。
与模板主体中的写法不同，在编辑模板变量对话框中，变量名使用时不带美元符 $。
可选：
您可以在 selector 旁边选择如果定义则跳过。在这种情况下，编辑完组件名称并按下 Enter 后，光标会移至 $END$ 位置，而不是 $selector$ 。
现在让我们来看看新模板的实际效果：

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