正文
个人理解上 stylelint 是一个css代码linter的工具，可以结合nodejs和cli进行使用。继csslinter等linter之后，具有插件化的功能，同postcss的插件，webpack等都可以较好的集成进去。
如果说js的代码检测和规范工具在jslint，jshint之后，你肯定听说过eslint。同eslint对js代码校验规则一样，stylelint也有一套类似的处理系统.
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": {
"lintcss:fix": "stylelint **/*.vue --custom-syntax postcss-html --fix"
}
5.控制台执行
npm run lintcss:fix
，在控制台看输出，能够修改的都会被修改（比如大写的16进制颜色会被转成小写），不能被修改的就需要手动修改问题，根据提示修改即可.
安装
建议是本地安装，每个项目都重新安装一遍。
npm i stylelint -D
因为不是全局安装(
-g
安装)，所以一般调用的话需要借助
npm scripts
,如果这个没玩过,先去查阅相关资料.
···
···
{
"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.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文件的处理是
{
"scripts": {
