配置Stylelint可统一团队CSS/SCSS代码风格，提升质量。先安装VS Code的官方Stylelint扩展，再在项目中安装stylelint及规则集如stylelint-config-standard和stylelint-config-recommended-scss，接着创建.stylelintrc.json配置文件并设定规则，然后在VS Code中启用保存时自动修复，设置Stylelint为默认格式化工具，最后检查依赖安装、配置文件命名和文件语言模式以解决常见问题，实现编辑提示与自动修复。
想让团队的CSS或SCSS代码风格统一，避免低级错误？Stylelint 是目前最强大的样式代码检查工具之一。配合 VS Code 使用，可以实现实时校验、自动修复和编辑时提示，极大提升开发效率与代码质量。
安装 Stylelint 扩展
打开 VS Code 的扩展市场，搜索 Stylelint，选择由 stylelint 官方维护的插件（ID: stylelint.vscode-stylelint）。点击安装即可。
该扩展依赖项目中本地安装的 stylelint 包，因此还需在项目中配置相关依赖。
初始化项目依赖
进入项目根目录，通过 npm 或 yarn 安装必要包：
立即学习“前端免费学习笔记（深入）”；
npm install --save-dev stylelint- 根据需要安装规则集，例如：
-
stylelint-config-standard：标准规则集合 -
stylelint-config-recommended-scss：适用于 SCSS 的推荐规则
-
然后在项目根目录创建配置文件，如 .stylelintrc.json，内容示例：
{
"extends": [
"stylelint-config-standard",
"stylelint-config-recommended-scss"
],
"rules": {
"indentation": 2,
"string-quotes": "double",
"no-empty-first-line": true
}
}
启用保存时自动修复
为了让格式问题在保存时自动修正，修改 VS Code 的用户或工作区设置：
- 打开设置（Ctrl + ,），搜索 format on save，勾选 Editor: Format On Save
- 确保 Stylelint 被设为默认格式化工具：
- 右键编辑器中的 CSS/SCSS 文件，选择“设置为默认格式化程序” → “Stylelint”
也可在 .vscode/settings.json 中明确配置：
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "stylelint.vscode-stylelint"
}
处理常见问题
如果发现没有提示或无法修复，注意以下几点：
- 确认项目中已正确安装
stylelint及其配置依赖 - 检查配置文件名称是否正确（支持 .stylelintrc、.stylelintrc.json、stylelint.config.js 等）
- 确保文件类型被识别，比如 SCSS 文件应标记为 scss 语言模式
- 某些规则不可修复，仅用于警告，需手动调整
基本上就这些。配置完成后，你在写 CSS 或 SCSS 时就能实时看到错误提示，并在保存时自动美化代码，团队协作更顺畅。不复杂但容易忽略细节，建议每个前端项目都加上。
