使用百度开源的StyleLint规范集让团队内部代码规范保持一致

上一篇 使用百度开源的ESLint规范集让团队内部代码规范保持一致 主要介绍了 JavaScript 的代码规范问题，这篇文章来说说 css（包含扩展） 的规范问题。

CSS 规范主要依赖于 StyleLint，它能干啥？

它的作用就是帮你发现 css 中的错误，并且能够保持团队内部使用统一的规范。

同样，直接使用百度开源的 https://github.com/ecomfe/stylelint-config，使用开源的好处是不必自己定义规范集，当然也可以直接使用官方推荐的规范集。先安装一下：

cnpm install stylelint @ecomfe/stylelint-config -D

然后需要在项目根目录下添加 .stylelintrc.js 配置文件，内容如下：

module.exports = {
    extends: [
        '@ecomfe/stylelint-config'
    ],
    // 覆盖 @ecomfe/stylelint-config 中的某条规则
    rules: {
        'rule-empty-line-before': null,
    },
    ignorePatterns: [
        'node_modules/*',
    ]
};

由于需要在写代码期间实时查看代码是否有问题，在编辑器里可以直观地看到错误，需要安装插件 stylelint。安装完插件发现我写的 css 代码并没有提示错误，说明安装的插件没起作用。经过一番定位后，发现我的 setting.json 自动加了这个配置导致插件不工作，去掉这行就好了：

"stylelint.config": {}

我的 VSCode 配置文件如下：

"editor.codeActionsOnSave": {
    "source.fixAll": true
},
"css.validate": false,
"scss.validate": false

由于我们项目使用的是 stylus，需要安装 stylelint-plugin-stylus，使得可以检测 stylus：

npm install  stylelint-plugin-stylus -D

需要修改 vscode 的配置文件：

"stylelint.customSyntax": "stylelint-plugin-stylus/custom-syntax",
 "stylelint.validate": [
      "stylus",
      "css"
]

到此你的项目就可以完全支持样式检测了。

我建立一个项目，大家可以在这里找到：

https://github.com/lefex/fe

大家加油！！！

参考：

https://stylelint.io/user-guide/configure

https://stackoverflow.com/questions/47113226/stylelint-vscode-doesnt-work

长按关注

素燕《前端小课》

帮助 10W 人入门并进阶前端

官网：https://lefex.gitee.io/