stylelint是现在最强大的css代码审查工具，由PostCSS提供技术支持。虽然CSS是一种另类的编程语言，通常并不会影响网页的正常运行，但是作为有尊严的前端程序员还是应该注重CSS的书写规范，增强代码可读性。为了方便开发者使用，stylelint社区提供了命令行、打包工具和编辑器上的插件。
一、安装
1.全局安装
npm install -g stylelint
2.在项目中使用
yarn add --dev stylelint stylelint-order
这里除了安装了 stylelint 自身外，还安装了一个 stylelint-order 插件。该插件的作用是强制你按照某个顺序编写 css。例如先写定位，再写盒模型，再写内容区样式，最后写 CSS3 相关属性。
3.配置规则
yarn add --dev stylelint-config-standard stylelint-config-recess-order
官方提供了stylelint-config-recommended和stylelint-config-standard两种css标准：
-
stylelint-config-recommended包含可能报错的rule，code format的css标准 -
stylelint-config-standard继承于recommend，一些常见的css书写标准
4.添加.stylelintrc.json配置
{
"extends": ["stylelint-config-standard", "stylelint-config-recess-order"],
"rules": {
// at-rule-no-unknown: 屏蔽一些scss等语法检查
"at-rule-no-unknown": [true, {"ignoreAtRules" :[
"mixin", "extend", "content"
]}]
}
}
.stylelintrc文件（不带扩展名）可以是 JSON 或 YAML 格式的。或者，你可以添加一个文件扩展名，来区分 JSON，YAML 或 JS 格式：.stylelintrc.json，.stylelintrc.yaml，.stylelintrc.js。你可能想使用一个扩展名，这样你的文本编辑器可以更好的解释文件，以更好进行语法检查和高亮显示。一旦发现它们中的任何一个，将不再继续进行查找。
stylelint有许多种rule，rule千万行，用一行学一行。。。
5.ignore
.foo {
color: red; /* stylelint-ignore */
}
复杂、重叠的禁用和启用模式:
/* stylelint-disable */
/* stylelint-enable foo */
/* stylelint-disable foo */
/* stylelint-enable */
/* stylelint-disable foo, bar */
/* stylelint-disable baz */
/* stylelint-enable baz, bar */
/* stylelint-enable foo */
二、体验
准备好环境，跑了一下stylelint 'src/**/*.scss'试了下，有两个问题：
- 报错有点多。。
- scss/less 等Directives stylelint未支持
对于报错，stylelint提供了fix工具：stylelint 'src/**/*.scss' --fix。前面提到过recommended和standard两种标准，fix和prettier等代码格式化工具都是基于recommended标准的，对于css书写格式这类的stylelint规则还是要靠其它工具去修复。
scss/less 等非标准css语言的Directives可以通过配置at-rule-no-unknown过滤合兼容，当然stylelint的社区也提供了许多类似于 stylelint-scss的插件供开发者使用。
三、应用
VS code、webstorm等Editor都纷纷发布了stylelint插件，这些插件适用于个人开发者。在团队开发上，stylelint也提供了stylelint-webpack-plugin和grunt-stylelint等打包工具插件。
此外，我们还可以适用git hook工具来禁止提交不合格的代码：
npm install husky --save-dev
// Edit package.json
{
"scripts": {
"precommit": "stylelint css/*.scss",
"...": "..."
}
}
