WebStorm 设置对象行尾自动加逗号

对象和数组的最后一项要不要带逗号（trailing comma，尾随逗号），是个纯风格问题但影响实际协作。带上的好处很实在：新增一个属性时 diff 只有新增的那一行，不会因为给上一行补逗号而多出一条无意义的修改；调整属性顺序时也不用照顾首尾。ES5 之后对象和数组的尾随逗号都是合法语法，唯一要注意的是 JSON 不允许。

WebStorm 格式化时默认会把尾随逗号删掉，这篇记的是改成自动保留（甚至自动补上）的设置位置。

设置位置

打开设置面板，进入 Editor → Code Style → JavaScript（TS 项目改 TypeScript），切到 Punctuation 标签页，看 Trailing comma 这一项。下拉框三个值的行为分别是：

1. Keep：保留现状，你写了就留着，没写也不主动加。想稳妥就选这个。
2. Remove：格式化时一律删掉，这是默认值。
3. Add when multiline：多行的对象、数组、参数列表自动补上尾随逗号，单行的不加。这是我常用的选项，和 Prettier 的 trailingComma: "es5" 行为接近。

同一个 Punctuation 标签页里还有 Use semicolon to terminate statements（分号策略）和 Use single quotes / Use double quotes（引号风格），一起配好整个项目的标点风格就统一了。

下图是这个面板，重点看 Punctuation 标签页里 Trailing comma 下拉框选中的值，右侧预览区会同步显示对象字面量的排版效果。

注意事项

1. JSON 文件不支持尾随逗号，加了会直接语法报错。JSON 的格式化走 Code Style → JSON 页面，跟这里是两套配置，不受影响。
2. 项目里接了 Prettier 的话，最终结果由 Prettier 的 trailingComma 决定，改 IDE 这边会被覆盖，应该去改 .prettierrc。ESLint 对应的规则是 comma-dangle。
3. 函数参数列表的尾随逗号是 ES2017 才支持的，如果项目要兼容很老的运行环境（或者用了不做转译的构建配置），选 Add when multiline 前先确认目标环境能吃下。
4. 建议把 Code Style 的 Scheme 切到 Project，配置进 .idea/codeStyles/ 后随仓库共享，避免团队成员格式化结果反复打架。