Stylelint的使用

一、Stylelint介绍

在前端项目中，除了JavaScript代码需要被lint之外，css代码同样需要被lint。对于css的lint操作，我们一般会使用一个叫Stylelint的工具来进行完成，而Stylelint的使用与ESLint的使用是一致的。

Stylelint提供一系列的代码检查规则供我们使用，和ESLint一样，我们也可以在配置文件中去选择性的开启或者关闭某些规则；

其次，Stylelint也提供了cli工具，我们可以在命令行调用Stylelint命令，检查我们项目中的css文件；

Stylelint也可以通过插件来实现对Sass、Less、PostCSS这些css衍生语法的检查；

Stylelint同样支持Gulp或者Webpack的集成。

对于Stylelint的使用我们完全可以去参考ESLint的操作方式。

二、Stylelint的安装

yarn add stylelint --dev

执行stylelint对css代码进行检查

yarn stylelint ./index.css // 这里同样可以使用通配符的方式批量检查

这时会报错一个错误，和ESLint一样，我们需要有一个配置文件。

所以我们在项目根目录下创建一个.stylelintrc.js的文件，里面的配置选项内容基本与ESLint中的是相同的。

module.exports = {
	extends:"",// 继承一些共享配置
}

因为Stylelint内部并没有提供任何可用的共享配置，所以我们需要先自行安装一些模块

yarn add stylelint-config-standard --dev

这里和ESLint不太一样，继承的共享配置的名称必须是一个完整的模块名称

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

我们再次执行yarn stylelint ./index.css --fix，和ESLint一样，Stylelint可以通过–fix完成大多数问题的自动化修复。

三、关于sass代码的检查

如果说需要对sass代码进行stylelint的检查的话，也是可以实现的，只不过需要安装另外一个模块stylelint-config-sass-guidelines

yarn add stylelint-config-sass-guidelines --dev

修改配置中的extends

	extends:[
        "stylelint-config-standard",
        "stylelint-config-sass-guidelines"
    ],

然后就可以检测sass文件了