简介
stylelint 是一个强大的 CSS/SCSS 静态分析工具，可以帮助我们规范 CSS/SCSS 代码。而 stylelint-config-recommended-scss 是 stylelint 官方提供的一套 SCSS 样式检查规则，涵盖了最佳实践和基本的错误检测。使用它可以有效地避免代码中常见的问题。
安装
首先，需要确保已经安装了 Node.js 和 npm（npm 通常随 Node.js 一起安装）。
安装 stylelint 和 stylelint-config-recommended-scss：
npm install stylelint stylelint-config-recommended-scss --save-dev
配置
在项目根目录下创建一个名为 .stylelintrc.json 的文件，将以下配置复制到文件中：
{
"extends": "stylelint-config-recommended-scss"
}这个配置告诉 stylelint 使用 stylelint-config-recommended-scss 中定义的规则。你也可以在这个文件中添加自定义规则或覆盖默认规则。
使用
运行以下命令来检查你的 SCSS 文件：
npx stylelint "**/*.scss"
其中，**/*.scss 表示检查所有的 SCSS 文件。
如果想让 stylelint 自动修复一些错误，可以运行以下命令：
npx stylelint "**/*.scss" --fix
示例代码
以下是一个 SCSS 文件的示例代码：
-- -------------------- ---- -------
--------------- --------
-- ----
---- -
-------- -------------
-------- --- -----
---------- -----
------------ ----
------------ -----------
----------- -------
------------ -------
--------------- -------
------- --------
----------------- -----
----------------- ---------------
------- --- ----- ---------------
-------------- ----
------ -----
------------ -----
--------
------- -
----------------- ----------------------- -----
------------- ---------------------- -----
-
-
-- ---
----------- -
---------- ----
-在这段代码中，.btn 的样式符合规范，而 .btn-danger 的样式则有错误。运行 stylelint 后，会发现下面的错误信息：
/path/to/file.scss 11:3 ✖ Unexpected unknown property "backgroud" (property-no-unknown)
这个错误说明了 .btn-danger 中的 backgroud 属性是未知的，并且建议将其更正为 background。
总结
本文介绍了如何使用 npm 包 stylelint-config-recommended-scss 来检查 SCSS 样式的最佳实践和错误，并提供了示例代码和使用方法。如果你想更好地规范你的 CSS/SCSS 代码，推荐你使用 stylelint。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/43005