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 插件支持保存时自动修复部分可修正的问题（如空格、分号缺失、单位小写等），需手动开启该设置以提升编码效率。
BeikeShop 一款开源好用的跨境电商系统，BeikeShop 是基于 Laravel 开发的一款开源商城系统主要面向外贸/跨境电商行业提供商品管理、订单管理、会员管理、支付、物流、系统管理等功能。BeikeShop系统亮点1、系统代码100%开源 2、代码分层清晰、格式规范 3、基于Laravel框架开发 4、Event机制实现Hook功能 5、强大的插件机制 6、系统扩展性强 方便二次开发
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 并执行。
