stylelint初体验

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",
    "...": "..."
  }
}