在团队开发中，良好的代码规范约定是保证互相良好协作的基本要求。

stylelint 是一个强大的 CSS linter 工具，它使用 PostCSS 的 AST 语法解析树引擎，支持 PostCSS 支持的所有语法识别，而且还支持自定义语法解析器，具有很大的扩展性，对于 SCSS、LESS 和 SugarSS 都可以良好的支持。

stylefmt 是一个基于 stylelint 的代码修正工具，它可以基于 stylelint 的代码规范约定配置，对可修正的地方作格式化输出。

PostCSS-Sorting 是一个 CSS 属性顺序约定格式化的插件，基于属性顺序约定，格式化调整其顺序。这可以使得团队内的 CSS 书写更为规范且具有一致性。

本文将简要介绍 stylelint 和 stylefmt 的安装配置步骤，为快速完成相关环境配置提供参考。

1. 安装 stylelint 和 stylefmt

使用 npm 安装，执行命令：

npm i -g postcss stylelint stylefmt

2. 配置 stylelintrc 文件

stylelint 支持 JSON 、YMAL 和 JS (commonJS 规范)格式的配置文件类型。这里为了 IDE 编辑器插件的支持，推荐使用基本的 JSON 配置方式。步骤参考如下。

在项目根目录新建文件 .stylelintrc(可通过 sublime text 等 IDE 编辑器创建)。录入相关配置约定。内容参考：

{
"ignoreFiles": ['*.min.css'],               //忽略部分文件
"defaultSeverity": "error",                 //默认报告为错误。可选值：warning、error
"extends": ["stylelint-config-standard"],   //加载扩展规则。需要 npm install 在项目目录或父级下
"rules": {                                  //规则配置，会覆盖 extends 中相同的配置项
    "comment-empty-line-before": ["always", {
        "ignore": ["stylelint-commands", "between-comments"],
    }],
    "indentation": 4,
    "block-no-empty": true,
    "color-no-invalid-hex": true,
    "declaration-colon-space-after": "always",
    "declaration-colon-space-before": "never",
    "function-comma-space-after": "always",
    "media-feature-colon-space-after": "always",
    "media-feature-colon-space-before": "never",
    "media-feature-name-no-vendor-prefix": true,
    "max-empty-lines": 5,
    "number-leading-zero": "never",
    "number-no-trailing-zeros": true,
    "property-no-vendor-prefix": true,
    "selector-list-comma-space-before": "never",
    "selector-list-comma-newline-after": "always",
    "selector-no-id": true,
    "string-quotes": "single",
    "value-no-vendor-prefix": true
}

extends 中配置了 stylelint-config-standard 扩展，这需要在配置文件所在目录或父级目录下安装它：

npm i stylelint-config-standard --save-dev

3. 配置 IDE

推荐使用 sublime text3 、 vscode 或 atom 编辑器。这里以 sublime text3 为例。

3.1 安装插件

快捷键 ctrl+shift+p 输入install，然后分别搜索 stylefmt 和 SublimeLinter-contrib-stylelint，安装它们。

对于 postcss-sorting ，sublime text 对应的插件为：PostCSS Sorting。其配置与属性顺序规则参考：

https://github.com/hudochenkov/postcss-sorting/tree/master/configs

3.2 修改 SublimeLinter-contrib-stylelint 插件以支持 LESS、SCSS

当前通过 Sublime text 搜索安装的该插件(1.0.9)存在语法解析参数的问题。可以通过拉取 github 最新的内容解决。方法如下：

a. 进入 Sublime Text 3\Data\Packages安装包目录，移除 SublimeLinter-contrib-stylelint 目录。

b. 在当前目录 clone 如下仓库：
https://github.com/kungfusheep/SublimeLinter-contrib-stylelint.git

或这里的一个 fork 并修复了该问题的仓库：
https://github.com/lzwme/SublimeLinter-contrib-stylelint.git

3.3 设置 stylefmt 快捷键

sublime-stylefmt 插件可以按照配置文件规则格式化修正当前编辑的文件。

对于 stylefmt 还可以设置一个快捷键，以方便快捷操作。在 Preferences->user keymap 中，添加如下内容：

[
    { "keys": ["alt+super+f"], "command": "stylefmt" }
]

4. 相关参考

总结一下，stylelint 适合配置到自动化构建工具/平台上，以对代码质量作严格要求。 stylefmt 及 post-sorting 更适合开发者配置到编辑器中，用于快捷的修正不规范的部分。

如有其它问题，欢迎讨论。

http://stylelint.io/
https://github.com/stylelint/stylelint
https://github.com/stylelint/stylelint-config-standard
https://github.com/morishitter/stylefmt
https://github.com/dmnsgn/sublime-stylefmt
https://github.com/kungfusheep/SublimeLinter-contrib-stylelint
https://github.com/fisker/fis3-lint-stylelint
https://github.com/hudochenkov/postcss-sorting