配置 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：
比格设计
比格设计是135编辑器旗下一款一站式、多场景、智能化的在线图片编辑器
124 查看详情
{ "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：指定哪些语言启用 stylelintdefaultFormatter：设置 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 协同工作，互不干扰。
以上就是vscode格式化css代码怎么配置eslint_vscode结合eslint自动格式化css的配置方法的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/585468.html
微信扫一扫 
支付宝扫一扫 
