🧜♀️ StyleLint
虽然前面那么多篇文章讲得都是 ESLint 的内容,但其实都是给大家做铺垫,让大家能不仅能知其然,还能知其所然。
ESLint 再强大也只是 JavaScript 和 TypeScript 的 Linter,对样式文件 .css
, less
, scss
则需要 StyleLint。
先来安装一些必要的 NPM 包:
# StyleLint
npm i -D stylelint
# StyleLint 的 Prettier 插件,类似 eslint-plugin-prettier
npm i -D stylelint-prettier
# 禁用与 Prettier 冲突的 StyleLint 规则
npm i -D stylelint-config-prettier
# 基础规则(可选)
npm i -D stylelint-config-standard
配置 .stylelintrc.js
:
module.exports = {
"plugins": ["stylelint-prettier"],
"extends": [
"stylelint-config-standard",
"stylelint-config-prettier"
],
"rules": {
"prettier/prettier": true
}
}
经过刚刚 ESLint 的配置,相信你看这份配置应该没什么难度了:
- 用 Prettier 插件格式化代码
- 然后添加了 standard 以及 Prettier 的规则集,并禁用 StyleLint 一些和 Prettier 冲突的规则
- 最后开启 Prettier 规则
造一个屎山 ./src/messyCss.css
玩去吧。
StyleLint x Less
不过,当要配置 less 或者 scss 还需要一点步骤。
# StyleLint 的 Less 插件
npm i -D stylelint-less
# StyleLint 的 Less 规则
npm i -D stylelint-config-recommended-less
# StyleLint 处理 customSyntax
npm i -D postcss-less
修改配置:
module.exports = {
"plugins": ["stylelint-prettier"],
"extends": [
"stylelint-config-standard",
"stylelint-config-recommended-less",
"stylelint-config-prettier"
],
"customSyntax": "postcss-less",
"rules": {
"prettier/prettier": true
}
}
大功告成!再造个屎山 ./src/messyLess.less
玩去吧~
只要你成功配置好了 StyleLint x Less,别的 CSS 预处理的 StyleLint 配置也是一样的,只需要吧上面的 less
替换掉就可以了。
官网也有介绍 StyleLint x Scss 的配置。
下一篇
这一篇非常的短,相信大家已经可以在 Linter 世界中遨游了。然而,事情并没有结束!
在日常开发中,我们不能保证所有人都会在写完代码后跑一次 Linter,有的人或许忘记开启 Linter 校验,有的人可能懒得修复,有的人可能根本就不知道有 Linter 这玩意!
所以,我们更希望可以在 git commit
或者 git push
前再做一次 Linter 操作,以此保证入库的代码都是经过修复的,一起来看看 Husky x lint-staged 吧。