前言
在前端开发中，CSS 的编码规范非常重要，规范的代码可以提高可读性，降低维护成本。而 npm 中有一款 CSS 样式检查工具 stylelint，可以检查 CSS 是否符合当前项目的编码规范。而 stylelint 再结合 stylelint-config-fhfe 包，可以更快、更准确的帮助我们进行 CSS 检查。
安装
在使用 stylelint 之前，首先需要安装它，使用以下命令进行安装：
npm install stylelint --save-dev
然后，我们需要安装 stylelint-config-fhfe：
npm install stylelint-config-fhfe --save-dev
使用
要使用 stylelint，需要配置 .stylelintrc 文件。在该文件中，我们需要定义规则集，可以自定义、引入现有的规则集，这里我们引入 stylelint-config-fhfe。
首先需要在根目录下新建一个 .stylelintrc 文件：
{
"extends": "stylelint-config-fhfe"
}当然，我们也可以在自己的规则集基础上额外添加一些规则：
{
"extends": [
"stylelint-config-fhfe",
"./custom-rules.js"
]
}接着，我们可以在进入项目路径后，运行以下命令来检测项目中的 .css 文件：
stylelint --fix **/*.css
这个命令会在项目中查找所有的 .css 文件并检查它们是否符合规范。
配置
stylelint 有很多配置选项，可以在 .stylelintrc 文件中进行配置。以下是一些常见的配置项：
extends：指定继承的规则plugins：指定实验性的插件。使用Plugin名称并提供用于运行插件的对象rules：通过覆盖或扩展导入规则或添加自定义规则来配置项目
我们也可以根据具体情况，配置一些自定义规则，来增加检查的范围和需求。
示例代码
-- -------------------- ---- ------- -- ----- -- -------- - ------- ----- -------- ----- - -- ------ -- --------- ------------ ------------- -
以上为一个简单的 CSS 样式，在 .stylelintrc 中配置规则之后，stylelint 可以检查以下错误：
- 在第一段代码中，我们加了一些额外的空格，
stylelint检测到这些错误，并给出相应的提示。 - 在第二段代码中，我们省略了一些空格，这也违反了 CSS 规范。
这说明我们可以通过配置 .stylelintrc 文件来自定义规则来检查代码是否符合前端领域的一些代码规范。
总结
通过使用 stylelint 和 stylelint-config-fhfe，我们可以在前端开发中检测代码是否符合规范，帮助我们写出更加优秀的代码，并提高代码的可维护性和可读性。同时，在 .stylelintrc 文件中配置规则，可以满足项目的需求，也可以根据团队的开发经验，增加一定的代码质量保障，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005731581e8991b448e9445