Stylelint

个人理解上 stylelint 是一个css代码linter的工具，可以结合nodejs和cli进行使用。继csslinter等linter之后，具有插件化的功能，同postcss的插件，webpack等都可以较好的集成进去。

如果说js的代码检测和规范工具在jslint，jshint之后，你肯定听说过eslint。同eslint对js代码校验规则一样，stylelint也有一套类似的处理系统.

update in 12/15

干脆直接fork了vue-templates for webpack,直接fork这个项目，在本地创了一个stylelint的分支，修改meta.js, 增加了stylelint的相关配置.(使用的是现在最新的vue-cli的webpack模板，具体版本地址1.2.7)

所以现在只需要在本地type下面的内容

/* vue init username/repo your-projectName*/
vue init EliazTray/webpack#stylelint webpack-stylelint

出现以下的内容，都勾选即可

然后在安装完依赖之后

// 就可以对所有的.vue文件进行处理了（支持.vue里面的lang）
npm run lintcss:vue

这个时候应该会有错误，显示Expected empty line before rule rule-empty-line-before

// 类似eslint中添加--fix
npm run lintcss:vue -- --fix

就可以发现这些这个错误被自动fix掉了（下文也说了有些错误是不支持自动fix掉的）

如果想要试试效果，可以将.vue文件中随意一处的color使用大写的16进制表示.使用–fix就可以发现大写被自动fix转换成小写了(是因为继承了standard中的规则)

写的挺小白文了，有疑问的话，可以交流，:)

TL;DR

1.使用vue-cli初始化一个工程

2.npm i stylelint stylelint-config-standard -D

3.在工程的根目录下建立stylelint.config.js文件，将以下内容复制进去。

module.exports = {
  "extends": "stylelint-config-standard",
  "rules": {
  }
}

4.打开package.json在scripts中插入

"scripts": {
    // 表示对所有的.vue文件使用自定义的syntax去parse，自定义的syntax module就是postcss-html，并且使用--fix自动修复选项，去修复一些可以修复的规则。
  "lintcss:fix": "stylelint **/*.vue --custom-syntax postcss-html --fix"
}

5.控制台执行 npm run lintcss:fix，在控制台看输出，能够修改的都会被修改（比如大写的16进制颜色会被转成小写），不能被修改的就需要手动修改问题，根据提示修改即可.

安装

建议是本地安装，每个项目都重新安装一遍。

npm i stylelint -D

因为不是全局安装(-g安装)，所以一般调用的话需要借助npm scripts,如果这个没玩过,先去查阅相关资料.

// in package.json

···
···

{
  "scripts": {
    "lintcss": "stylelint **/*.css -s scss"
  }
}

···

先说一个大的前提，很重要.

• stylelint自动忽略node_modules和bower_modules下的linter校验.
• stylelint对文件名为css，.scss, .sass等具有后缀的文件自动采用相关的syntax去解析，比如css是使用css，scss使用scss.如果你想要对.css文件采用scss的语法去linter，就如上面你说些，使用-s或者--syntax的选项去重新指定加载的syntax.
• stylelint 不能以文件夹作为stdin（不能src/，需要指定为src/*.scss），也没有指定后缀名(eslint中–ext的功能)。如在eslint中使用eslint -ext .js,.vue 就可以对指定类型的文件进行linter

规则

一般需要在项目根目录建立一个有关stylelint的配置文件

• a stylelint property in package.json
• a .stylelintrc file
• a stylelint.config.js file exporting a JS object

对比eslint，eslint有.eslintrc.js

bebel用的就是.babelrc

所以stylelint我习惯上使用在根目录建立一个stylelint.config.js的文件，以module.exports的方式，输出一些配置规则。

看下我工程中的配置。下面的stylelint-config-standard，stylelint-order需要安装。

module.exports = {
  "extends": "stylelint-config-standard",
  "plugins": [
    "stylelint-order"
  ],
  "rules": {
    "order/order": [
      "declarations",
      "custom-properties",
      "dollar-variables",
      "rules",
      "at-rules"
    ],

    ····
    ····
  }
}

一般extends是去继承一个规则，一般使用的是stylelint-config-standard这个库，这个库是官方推荐，也是很多大公司，比如facebook，google就是使用这套css规则.

这里我使用了一个排序的插件，等会再说。是针对css属性的位置书写生效的.

在编辑器中使用stylelint

刚刚写的都是基本的配置和一个介绍，是保证你能够在感知一个stylelint是一个什么东西的前提下写的。

如果想要在编辑器中使用stylelint，如vscode,就很简单，

1.在插件库中查找stylelint 2.根据插件的提示，修改一些用户设置。但我测试，在我现在的版本是不需要这些配置都可以生效的。 3.想在特殊的语言块中使用stylelint，比如vue文件中，加上如下的设置即可.

// 用户设置文件中. 文件->首选项->用户设置
// 让stylelint在vue组件中支持.
    "stylelint.additionalDocumentSelectors": [
        "vue"
    ]

stylelint会根据根目录中stylelint.config.js中的规则设置，去linter所有的.vue文件，提示相关的语法错误.

这样在coding 的时候就已经具有了自动提示错误的功能了.

自动修正

想象一下，eslint有–fix，同理stylelint也有–fix选项，不过stylelint的–fix只能修复一些问题，像大括号前面必须要有空格这些是不会自动帮你fix掉的，需要手动fix（官方文档说的也很清楚）

那这些都是对.css或者.scss，或者.sss等文件进行–fix，但是如果一个特殊的文件，如果也需要stylelint去linter，需要怎么做，官方文档说的也很明白，使用pre-processor，先使用预处理器对对应的文件进行–custom-syntax的parse处理。

强烈建议阅读

解析非标准的语法

相关讨论1

相关讨论2

看了相关的issue，大概上（从今天算）下个版本（vue-cli下的webpack的新模板）应该会集成stylelint的相关设置。

所以对vue文件的处理是

// package.json
{
  "scripts": {
    // 表示对所有的.vue文件使用自定义的syntax去parse，自定义的syntax module就是postcss-html，并且使用--fix自动修复选项，去修复一些可以修复的规则。
    "lintcss:fix": "stylelint **/*.vue --custom-syntax postcss-html --fix"
  }
}

这个postcss-html模块前几天已经被built in stylelint,也就是已经内建了，所以安装stylelint的时候不需要安装postcss-html,这个postcss-html的作用就是解析非标准的语法，比如markdown和vue之类的，

使用相关插件

在继承stylelint-config-standard的之后,已经具有一些css规则，但是比如我会对css的抒写属性的顺序有要求，这个时候需要启用对css属性顺序的检测（属性顺序由自己定义），主要是使用一个叫做stylelint-order的插件,具体的配置如下。

先 npm i stylelint-order -D (已经安装stylelint,stylelint-config-standard的前提)

// 我项目工程的配置，order是使用style-order的推荐属性顺序。
module.exports = {
  "extends": "stylelint-config-standard",
  "plugins": [
    "stylelint-order"
  ],
  "rules": {
    "order/order": [
      "declarations",
      "custom-properties",
      "dollar-variables",
      "rules",
      "at-rules"
    ],
    "order/properties-order": [
      "position",
      "top",
      "right",
      "bottom",
      "left",
      "float",
      ...
      ...
    ]
  }
}

这样我的css，scss抒写的属性规则就按照我的规则设置那样，顺序出现错误会帮助提示出来，然后使用–fix的时候自动校正为我设置的顺序规则。

大概就是这样了,挺有用的一个linter工具.还有结合在postcss或者webpack中具体读者可以自己研究一下啦~