一、问题阐述：为什么要使用 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博客