介绍：
代码格式规范在多人协作项目中的作用不言而喻。主要手段是通过工具去管理，有以下两方面：
- 编码阶段，保存自动格式化代码。
- 提交阶段，git commit之前对暂存区的文件进行代码格式修复和检查。
主要用到 prettier, eslint, husky, lint-staged
格式化配置
Prettier vs Eslint
Linters（ESLint/TSLint/stylelint, etc.）有两种类型的规则。
一类是代码格式规则（Formatting rules），例如：max-len, no-mixed-spaces-and-tabs, keyword-spacing, comma-style…。
另外一类是代码质量规则（Code-quality rules），例如：no-unused-vars, no-extra-bind, no-implicit-globals, prefer-promise-reject-errors…。代码bug只跟这类规则可能有关。
Prettier只有第一类代码格式规则（Formatting rules）。
既然Eslint就具备了两个规则功能，为什么还要用Prettier？
因为Prettier专注代码格式化，相比Eslint更擅长格式化代码，更加的快速（支持更多文件类型？）。并且Eslint不支持某些相对复杂的代码格式化场景，比如一行超过n个字符换行等，而prettier可以办到。
总而言之，use Prettier for formatting and linters for catching bugs!
prettier
- 安装
npm install --save-dev --save-exact prettier
- 新建配置文件，让vscode知道你正在使用Prettier
echo {}> .prettierrc.json
- vscode安装prettier插件
Eslint
- 安装
npm install eslint --save-dev
- 新建配置文件
npm init @eslint/config
- vscode安装eslint插件
- eslint的格式化规则和prettier规则存在冲突。官方解决方案是使用
eslint-config-prettier关闭eslint与prettier冲突的格式规则。格式规则以prettier为准，并让eslint集成prettier的规则eslint-plugin-prettier。
4.1 安装
`npm install --save-dev eslint-config-prettier`
`npm install --save-dev eslint-plugin-prettier`
只需要在eslint配置文件添加即可应用
{
"extends": ["plugin:prettier/recommended"]
}
至此，格式化插件安装完毕。开启编辑器修改代码自动保存，保存时会格式化代码。通过修改配置文件，可自定义配置规则以符合团队风格。初次使用，可通过命令行格式化所有文件：`npx prettier --write ./` `npx eslint --fix`
提交格式化处理和校验
为了防止未经格式化正确的代码上传到代码仓库造成污染，在git hook 提交代码钩子执行脚本命令，对暂存区代码做检查。存在不符合规范且不能自动修复的，提交失败。主要用到lint-staged和husky。
Husky
husky让我们可以在想要的git hook下做一些事情。
安装参见上述官方文档链接。这里我们需要在提交代码前进行格式校验。那么需要监听的钩子是pre-commit：`npx husky add .husky/pre-commit "npx lint-staged"` 。在commit前会执行npx lint-staged 脚本命令。如果抛出错误，提交将会失败，反正提交成功。lint-staged是干嘛用的，下面马上介绍。
Lint-staged
lint-staged是什么？官方描述：
Run linters against staged git files and don't let 💩 slip into your code base!
翻译一下：对git暂存的文件，用linters工具去处理，防止💩一样的代码进入你的代码仓库。
重点1，只会处理git暂存的文件，不会处理所有文件，一般是挺快的，否则提交校验耗时就太长了。了。重点2，需要用linters相关工具配合。
lint-staged守住了最后一道防线。虽然有了vscode自动保存格式化代码，但是有些同学可能觉得代码规则校验繁琐，将插件关闭，提交未经格式化校验的代码。
- 安装，参见上面官方文档链接。
- 在项目package.json添加配置
"lint-staged": {
"*.{js,jsx,ts,tsx}": [
"prettier --write",`
"eslint --fix"
],
"*.{html,less,css,scss}": [
"prettier --write"
]
}
在提交代码前，会对所有的.js{x}，.ts{x}文件执行`prettier --write和eslint --fix` 。先用pretter进行代码格式修复，再用eslint对代码质量规则修复。但是eslint不是所有不符合规则的错误都能自动修复，最终eslint --fix会返回是否还有规则错误的结果。如果没有，则顺利提交通过。如果有，终止代码提交。
总结：
以上就是目前所了解到的代码格式规范配置相关的内容。可能有一些错误和理解不准确，了解到更多后再完善。