Eslint+prettier 实现代码 git 提交时自动格式化及修复

一、问题阐述:为什么要使用 Eslint+prettier 自动格式化代码?

现在前端的项目越来越大,项目中每个人都有自己习惯使用的编辑器,每个人的编码风格也不相同,导致后期代码 review 和项目维护难度较大

二、Eslint+prettier 有什么好处

1、借助 husky 在代码 commit 的时候使用,使用prettier进行代码格式化,Eslint(也可以进行代码格式化的规范)进行代码自动补全或修复

2、开发者不用关心编写的过程,只需要在提交代码的时候关注下commit的结果,但是有些时候 Eslint 可能无法修复,我们可以根据错误提示进行手动修复,平时编写代码只要注意编码规范,一般问题不大

三、配置及使用过程,以 vue-cli 搭建的项目为例

1、前期依赖包安装:husky、eslint、lint-staged、prettier

yarn add husky eslint lint-staged prettier --dev
或
npm install husky eslint lint-staged prettier -D
复制代码

2、根据 git 提交过程进行配置的思路

  • 提交代码时需要借助 git 提供的钩子对代码进行检测 — husky 配置

  • 提交之前要先进行代码格式化 — prettier 配置

  • 对于不规范的代码进行修复 — Eslint 配置

  • 对于 Eslint 修复不了的代码 commit 会失败并给出提示 — “git add” 配置

上述四点需要在 package.json 内部进行配置,如下:
// package.json
{
  ...
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "src/**": [
      "prettier --config .prettierrc --write",
      "eslint --fix",
      "git add"
    ]
  }
}
复制代码

3、对应上述 package.json 里需要的文件进行对应的创建

// .prettierrc
{
    "printWidth": 200,
    "tabWidth": 2,
    "useTabs": true,
    "semi": false,
    "singleQuote": true,
    "bracketSpacing": true,
    "arrowParens": "avoid"
}
复制代码

4、在工程项目根目录 .eslintrc.js / .eslintrc.json 添加 rules 规则

// .eslintrc.js
// extends:["@vue/prettier"] 一定要配置 prettier
module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: ["plugin:vue/essential", "@vue/prettier", "@vue/typescript"],
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
    "no-dupe-keys": "error",
    "no-duplicate-case": "error",
    "no-empty": ["error", {"allowEmptyCatch": true}],
    "no-ex-assign": "error",
    "no-extra-boolean-cast": "error",
    "no-extra-semi": "error",
    "curly": "error"
  },
  parserOptions: {
    parser: "@typescript-eslint/parser"
  }
};

复制代码

四、对配置进行验证

1、项目中配置规则要求使用单引号

  • git commit 之前代码截图如下
  • git commit -m "自动修复",命令执行后如下图

  • 上图所示配置的配置已经生效

五、总结

  • 代码自动格式化及自动修复,有效提高了项目的质量和协同作战的效率
  • 后期可独立搭建工程化项目,进行更深的规则定制
分类:
前端
标签: