前言
在前端开发中，我们经常需要使用 lint 工具来规范代码风格。而 stylelint 就是专门用来检查 css/scss/less 等样式文件的工具。为了方便使用，社区中已经有很多的 stylelint 配置包可供选择。其中一个优秀的选项就是 @metahub/stylelint-config。
@metahub/stylelint-config 简介
@metahub/stylelint-config 是一款由开发者 metahub 开发的 stylelint 配置包。它基于 stylelint-config-standard，进行了一些优化和定制。在使用该配置包时，我们可以遵循一些良好的编码实践，避免常见的编码错误。
安装和使用
通过 npm 安装
我们可以通过 npm 命令来安装 @metahub/stylelint-config，命令如下：
npm install @metahub/stylelint-config --save-dev
配置文件
安装完毕后，我们需要进行配置。我们需要在项目根目录下创建 .stylelintrc 文件，并填入以下代码：
{
"extends": [
"@metahub/stylelint-config"
]
}这样我们就成功地引入了 @metahub/stylelint-config 配置包。
集成到开发工作流
如果我们希望在开发时自动集成 stylelint 的校验，我们可以使用一些插件或依赖项，例如 gulp-stylelint 或 webpack-stylelint-plugin。这些插件都支持使用 .stylelintrc 配置文件。
@metahub/stylelint-config 校验规则
@metahub/stylelint-config 内置了一些校验规则，以确保我们编写的样式文件符合一定的编码标准。下面是一些常用规则的说明。
空格
block-opening-brace-space-before: 花括号前需要有一个空格。block-closing-brace-newline-after: 花括号后需要有一个空格。declaration-colon-space-after：冒号后需要有一个空格。declaration-colon-space-before: 冒号前不能有空格。
缩进
indentation: 统一缩进为两个空格。
注释
comment-empty-line-before：注释前需要一个空行。
其他
color-hex-case: 颜色值统一使用小写字母。color-hex-length: 颜色值统一使用缩写。declaration-block-trailing-semicolon: 声明语句结尾需要加一个分号。max-line-length：一行代码的最大字符数为 120。rule-empty-line-before: 规则之前需要一个空行。
示例代码
下面给出一个例子，展示如何使用 @metahub/stylelint-config 配置包。
-- -------------------- ---- -------
-- --------- --
---------- -
-------- -----
------ -----
------- ------
----------------- -----
---------- -----
------ -----
-
---------- - -
------- --
-------- -----
-
------ ------ --- ----------- ------ -
---------- -
------- ------
-
--- -------------------- ---- -------
-- ------------ --
-
---------- -
---------------------------
--
-------- -
------------------ --- - -------- --- --
-
-使用 stylelint style.css 进行校验，可以看到以下输出：
/xxx/xxx/style.css 8:10 ✖ Unexpected unit at declaration-block-properties 8:13 ✖ Expected single space after ":" in declaration 9:10 ✖ Unexpected unit at declaration-block-properties 9:13 ✖ Expected single space after ":" in declaration 13:3 ✖ Expected empty line before rule declaration 18:3 ✖ Unexpected empty block
以上输出告诉我们，代码中有一些不符合规范的地方。
总结
在本篇文章中，我们介绍了 @metahub/stylelint-config 这个优秀的 stylelint 配置包，并详细介绍了如何引入和使用该包。同时，我们还例举了一些常用的校验规则，希望本文能帮助读者更好地理解和使用 stylelint。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60057c4281e8991b448ebc7f