如何在Vue+Webpack下配置Stylelint
Stylelint简介
stylelint是一个基于 Javascript 的代码审查工具,它易于扩展,支持最新的 CSS 语法,也理解类似 CSS 的语法。此外,因为它是基于 JavaScript,所以比起 Ruby 开发的 scss-lint 速度更快。
stylelint 是一个强大和现代的 CSS 审查工具,有助于开发者推行统一的代码规范,避免样式错误。
stylelint 由 PostCSS 提供技术支持,所以它也可以理解 PostCSS 解析的语法,比如 SCSS。
PostCSS 是一个使用 JS 解析样式的插件集合,它可以用来审查 CSS 代码,也可以增强 CSS 的语法(比如变量和混合宏),还支持未来的 CSS 语法、行内图片等等。
PostCSS 的哲学是专注于处理一件事,并做到极致,目前它已经有了 200 多个插件,由于它们都是基于 JavaScript 编写的,所以运行速度非常快。
Stylelint使用
1.安装
npm install -g stylelint --save-dev
2.配置
1.本地安装:
npm install stylelint-config-standard --save-dev
2.在项目中添加配置文件"stylelint.config.js"
module.exports = {
extends: ["stylelint-config-standard"]
}
3.添加或修改标准配置中的内容
module.exports = {
extends: ["stylelint-config-standard"],
rules: {
"max-nesting-depth": 2 // 允许嵌套的深度为2
}
}
在Vue+Webpack下配置Stylelint
1.Webpack下配置
1.本地安装stylelint-webpack-plugin:
npm install stylelint-webpack-plugin --save-dev
2.打开文件 build/webpack.base.conf.js,并在顶部添加加载插件代码
var StyleLintPlugin = require('stylelint-webpack-plugin')
在plugins数组下添加以下代码:
plugins: [
//...
new StyleLintPlugin({
// 正则匹配想要lint监测的文件
files: ['src/**/*.vue', 'src/assets/styles/*.l?(e|c)ss']
}),
//...
],
2.若在Vue文件下进行stylelint校验,则需要:
1.本地安装 stylelint-processor-html:
npm install stylelint-processor-html --save-dev
2.修改配置文件"stylelint.config.js"
module.exports = {
processors: ["stylelint-processor-html"],
extends: ["stylelint-config-standard"],
rules: {
}
}
这样,当项目启动时,就会对vue文件下的css,或者目录下的css文件进行stylelint校验了
Stylelint 规则
根据自己项目规范,配置需要的规则。以下是在stylelint-config-standard基础上,根据自身项目需求修改出的一些规则:
module.exports = {
processors: ["stylelint-processor-html"],
extends: ["stylelint-config-standard"],
rules: {
"selector-class-pattern": "^[a-z]+([a-z0-9]?|[a-z0-9\\-]*[a-z0-9])$", // 限制选择器名称写法.
"max-nesting-depth": 2, // 允许嵌套的深度为2
"number-leading-zero": "never",
"function-url-quotes": "always", // 地址一定要写引号
"font-family-name-quotes": "always-where-recommended", // 字体系列中命名时带引号
"value-list-comma-newline-after": "always-multi-line",// 在值列表的逗号后指定一个换行符或禁止留有空格。
"value-keyword-case": "lower", // 属性值小写
"no-empty-source": null,
"at-rule-no-unknown": null
}
};
具体的规则以及例子可以查看以下文档:
stylelint 的官方配置文档 、Example config
参考:
使用stylelint对CSS/Sass做代码审查
A nice way to lint .vue files with Stylelint?
Linting CSS in Vue files