如果你是一名 web 前端开发者，你可能会知道 stylelint 这个工具，它通常用来检查 CSS 代码的格式和语法错误。但是，在实际项目中使用 stylelint 时，你需要先配置一些规则和选项，才能获得更好的代码检查和格式化效果。而这些配置无需自己手动撰写，可以直接使用 @nybr/stylelint-config 这个预设的配置包来帮助你完成。
安装 @nybr/stylelint-config
首先，你需要在项目中安装 @nybr/stylelint-config，可以使用 npm 来完成安装：
npm install @nybr/stylelint-config --save-dev
然后，在你的 stylelint 配置文件中，使用如下方式引用 @nybr/stylelint-config：
{
"extends": "@nybr/stylelint-config"
}配置选项
@nybr/stylelint-config 提供了一系列的选项来帮助你更好地进行代码风格的检查和格式化，这些选项以及它们的值通常在 .stylelintrc.json 中设置。下面是一些常见的选项：
"indentation"：设置缩进所使用的空格数，通常为 2 或 4。"max-empty-lines"：限制连续出现的空行的数量，通常为 2 或 3。"block-closing-brace-space-before"：在块括号之前添加空格。"block-opening-brace-space-after"：在块括号之后添加空格。
更多选项请参考 Stylelint 配置选项文档。
规则配置
除了选项的配置，@nybr/stylelint-config 还提供了一系列的规则设置，用以约束你在写 CSS 时的代码风格约定。这些规则中包括了一些常见的代码风格问题，比如声明块内的分号；注释的位置和一致性；颜色名称的大小写等等。
你可以通过修改 .stylelintrc.json 文件中 "rules" 属性的值来配置或关闭某些规则。例如：
{
"rules": {
"color-hex-case": null,
"function-calc-no-invalid": true
}
}以上配置意味着关闭 color-hex-case 这个规则检查，并启用 function-calc-no-invalid 这个规则检查。
扩展配置
如果你想要覆盖 @nybr/stylelint-config 中的一些配置选项或规则设置，你可以在 .stylelintrc.json 文件中使用 "extends" 属性，引用你自己的配置文件。例如：
-- -------------------- ---- -------
-
---------- -
-------------------------
----------------------------
--
-------- -
-------------- -----
------------------ -
-
-在这个例子中，我们同时引用了 @nybr/stylelint-config 和一个名为 my-stylelint-config.json 的自定义配置文件。同时我们覆盖了 "indentation" 这个选项的值，并关闭了 "selector-max-id" 这个规则的检查。
示例代码
下面是一个使用 @nybr/stylelint-config 的示例代码：
-- -------------------- ---- ------- -- --------- -- ---------- - ------- - ----- -------- ----- - --- --- -- - ---------- ---- - - - ------ ----- ---------------- ----- -
总结
@nybr/stylelint-config 是一个方便的 Stylelint 配置包，你可以从中获取到大量的 CSS 代码风格规则和配置选项。在实际项目中，你可以通过合理的配置和使用，来规范化你的代码风格，提高代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bd0967216659e244e8f