导读：
开源比较流行的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：
- Sublime：
- vs code：
建议推行方式
-
规则制定期：本阶段先定制规则文件，并要求组内成员在编辑器或IDE 安装stylelint 插件辅助日常开发中使用。使用过程中可针对遇到的情况进行讨论并适当调整具体stylelint 规则。
-
规则过渡期：本阶段要求成员在开发过程中抽出时间对以前项目的代码进行优化。
-
规则监督期：本阶段将探索建立相应的自动化监督机制并在日常开发中施行下去。在precommit钩子中强制执行规则
参考：