如何配置Prettier使其保留CSS选择器同行格式？

你希望CSS选择器保持单行格式：

html,body,:root {
  height: 100%;
}

但Prettier自动将每个选择器拆分为单独一行，只需修改Prettier配置即可解决：

全局配置方案 #

在项目根目录的Prettier配置文件（如.prettierrc、.prettierrc.json）中添加以下配置：

{
  "selectorSeparatorNewline": false
}

如果是在package.json中配置，写入prettier字段：

{
  "prettier": {
    "selectorSeparatorNewline": false
  }
}

该配置会强制CSS/SCSS/Less的选择器列表在逗号后不换行，保持单行显示。

局部忽略方案 #

如果仅需针对个别选择器保留单行，可在选择器上方添加注释跳过格式化：

// prettier-ignore
html,body,:root {
  height: 100%;
}

内容的提问来源于stack exchange，提问作者Nevazno_html_css_js_3