# 🧜‍♀️ StyleLint

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

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

先来安装一些必要的 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 (opens new window) 的配置。

# 下一篇

这一篇非常的短,相信大家已经可以在 Linter 世界中遨游了。然而,事情并没有结束!

在日常开发中,我们不能保证所有人都会在写完代码后跑一次 Linter,有的人或许忘记开启 Linter 校验,有的人可能懒得修复,有的人可能根本就不知道有 Linter 这玩意!

所以,我们更希望可以在 git commit 或者 git push 前再做一次 Linter 操作,以此保证入库的代码都是经过修复的,一起来看看 Husky x lint-staged 吧。

Last Updated: 1/16/2022, 3:20:26 PM