使用 Eslint + Prettier + husky + lint-staged 提高前端项目质量、统一项目代码风格

5,966 阅读3分钟


前端代码风格因人而异,一个项目参与的人多了,不加强控制可能就是一个大杂烩,对开发人员来讲就是一个噩梦。

如何解决这种困境呢?

Eslint 代码检查,编辑器启用 Eslint 之后,不符合规范的会自动进行提示。
Prettier 让代码变得更 pretty,会更改不符合检测要求的代码,自动格式化。
husky  git 每步操作的钩子,没执行一个操作都会执行一次对应的钩子函数,执行 pre-commit 操作时,执行 Prettier 格式化脚本,即可自动的格式化代码,让 commit 之后的代码都符合 Prettier规范。
lint-staged 想想如果你在一个有一定规模的项目里突然加入一个格式化工具,是不是整个项目都要变天?lint-staged 就是用来只对变更的文件进行处理的

依赖安装

npm i -D husky lint-staged prettier eslint-plugin-prettier eslint-config-prettier

配置

项目使用 create-react-app 初始化

配置 .eslintrc

{
    "env":{
        "amd": true,
        "browser": true,
        "node": true,
        "es6": true
    },
    "extends": [
        "react-app",
        "plugin:prettier/recommended",
        "prettier/react"
    ],
    "plugins": [
        "prettier"
    ],
    "parser": "babel-eslint",
    "rules": {
        "prettier/prettier": "error"
    }
}
  1. eslint-config-prettier 禁用所有和 Prettier 产生冲突的规则
  2. eslint-plugin-prettier 把 Prettier 应用到 Eslint,配合 rules  "prettier/prettier": "error" 实现 Eslint 提醒

配置 .prettierrc

具体规则参考官网 Options

{
    "semi": false,
    "useTabs": false,
    "singleQuote": true,
    "trailingComma": "es5"
}

配置 .editorconfig

编辑器识别 .editorconfig 之后可以在输入的时候带来便利,参考 EditorConfig

root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
max_line_length = 120

[*.md]
trim_trailing_whitespace = false

配置 package.json

添加 husky 和 lint-staged 配置,添加 lint、fix  scripts 项

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom",
    "eject": "react-scripts eject",
    "lint": "eslint src/**/*.js",
    "fix": "prettier --write src/**/*.js"
},
"husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
},
"lint-staged": {
    "src/**/*.js": [
      "eslint --fix",
      "prettier --write",
      "git add"
    ]
},


然后运行 

npm run lint

Eslint 会检测 src 下面所有 js 文件

运行 

npm run fix

Prettier 会自动修复 src 下面的文件,注意,谨慎使用这个操作,它会让你的所有不合符规则的文件发生变更。你可能会惊讶的发现,文件夹中上百个文件都被改了!!!

如何避免 Prettier 一次将所有的文件格式化?

husky.hooks['pre-commit'] 是在 commit 之前会执行的命令,在执行 git commit 时,会先执行 lint-staged ,而 lint-staged 就是用来只对当前更改的文件进行检测和格式化。

lint-staged 中 "src/**/*.js" 表示只对 src 中的 js 文件进行格式化,也可以 "*.js" 表示对所有项目中的 js 文件都会格式化。后面数组中的三条命令会先后分别执行, Eslint  fix 之后 Prettier 格式化,然后 git add,然后 git commit

eslint --fix -> prettier --write -> git add -> git commit -m 'xxx'

测试运行

这是 git commit 之前


执行

git add *
git commit -m 'test'

执行后


命令行