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

prettier 文档地址：prettier.io/docs/en/opt…

// .prettierrc

{

"printWidth":200,

"tabWidth":2,

"useTabs":true,

"semi":false,

"singleQuote":true,

"bracketSpacing":true,

"arrowParens":"avoid"

}

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

项目根目录下 .eslintrc.js 中添加 rules 规则

eslint 文档地址：eslint.org/

// .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 "自动修复"，命令执行后如下图

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

五、总结

代码自动格式化及自动修复，有效提高了项目的质量和协同作战的效率

后期可独立搭建工程化项目，进行更深的规则定制

原文：Eslint+Prettier 实现代码 git 提交时自动格式化及修复_dearyang-CSDN博客