前言
stylelint 是一个强大和现代的 CSS 审查工具，有助于开发者推行统一的代码规范，避免样式错误。其支持 less、sass 这类预处理器，目前 stylelint 有一百多条校验规则，并且还在逐步增加。
一、stylelint 具体什么作用
stylelint 有一百多条校验规则, 这些规则可以分为三类：
- 用于校对风格的规则
针对空格（比如说冒号附近的空格）、换行、缩进等等。
- 用于判别代码可维护性的规则
判断在CSS选择器中是否有使用某个ID，或者在某条声明当中是否应用了important关键词。
- 用于判断代码错误的规则
检测错误的HEX颜色写法或者某条简写属性是否会覆盖其他的声明语句。
二、安装依赖
- 安装 stylelint
npm i -D stylelint stylelint-config-stand- 安装适配预处理语法的插件，以 sass 为例：
npm i -D stylelint-scss- 安装 webpack 插件
npm i -D stylelint-webpack-plugin三、通过 npm 命令运行
// package.json
{
"scripts": {
"lint:css": "stylelint **/*.{html,vue,css,sass,scss,less}"
}
}可以手动在命令行运行：
npm run lint:css四、通过 webpack 插件运行
// vue.config.js
const StyleLintPlugin = require('stylelint-webpack-plugin');
module.exports = {
...
configureWebpack: {
plugins: [new StyleLintPlugin({
files: ['**/*.{vue,htm,html,css,sss,less,scss,sass}'],
fix: false, // 是否自动修复
cache: true, // 是否缓存
emitErrors: true,
failOnError: false,
})],
},
};五、编写配置
按以下顺序查找，任何一项有值，就会结束查找
- 在 package.json 中的 stylelint 属性指定规则
- 在 .stylelintrc 文件中指定，文件格式可以是 JSON 或 YAML。也可以给该文件加扩展名，.stylelintrc.json、 .stylelintrc.yaml、 .stylelintrc.yml、 .stylelintrc.js。
- stylelint.config.js 文件，该文件 exports 一个配置对象
rules
默认情况下未打开任何规则，也没有默认值。必须明确配置每个规则才能将其打开
defaultSeverity
只支持 “warning" 和 ”error" 两种，用于定义全局默认的报错等级
extends
可以扩展现有配置（无论是自己的配置还是第三方配置）
plugins
插件是社区构建的规则或规则集，支持方法，工具集，非标准 CSS功能或非常特定的用例。
processors
处理器是由社区构建的功能，它们挂接到stylelint的管道中，在其进入stylelint的过程中修改代码，并在其退出时修改结果。
我们不鼓励使用内置语法因为处理器与autofix功能不兼容。
ignoreFiles
忽略特定文件，node_modules 是默认情况下忽略的目录。但是，如果 ignoreFiles 设置了，则将其覆盖。
注意: 这不是忽略大量文件的有效方法。如果您想有效地忽略很多文件，请使用 .stylelintignore 或调整文件范围。
// stylelint.config.js
module.exports = {
defaultSeverity: 'error',
extends: ['stylelint-config-standard'], // 官方推荐
rules: {
},
};
六、忽略文件
在项目跟目录添加 .stylelintignore 文件，配置规则与 .gitignore 、.eslintignore 规则一样。
# .stylelintignore
# 旧的不需打包的样式库
*.min.css
# 其他类型文件
*.js
*.jpg
*.png
*.eot
*.ttf
*.woff
*.json
# 测试和打包目录
/test/
/dist/
七、stylelint 与 eslint 同时使用 git-hooks 配置
// package.json
{
...
"lint-staged": {
"*.{html,vue,css,sass,scss,less}": [
"npm run lint:css"
]
}，
"gitHooks": {
"pre-commit": "lint-staged"
},
}