Stylelint 在 VSCode 中需同时安装官方插件、项目内安装依赖并配置 .stylelintrc.json，启用 stylelint.enable 并指定校验语言，路径异常时需手动设置 executablePath。
如果您在使用 VSCode 编辑 CSS 或 SCSS 文件时发现样式规则不一致、缺少分号、属性顺序混乱或存在废弃语法，可能是 Stylelint 未正确配置或未生效。以下是确保 Stylelint 插件在 VSCode 中有效保障 CSS 代码质量的具体操作步骤：
本文运行环境：MacBook Air，macOS Sequoia。
一、安装并启用 Stylelint 插件
Stylelint 功能依赖于 VSCode 扩展与本地项目依赖协同工作，仅安装插件无法触发校验，必须同时满足编辑器扩展启用和项目级 Stylelint 可执行环境就绪两个条件。
1、打开 VSCode，点击左侧活动栏的扩展图标（或按 Cmd+Shift+X）。
立即学习“前端免费学习笔记（深入）”；
2、在搜索框中输入 Stylelint，找到由 Stylelint 官方发布的扩展（作者为 Stylelint），点击“安装”。
3、安装完成后，重启 VSCode 以确保插件完全加载。
二、在项目中初始化 Stylelint 配置
VSCode 的 Stylelint 插件默认调用项目根目录下的可执行 Stylelint 包，因此需在项目中安装 Stylelint 并提供配置文件，否则插件将静默失效。
1、在终端中进入项目根目录，执行命令：npm init -y（如尚未初始化 npm）。
2、执行命令：npm install --save-dev stylelint stylelint-config-standard。
3、在项目根目录创建 .stylelintrc.json 文件，内容为：{"extends": "stylelint-config-standard"}。
三、配置 VSCode 设置启用实时校验
即使插件已安装且项目配置就绪，VSCode 默认可能未开启对 CSS 类型文件的 Stylelint 监听，需手动指定语言绑定与校验开关。
1、按下 Cmd+, 打开设置界面，在右上角点击“打开 settings.json”图标。
2、在 JSON 文件中添加以下配置项：
"stylelint.enable": true,
"stylelint.validate": ["css", "scss", "sass", "less", "sugarss"]
3、保存文件，重新打开任意 .css 文件，观察底部状态栏是否显示 Stylelint 活动标识。
四、使用自定义配置增强校验粒度
默认的 standard 配置仅覆盖基础规则，若需强制属性排序、禁止 ID 选择器或限定单位类型，需引入可扩展的配置方案并显式声明规则。
1、安装额外配置包：npm install --save-dev stylelint-config-recommended-scss。
2、修改 .stylelintrc.json，将 extends 改为：["stylelint-config-standard", "stylelint-config-recommended-scss"]。
3、在 rules 字段中添加自定义规则，例如："declaration-block-trailing-semicolon": "always"。
五、解决插件无报错但不提示的问题
常见现象是插件已启用、配置存在，但编辑器未显示任何波浪线或错误提示，通常由 Node.js 路径识别失败或工作区范围限制导致。
1、在 VSCode 终端中执行 which stylelint，确认返回路径；若为空，说明未正确安装或未加入 PATH。
2、在设置中搜索 stylelint.executablePath，将其值设为项目内 node_modules/.bin/stylelint 的绝对路径。
3、检查当前打开的是文件夹而非单个文件——Stylelint 插件仅在 VSCode 以文件夹形式打开项目时读取根目录配置。
