1. 简介
在前端开发中，我们经常需要维护比较大的代码库，为避免代码中出现一些明显的语法错误，我们需要使用相关的工具进行代码检查。这样有利于提高代码质量以及协同开发的效率。
其中，stylelint 是一个非常流行的 CSS/SCSS/Less 代码检查工具，它可以帮助开发者快速定位并修复代码中的一些问题。
而 stylelint-config 则是 stylelint 的官方配置文件，可以帮助我们快速配置 stylelint，从而更加便捷地进行代码检查。
本文将介绍如何使用 stylelint-config 进行 CSS/SCSS/Less 代码检查，并对常见的 stylelint-config 规则进行详细解读。
2. 安装与使用
首先，我们需要保证已经正确安装了 Node.js 和 npm。
接着，我们可以通过 npm install 命令来安装 stylelint，同时也需要安装 stylelint-config：
# 全局安装 stylelint 和 stylelint-config-standard npm install -g stylelint stylelint-config-standard # 项目内安装 stylelint 和 stylelint-config-standard npm install --save-dev stylelint stylelint-config-standard
我们还需要在项目的根目录下新建一个 .stylelintrc.json 文件，并在其中填写以下内容：
{
"extends": "stylelint-config-standard"
}这个配置文件表示我们使用了 stylelint-config 的标准规则。
最后，我们可以运行以下命令来检查代码：
# 检查 CSS 文件 stylelint *.css # 检查 SCSS 文件 stylelint *.scss # 检查 Less 文件 stylelint *.less
3. 常用规则解读
stylelint-config 中包含了大量的规则，本文将仅介绍其中一部分常用规则，以及它们的意义及用法。
3.1. block-no-empty
用于检查代码块中是否存在空白行。在 CSS 中，代码块通常被 {} 包裹起来。
例如，以下代码中就存在空白代码块：
h1 {
/* 这是一个空白代码块 */
}可以通过以下方式使用这个规则：
{
"rules": {
"block-no-empty": true
}
}3.2. color-no-invalid-hex
用于检查颜色值是否为合法的十六进制格式。例如，以下代码中颜色值为非法格式：
color: #ZZZZZZ;
可以通过以下方式使用这个规则：
{
"rules": {
"color-no-invalid-hex": true
}
}3.3. declaration-block-no-duplicate-properties
用于检查一个代码块内是否包含重复的属性。例如，以下代码中包含了重复的属性：
h1 {
font-size: 16px;
font-size: 16px;
}可以通过以下方式使用这个规则：
{
"rules": {
"declaration-block-no-duplicate-properties": true
}
}3.4. declaration-block-trailing-semicolon
用于检查一个代码块的最后一行是否存在分号。例如，以下代码中缺失了分号：
h1 {
font-size: 16px
}可以通过以下方式使用这个规则：
{
"rules": {
"declaration-block-trailing-semicolon": true
}
}3.5. no-descending-specificity
用于检查 CSS 选择器的特异性是否符合规范。例如，以下代码中包含了相对较低的特异性：
div p {
color: red;
}可以通过以下方式使用这个规则：
{
"rules": {
"no-descending-specificity": true
}
}4. 总结
本文介绍了如何使用 stylelint-config 进行 CSS/SCSS/Less 代码检查，并针对常用规则进行了详细解读。希望能够帮助大家提高代码质量和开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055aa981e8991b448d8303