🧜‍♀️ StyleLint

虽然前面那么多篇文章讲得都是 ESLint 的内容,但其实都是给大家做铺垫,让大家能不仅能知其然,还能知其所然。

ESLint 再强大也只是 JavaScript 和 TypeScript 的 Linter,对样式文件 .css, less, scss 则需要 StyleLint

先来安装一些必要的 NPM 包:

  1. # StyleLint
  2. npm i -D stylelint
  3. # StyleLint 的 Prettier 插件,类似 eslint-plugin-prettier
  4. npm i -D stylelint-prettier
  5. # 禁用与 Prettier 冲突的 StyleLint 规则
  6. npm i -D stylelint-config-prettier
  7. # 基础规则(可选)
  8. npm i -D stylelint-config-standard

配置 .stylelintrc.js

  1. module.exports = {
  2. "plugins": ["stylelint-prettier"],
  3. "extends": [
  4. "stylelint-config-standard",
  5. "stylelint-config-prettier"
  6. ],
  7. "rules": {
  8. "prettier/prettier": true
  9. }
  10. }

经过刚刚 ESLint 的配置,相信你看这份配置应该没什么难度了:

  • 用 Prettier 插件格式化代码
  • 然后添加了 standard 以及 Prettier 的规则集,并禁用 StyleLint 一些和 Prettier 冲突的规则
  • 最后开启 Prettier 规则

造一个屎山 ./src/messyCss.css 玩去吧。

StyleLint x Less

不过,当要配置 less 或者 scss 还需要一点步骤。

  1. # StyleLint 的 Less 插件
  2. npm i -D stylelint-less
  3. # StyleLint 的 Less 规则
  4. npm i -D stylelint-config-recommended-less
  5. # StyleLint 处理 customSyntax
  6. npm i -D postcss-less

修改配置:

  1. module.exports = {
  2. "plugins": ["stylelint-prettier"],
  3. "extends": [
  4. "stylelint-config-standard",
  5. "stylelint-config-recommended-less",
  6. "stylelint-config-prettier"
  7. ],
  8. "customSyntax": "postcss-less",
  9. "rules": {
  10. "prettier/prettier": true
  11. }
  12. }

大功告成!再造个屎山 ./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 吧。