Stylelint 是一个强大和现代的 CSS 审查工具，有助于开发者推行统一的代码规范，避免样式错误，目前已经原生支持 CSS、Less、Sass 等语法。Stylelint 的 API 与 ESLint 高度一致，如果你使用过 ESLint，那么应该很容易就可以上手 Stylelint。

起步

和 ESLint 高度类似，Stylelint 也支持了配置、插件等各种功能。因此我们首先需要安装 stylelint 本体和基础的 standard 规则集。

npm install -D stylelint stylelint-config-standard
// or
yarn add -D stylelint stylelint-config-standard

接着我们在项目根目录创建一个 Stylelint 的配置文件。官网示例要求你新建一个 .stylelintrc.json 文件，但实际上你也可以使用 .stylelintrc.js 等文件格式。我个人更喜欢使用 js 格式的配置文件。

在项目根目录新建 .stylelintrc.js 文件，添加以下规则：

module.exports = {
  extends: ['stylelint-config-standard'],
};

接着我们可以在 package.json 中添加 npm 脚本实现一键格式化并检查样式文件：

"scripts": {
  "stylelint": "stylelint --fix \\"src/**/*.{css,sass,scss}\\"",
},

当然，你的项目可能不止有 Stylelint 这一种格式化工具，因此我更推荐你添加一条统一的“串联”命令：

"scripts": {
  "lint:prettier": "prettier --loglevel warn --write \\"src/**/*.{wxml,wxss,scss,wxs,json,md}\\"",
  "lint:eslint": "eslint --fix \\"src/**/*.js\\"",
  "lint:stylelint": "stylelint --fix \\"src/**/*.scss\\"",
  // 执行 npm run lint 可以一次性格式化多种文件
  "lint": "npm run lint:prettier && npm run lint:eslint && npm run lint:stylelint",
},

CSS 属性自动排序

早在多年以前，我就读过关于 CSS 属性排序的最佳实践，比如文档流相关属性靠上放，而元素自身属性往后放等。但即使是像我这样的超级重度代码格式化强迫症都无法完全遵循之。毕竟 CSS 代码是非正交的，属性的上下排列影响实在微乎其微。我连样式都懒得写了，你竟然还让我手动加一些没什么意义的排序？而 Stylelint 就可以帮我们无痛搞定这件事。

首先我们安装 stylelint-order 这个插件：

yarn add -D stylelint-order

接下来我们需要在 Stylelint 的配置文件中启用这个插件：

// .stylelintrc.js
module.exports = {
  extends: ['stylelint-config-standard'],
  plugins: ['stylelint-order'],
};

接下来你就可以自定义各种属性排序规则了，详情请查阅插件的 Github README。比如：