配置 VSCode 结合 ESLint 和 stylelint 实现 CSS 自动格式化：1. 安装 stylelint、stylelint-config-recommended、stylelint-config-standard、stylelint-prettier 和 prettier；2. 创建 .stylelintrc.json 配置文件并设置规则；3. 安装 Stylelint、Prettier 和 ESLint VSCode 插件；4. 在 settings.json 中启用保存时自动格式化和修复，指定 stylelint 为 CSS/SCSS 默认格式化工具；5. 在 ESLint 配置中排除对 CSS 文件的处理以避免冲突；6. 测试保存 CSS 文件是否自动格式化。最终实现 CSS 与 JS/TS 代码风格统一且互不干扰。
VSCode 中结合 ESLint 自动格式化 CSS 代码，需要正确配置 ESLint、Prettier（可选）以及 VSCode 设置。ESLint 原生不直接格式化 CSS，但可以通过 stylelint 配合 eslint-plugin-html 或使用 stylelint 单独处理 CSS 格式化。下面介绍一种常见且有效的配置方式：
1. 安装必要的依赖
在项目根目录安装以下包：
- stylelint：用于检查和格式化 CSS/SCSS 等样式文件
- stylelint-config-recommended：基础推荐规则
- stylelint-config-standard：更严格的标准规则（可选）
- stylelint-prettier：与 Prettier 集成（如果用了 Prettier）
执行命令：
npm install --save-dev stylelint stylelint-config-recommended stylelint-config-standard stylelint-prettier prettier
2. 创建 stylelint 配置文件
在项目根目录创建 .stylelintrc.json 文件：
立即学习“前端免费学习笔记（深入）”；
{
"extends": ["stylelint-config-recommended", "stylelint-config-standard"],
"rules": {
"indentation": 2,
"string-quotes": "double",
"no-empty-source": true
}
}你可以根据团队规范调整规则。
3. 在 VSCode 中安装插件
确保安装了以下 VSCode 扩展：
- Stylelint（由 shinnn 提供）
- Prettier - Code formatter（如使用 Prettier）
- ESLint（用于 JS/TS 检查）
4. 配置 VSCode 设置（settings.json）
打开 VSCode 的设置（Ctrl + ,），点击右上角的“打开设置 (JSON)”图标，编辑 settings.json：
{
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.stylelint": true
},
"stylelint.validate": ["css", "scss", "vue", "html"],
"[css]": {
"editor.defaultFormatter": "stylelint.vscode-stylelint"
},
"[scss]": {
"editor.defaultFormatter": "stylelint.vscode-stylelint"
}
}说明：
- formatOnSave：保存时自动格式化
- codeActionsOnSave：保存时自动修复 stylelint 错误
- stylelint.validate：指定哪些语言启用 stylelint
- defaultFormatter：设置 CSS 使用 stylelint 作为默认格式化工具
5. 禁用 ESLint 对 CSS 的干扰（重要）
如果你的 ESLint 配置通过 eslint-plugin-html 解析 HTML 内嵌 CSS，可能会冲突。建议在 .eslintrc.js 或 .eslintrc.json 中排除 CSS 样式检查：
"overrides": [
{
"files": ["*.css", "*.scss"],
"rules": {}
}
]或者确保 eslint-plugin-html 不对样式部分做格式化处理。
6. 测试格式化功能
打开一个 .css 文件，输入不规范代码，例如：
.test{
color:red;
}保存文件，如果配置正确，会自动格式化为：
.test {
color: red;
}基本上就这些。这套方案能实现 VSCode 中 CSS 文件通过 stylelint 实现 ESLint 式的自动检查与格式化，和项目中 JS/TS 的 ESLint 协同工作，互不干扰。
