引入代码检查工具stylelint实战问题经验总结分享

引入代码检查工具stylelint可以帮助我们规范化CSS代码，避免出现因细节问题导致的BUG。下面是引入stylelint工具的完整攻略：

第一步：安装stylelint

npm install --save-dev stylelint stylelint-config-standard

以上命令会安装stylelint及其标准配置。如果你需要使用其他配置，可以使用对应的包名替换掉stylelint-config-standard。

第二步：创建stylelint配置文件

touch .stylelintrc.json

然后在stylelintrc.json文件中添加以下内容：

{
  "extends": "stylelint-config-standard"
}

以上配置文件是使用stylelint标准配置文件的方式，你可以根据自己的需求添加自定义配置。

第三步：运行stylelint

3.1 正常运行stylelint验证CSS

使用以下命令运行stylelint对CSS文件进行检查：

stylelint your-css-file.css

如果需要同时检查多个文件，可以用通配符：

stylelint *.css

3.2 在编辑器中自动运行stylelint

我们可以在编辑器中设置自动运行stylelint，实现实时检测代码风格的效果。

以VS Code为例，我们可以在Settings中添加以下配置：

"editor.codeActionsOnSave": {
  "source.fixAll.stylelint": true
},

以上配置会在保存的时候自动运行stylelint并修复对应的问题。

示例：

下面是两个示例，介绍如何使用stylelint解决实际问题：

示例1：根据公司CSS规范检测代码

假设你工作的公司有自己的CSS规范，你需要根据规范检测项目的CSS代码。

你需要先了解公司规范的内容，然后在.stylelintrc.json中添加对应的自定义配置。

例如，你需要规定颜色必须使用16进制表示法，而不能使用rgb或rgba表示法。

你可以在.stylelintrc.json中添加以下配置：

{
  "extends": "stylelint-config-standard",
  "rules": {
    "color-hex-length": "long"
  }
}

以上配置表示将检查颜色的表示是否为16进制长格式（如#ff0000），如果不是则视为错误。

示例2：检测CSS变量使用是否一致

项目使用了很多全局CSS变量，你需要确保其使用方式一致，避免出现不必要的问题。

你可以在.stylelintrc.json中添加以下配置：

{
  "extends": "stylelint-config-standard",
  "rules": {
    "property-no-unknown": [true, {
        "ignoreProperties": [
            "composes"
        ]
    }],
    "declaration-colon-newline-after": null,
    "declaration-empty-line-before": null,
    "declaration-block-semicolon-newline-after": null,
    "declaration-block-trailing-semicolon": "always",
    "declaration-block-no-duplicate-properties": [true, {
        "ignore": ["consecutive-duplicates-with-different-values"]
    }],
    "function-url-quotes": "always",
    "media-feature-name-no-vendor-prefix": true,
    "at-rule-no-vendor-prefix": true,
    "selector-max-id": 0,
    "shorthand-property-no-redundant-values": true,
    "value-no-vendor-prefix": true,
    "function-calc-no-unspaced-operator": true,
    "block-no-empty": true,
    "length-zero-no-unit": true,
    "color-hex-length": "long",
    "color-named": "never",
    "value-keyword-case": "lower",
    "declaration-no-important": true,
    "no-duplicate-selectors": true,
    "selector-max-compound-selectors": 4,
    "selector-max-universal": 1,
    "selector-no-qualifying-type": true,
    "property-no-vendor-prefix": true,
    "max-nesting-depth": 3
  }
}

以上配置规定了大量的规则，包括了以下部分：

• 不允许使用厂商前缀
• 不允许使用CSS变量之外的自定义属性
• 不允许存在空Block
• 不允许重复的选择器、重复的CSS属性
• 不允许适配器中有重复的名字
• 不允许出现或者后端命名中大写字母
• 等等

这些规则会在你提交代码的时候进行校验，避免了代码审查中出现的大量细节问题。

通过以上示例，我们可以看到，在不同的项目中，我们可以使用不同的规则来检查和保证CSS的质量。只有在统一的标准下，我们的项目才有更好的可维护性和合理性。