WebStorm 设置按 Tab 键扩展 Emmet 标签

写 HTML 和 Vue 模板时我很依赖 Emmet：敲 div.container>ul>li*3 一键展开成完整结构，比手写标签快太多。WebStorm 内置了 Emmet 支持，但默认的展开键是 Tab，而 Tab 同时也是代码补全的确认键和缩进键，三者会互相抢——有时候我想展开 Emmet 缩写，按下去却只是插入了一个缩进，或者选中了补全列表里的第一项。

这篇记的是 Emmet 展开键的设置位置，把它改成 Enter 或者自定义快捷键就能和 Tab 分开，各干各的。

设置位置

打开设置面板，进入 Editor → Emmet → HTML（CSS 缩写在同级的 CSS 页面，JSX 在 JSX 页面），关注这两项：

1. Enable Emmet：Emmet 总开关，必须先勾上，不然所有缩写都不生效。
2. Expand abbreviation with：关键项，下拉框选展开键，常见值是 Tab、Enter、Custom。选 Custom 之后可以去 Keymap 里给 Expand Abbreviation 这个 action 绑一个不冲突的组合键。

页面上还有几个影响展开结果的开关：Enable automatic URL recognition（自动识别 URL 生成链接标签）、Add edit point at the end of template（展开后在末尾留一个编辑锚点）、Filters enabled by default（默认启用的过滤器，比如 xsl、bem）。

下图是这个面板，重点看 Enable Emmet 的勾选状态和 Expand abbreviation with 下拉框当前选的键。

注意事项

1. HTML、CSS、JSX 三个页面的 Emmet 配置是独立的，改了 HTML 不影响另两个，Vue 单文件组件的 <template> 走 HTML 那套，<style> 走 CSS 那套。
2. 保留 Tab 的话要接受它和补全的冲突：补全列表弹出时 Tab 优先给补全，得先按 Esc 关掉列表再按 Tab 才能展开缩写。
3. Emmet 缩写必须写在一行且不能有多余空格，div > ul 这种带空格的写法展开不了，要写成 div>ul。
4. 在 Vue 或 React 项目里写类名要注意语法差异：Vue 模板用 div.box 展开出的是 class="box"，而 JSX 页面开启 Emmet 后展开的是 className="box"，两者由所在文件类型决定，不需要手动切换。
5. 记不住缩写语法时可以先用 Ctrl + Alt + J（Surround with Live Template）配合内置模板，或者查 Emmet 官方的 cheat sheet，常用的也就 > 子元素、+ 兄弟元素、* 重复、# id、. class、{} 文本这几个符号。