WebStorm 设置 Less 颜色 ffffff 格式化为 fff

写 Less、Sass 或者普通 CSS 时，颜色值 #ffffff 和 #fff 是等价的。WebStorm 格式化样式文件时会顺手把能缩写的六位十六进制色值压成三位，#ffffff 变 #fff、#112233 变 #123。这个行为本身省字符，但如果团队约定统一写六位（方便和设计稿的色值直接对照，也免得三位六位混着写），它就成了干扰：每次格式化都会把手写的六位改回三位，diff 里全是这种噪音。

这篇记的是控制这个缩写行为的设置位置，两个方向都能配：想缩写的让它自动缩，不想缩的关掉。

设置位置

打开设置面板，进入 Editor → Code Style → Style Sheets（部分版本直接是 CSS，Less/Sass/SCSS 共用这套规则），切到 Other 标签页，看 Hex Colors 分组下的几项：

1. Hex color case：色值字母的大小写，可选 Do not change（不动）、To lower case（转小写）、To upper case（转大写）。
2. Hex color length：这就是本篇的关键项，可选 Do not change（保持原样）、To long（一律补成六位）、To short（能缩就缩成三位）。想禁止自动缩写就选 Do not change 或 To long。

改完之后按 Ctrl + Alt + L（macOS 是 Cmd + Option + L）格式化，就能看到色值按新规则处理了。

下图是这个面板，重点看 Other 标签页里 Hex Colors 分组的两个下拉框，右侧预览区会同步显示色值的变化。

注意事项

1. 这套规则对 CSS、Less、SCSS、Sass 都生效，不用分别配。
2. 只有六位里三组都是重复字符的色值才能缩成三位（#aabbcc → #abc），#aabbcd 这种缩不了，选了 To short 也不会变。
3. 项目里用 Prettier 或 Stylelint 的话，它们的规则优先级更高，应该改 .stylelintrc 里的 color-hex-length，在 IDE 这边改了会被覆盖。
4. 带透明度的八位色值（#ffffffcc）同理，能缩的会被压成四位（#fffc），规则和六位是一套逻辑。
5. 建议把 Code Style 的 Scheme 从 Default 切到 Project 再改，这样配置会写进项目的 .idea/codeStyles/ 目录，提交之后团队共用一套规则，不会出现每个人格式化完色值写法都不一样的情况。