sublime如何配置Stylelint检查CSS规范_在sublime中实时校验CSS/SCSS代码

在 sublime text 中配置 Stylelint 可以帮助你在编写 css 或 scss 代码时实时检查样式规范，提升代码质量和团队协作效率。整个过程主要依赖 Package Control 安装插件，并正确配置 Node.js 环境与 Stylelint 规则。

安装必要插件

打开 Sublime Text，使用 Package Control 安装以下两个核心插件：

• SublimeLinter：代码语法检查框架
• SublimeLinter-stylelint：Stylelint 的集成插件

安装方法：按下 Ctrl+Shift+P（mac 为 Cmd+Shift+P），输入 “Install Package”，搜索并安装上述插件。

配置 node.js 和 Stylelint 环境

SublimeLinter-stylelint 依赖本地的 stylelint 命令行工具，需确保已安装 Node.js 和 npm。

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

在终端执行以下命令全局或项目内安装 stylelint：

npm install -g stylelint

推荐在项目中局部安装并定义配置文件，便于团队统一规则：

npm install --save-dev stylelint

根目录创建配置文件 .stylelintrc（json 格式）或 .stylelintrc.json，例如：

{   "extends": "stylelint-config-standard",   "rules": {     "indentation": 2,     "color-hex-case": "lower",     "block-closing-brace-newline-after": "always"   } }

如果你使用 SCSS，还需安装支持扩展语法的 preset，如：

npm install --save-dev stylelint-config-standard-scss

然后在配置中引用：

{   "extends": "stylelint-config-standard-scss" }

配置 SublimeLinter 设置

进入 Sublime Text 的菜单栏：Preferences → Package Settings → SublimeLinter → Settings，确保 linters 中启用 stylelint 并设置正确路径（若全局安装可省略 path）：

{   "linters": {     "stylelint": {       "executable": "/path/to/node_modules/.bin/stylelint",       "selector": "source.css, source.scss, source.less"     }   } }

如果 stylelint 安装在项目 node_modules 中，建议将 executable 指向项目路径，或确保系统 PATH 包含 node_modules/.bin。

同时确认底部状态栏显示 “SublimeLinter: stylelint” 已激活，保存文件时会自动校验。

实时校验与错误提示

配置完成后，编辑 CSS/SCSS 文件时，不符合规则的代码行会：

• 出现红色波浪线（错误）或黄色波浪线（警告）
• 鼠标悬停显示具体错误信息
• 通过 Ctrl+Alt+E 调出错误列表（取决于快捷键设置）

保存文件时自动检查，配合 Prettier 可实现自动修复（需额外配置 format-on-save）。

基本上就这些。只要环境正确、配置文件存在、插件启用，Sublime 就能实时标出样式问题，帮助你写出更规范的 CSS 代码。