一、问题阐述：为什么要使用 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 "自动修复"，命令执行后如下图
- 上图所示配置的配置已经生效
五、总结
- 代码自动格式化及自动修复，有效提高了项目的质量和协同作战的效率
- 后期可独立搭建工程化项目，进行更深的规则定制