WebStorm 输入 $ 自动补全模板字符串

JS 里拼字符串我基本只用模板字符串，写法是反引号加 ${}。手工敲的话步骤很碎：先把普通引号改成反引号，再敲 $，再补一对花括号，最后把光标移进去。WebStorm 有个很省事的能力——在普通引号字符串里直接敲 $，它会自动把外层引号换成反引号，并补出 ${}，光标停在花括号中间等你输入变量名。

这个行为默认是开着的，但如果你发现敲 $ 没反应（或者反过来，你觉得它多事想关掉），就是下面这个开关的问题。这篇记的是它的设置位置。

设置位置

打开设置面板，进入 Editor → General → Smart Keys，往下找到 JavaScript 分组（TS 项目同样受这里控制），关注这两项：

1. Insert '{}' after '#39; in template strings：在模板字符串里敲 $ 时自动补出一对花括号。
2. Convert quotes to backticks when '${' is typed（部分版本文案是 Use backticks when typing '${'）：这是关键项，普通引号字符串里敲出 ${ 时，自动把外层的 ' 或 " 换成反引号。

两项都勾上，才有「在单引号字符串里敲 $ 就自动变成模板字符串」的完整效果。

下图是这个面板，重点看 Smart Keys 页面下 JavaScript 分组里这两个复选框的勾选状态。

注意事项

1. 这个转换只在光标处于字符串字面量内部时触发，在字符串外面敲 $ 不会有任何变化。
2. 已经是反引号的字符串里敲 $ 只会补花括号，不会重复转换引号。
3. 如果项目里 ESLint 配了 quotes 规则强制单引号，自动转成反引号后可能被规则报错，需要在规则里把 allowTemplateLiterals 打开。