🧜‍♀️ 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 吧。