如何配置Prettier/Beauty扩展避免CSS分组选择器格式丢失？

问题场景 #

原始CSS代码：

h1, h2, p {
  text-align: center;
  color: red;
}

使用Prettier/Beauty格式化后变成：

h1,
h2,
p{
    text-align: left;
    color: #f40823;
}

以下是针对两款工具的配置调整方法：

Prettier配置方法 #

要让格式化结果匹配你的原始格式，修改项目根目录的.prettierrc文件（没有就新建一个），添加以下配置：

{
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "bracketSpacing": true,
  // 关键配置项
  "cssSelectorSeparator": " ",
  "colorFormat": "name",
  "singleAttributePerLine": false
}

关键项说明：

• cssSelectorSeparator: 设为" "，让分组选择器保持在同一行（只要总长度不超过printWidth）
• colorFormat: 设为"name"，保留red这类颜色关键字，不会转成十六进制码
• tabWidth: 设为2，和原始代码保持一致的缩进
• 若text-align被强制改成left，检查项目里的.editorconfig或其他格式化规则，避免被额外配置覆盖

Beauty扩展配置方法（以VSCode插件为例） #

1. 打开VSCode设置（快捷键Ctrl+,），搜索"Beauty"
2. 找到"Beauty: Css"配置项，点击「编辑 in settings.json」
3. 添加或修改以下配置：

"beautify.config": {
  "css": {
    "selector_separator_newline": false,
    "indent_size": 2,
    "color_names": "keep",
    "space_around_selector_separator": true,
    "brace_style": "expand"
  }
}

4. 保存配置后重新格式化代码即可

内容的提问来源于stack exchange，提问作者Nhật Vũ Quang