导读：

开源比较流行的CSS lint方案：csslint、SCSS-Lint、Stylelint。

我们团队选择Stylelint，原因如下：

• 其支持 Less、Sass 这类预处理器。团队使用less
• 在社区活跃度上，有非常多的第三方插件。
• 在Facebook，Github，WordPress 等公司得到实践，能够覆盖很多场景

stylelint

配置方式：

按顺序查找，任何一项有值，就会结束查找

• 在package.json中的stylelint属性指定规则

• 在.stylelintrc文件中指定，文件格式可以是JSON或者YAML。也可以给该文件加后缀，像这样：.stylelintrc.json,.stylelintrc.yaml,.stylelintrc.yml,.stylelintrc.js

• stylelint.config.js文件，该文件exports一个配置对象span>

语法格式：

rules优先级大于extends，建议采用extends方式统一管理

module.exports = {
  processors: [],
  plugins: [],
  extends: "stylelint-config-standard", // 这是官方推荐的方式
  rules: {
    "at-rule-empty-line-before": "always"|"never",
    "at-rule-name-case": "lower"|"upper",
    "block-no-empty": true,
  }
};

插件列表：

• 插件一般是由社区提供的，对stylelint已有规则进行扩展，一般可以支持一些非标准的css语法检查或者其他特殊用途。一个插件会提供一个或者多个检查规则
• 插件地址

处理器列表：

• 你还可以在stylelint的处理流中加入自己的处理函数，就是这里的processors。 processors只能作为命令和Node API使用，PostCss的插件会忽略它们。 通过processors，我们可以让styleline去处理html中style标签里面的css代码，MarkDown里面的css代码块或者js里面一段包含css的字符串。
• 选项地址

规则列表：

• 配置选项地址

ignore方式

// .stylelintignore
*.js
*.png
*.eot
*.ttf
*.woff

片段禁用规则

/* stylelint-disable */
/* （请说明禁止检测的理由）前端组件限制类名 */
  .cropper_topContainer .img-preview {
    border: 0 none;
  }
/* stylelint-enable */

fix方式

• stylelint --fix 就能搞定 更多语法规则

• webstorm可以配置external tools实现autofix，添加keymap快捷键，如果希望在保存时自动fix，参考这里

  external tool 配置内容：

IDE插件

• webstorm插件，能够在 setting -> plugins -> browse repositories 中找到 IntelliJ Stylelint Plugin

  如果 browse repositories 中下载不了，可以去 官网下载对应插件 在 plugins-> install plugin from disk安装

• Atom：linter-stylelint
• Sublime：SublimeLinter-contrib-stylelint
• vs code： vscode-stylelint

建议推行方式

1. 规则制定期：本阶段先定制规则文件，并要求组内成员在编辑器或IDE 安装stylelint 插件辅助日常开发中使用。使用过程中可针对遇到的情况进行讨论并适当调整具体stylelint 规则。

2. 规则过渡期：本阶段要求成员在开发过程中抽出时间对以前项目的代码进行优化。

3. 规则监督期：本阶段将探索建立相应的自动化监督机制并在日常开发中施行下去。在precommit钩子中强制执行规则

参考：

• devework.com/stylelint-i…
• www.jianshu.com/p/d29c1b652…