如何调整VS Code中Prettier对CSS ID选择器的换行格式化规则

第一步：确认Prettier基础配置生效 #

Prettier的配置优先级遵循「项目配置文件 > 编辑器全局设置」，只修改VS Code全局的Prettier: Print Width可能被项目本地配置覆盖，建议在项目根目录新建.prettierrc配置文件，明确写入配置：

{
  "printWidth": 120,
  "overrides": [
    {
      "files": ["*.css", "*.scss", "*.less"],
      "options": {
        "printWidth": 120
      }
    }
  ]
}

配置完成后重启VS Code，先手动把选择器改成同行，再触发格式化，确认是否还会被自动拆行。如果仍然强制拆行，是因为原生Prettier没有提供单独控制CSS选择器换行的开关，你可以选择以下两种方案解决：

方案1：全项目统一规则（推荐） #

搭配Stylelint实现选择器换行规则自定义，这是最稳定的全项目统一规范方案：

1. 安装依赖

npm install stylelint stylelint-config-prettier stylelint-prettier --save-dev

2. 项目根目录新建.stylelintrc.json配置文件，加入以下规则：

{
  "plugins": ["stylelint-prettier"],
  "extends": ["stylelint-prettier/recommended"],
  "rules": {
    "selector-list-comma-newline": "never",
    "prettier/prettier": true
  }
}

3. 在VS Code设置中把CSS类文件的默认格式化工具设置为Stylelint，开启保存自动修复即可。

方案2：临时适配单个文件 #

如果只是个别文件需要该格式，不需要全项目统一规则，可以在需要忽略格式化的CSS块前添加/* prettier-ignore */注释，Prettier就会跳过该块的格式化：

/* prettier-ignore */
#mail_user, #pass_user, #name_user, #cardValid {
  font-size: 55px;
  padding: 20px 14px;
  border: 0;
  border-radius: 20px;
  margin-bottom: 90px;
}

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