Stylelint 插件可解决 CSS 样式混乱问题，需安装插件、配置 .stylelintrc.json、启用自动修复、设置默认格式化器为 Stylelint，并通过违规代码验证生效。

如果您在使用 VSCode 编辑 CSS 文件时发现样式规则混乱、缩进不一致或属性顺序随意，可能是缺乏统一的代码风格约束。Stylelint 是一个强大的 CSS 代码检查工具，配合 VSCode 插件可实时提示并自动修复常见风格问题。以下是启用和配置 Stylelint 插件的具体步骤：

本文运行环境：MacBook Air，macOS Sequoia。

一、安装 Stylelint 插件

VSCode 的扩展市场中提供了官方维护的 Stylelint 插件，它能与本地 Stylelint 配置联动，提供语法高亮、错误标记和快速修复建议。

1、打开 VSCode，点击左侧活动栏的扩展图标（四个方块组成的图标）。

立即学习“前端免费学习笔记（深入）”；

2、在搜索框中输入 Stylelint，找到由 Stylelint 团队发布的官方插件（作者显示为 stylelint）。

3、点击“安装”按钮，等待插件下载并启用。

二、初始化本地 Stylelint 配置

插件本身不自带规则集，需在项目根目录下配置 Stylelint 规则文件，否则无法触发校验。支持 .stylelintrc.json、.stylelintrc.js 或 stylelint.config.js 等格式。

1、在终端中进入项目根目录，执行命令：npm init -y（若尚未初始化 npm 项目）。

2、运行命令：npm install --save-dev stylelint stylelint-config-standard。

3、创建 .stylelintrc.json 文件，内容为：{"extends": "stylelint-config-standard"}。

三、启用自动修复功能

Stylelint 插件支持保存时自动修复部分可修正的问题（如空格、分号缺失、单位小写等），需手动开启该设置以提升编码效率。

1、按下 Cmd + ,（macOS）打开 VSCode 设置界面。

2、在搜索框中输入 stylelint.autoFixOnSave。

3、勾选 Stylelint: Auto Fix On Save 选项。

四、配置编辑器格式化行为

为确保格式化操作与 Stylelint 规则一致，需将默认 CSS 格式化工具切换为 Stylelint，避免 Prettier 或内置格式化器覆盖校验结果。

1、右键任意 CSS 文件，选择“格式化文档”。

2、若弹出格式化工具选择列表，点击 Configure Default Formatter...。

3、在列表中选择 Stylelint 并确认。

五、验证插件是否生效

完成配置后，需通过实际 CSS 代码触发校验，确认插件已正确读取规则并响应问题。

1、新建一个 test.css 文件，输入以下违规代码：a { COLOR: red; }。

2、保存文件，观察属性名 COLOR 是否被标红，并显示提示信息 Expected lowercase letter in property name (property-case)。

3、将光标置于该行，按下 Cmd + Shift + P，输入 Fix all auto-fixable Problems 并执行。

# css  # auto  # red  # cos  # macos  # ai  # mac  # 工具  # macbook  # 编码  # npm  # json  # js  # vscode  # Property