WebStorm 设置 TypeScript 联合类型竖线两侧加空格

TypeScript 里写联合类型时，type A = 'a'|'b'|'c' 和 type A = 'a' | 'b' | 'c' 在语义上完全一样，但可读性差不少，尤其类型多了之后挤在一起很难扫。WebStorm 格式化 TS 文件时默认不给这个竖线两侧补空格，手动敲的空格一按格式化快捷键就被吃掉了。

这篇记的是让 WebStorm 在格式化时自动给联合类型和交叉类型的分隔符两侧加空格的设置位置，配好之后 Ctrl + Alt + L 出来的结果就和 Prettier 的默认风格一致了。

设置位置

打开设置面板，进入 Editor → Code Style → TypeScript，切到 Spaces 标签页。在下面的选项树里展开 Other 分组，找到这两项并勾上：

Around union/intersection types：控制 |（联合）和 &（交叉）两侧的空格，这是本篇要改的关键项。
After type reference colon / Before type reference colon：顺手确认一下，控制 name: string 里冒号前后的空格。

Spaces 页面右侧有实时预览区，勾选的同时能直接看到示例代码的变化，不用来回试。

下图是这个面板，重点看 Spaces 标签页下 Other 分组里 Around union/intersection types 的勾选状态，以及右侧预览区里联合类型的排版效果。

WebStorm 设置面板 Editor - Code Style - TypeScript 的 Spaces 标签页，勾选 Around union/intersection types

注意事项

Code Style 可以设成项目级的（页面顶部的 Scheme 选 Project），这样配置会写进 .idea/codeStyles/，提交后团队共享，比每人各配一遍靠谱。
如果项目里已经用了 Prettier 并开了保存时格式化，最终排版由 Prettier 说话，这里改了也会被覆盖，那种情况下应该去调 Prettier 配置。
改完只对新的格式化动作生效，历史文件需要重新格式化一遍才会统一，建议单独提一个只含格式化改动的 commit，免得混进业务 diff。