配置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 安装必要包：
立即学习“前端免费学习笔记（深入）”；
根据ui图生成前端页面
下载
将一个或多个 UI 原型图、线框图、产品截图或设计稿转换为标准化、可直接交付的 PRD 风格文档，供产品、设计、前端和测试共同使用。适用于 Codex 需要分析 PC 网页、桌面端、移动端、响应式页面、独立弹窗、表单、表格、看板、数据大屏或多页面流程截图，还原页面结构与交互，强制套用固定文档模板，抽取跨页面共享规则，或把一组原型沉淀为单页规范文档加整体业务流程文档的场景。不适用于纯视觉审美点评、代码实现、接口设计、埋点方案、竞品分析或无 UI 输入的业务需求创作。
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 时就能实时看到错误提示，并在保存时自动美化代码，团队协作更顺畅。不复杂但容易忽略细节，建议每个前端项目都加上。
