前言
在实际开发中常常会遇到同事之间协作开发，由于编辑器代码格式化的不同以及其他代码规范问题，导致代码之间格式不统一，合并代码时常常非常痛苦，因此急需在项目中配置一套可靠的代码规范工具，但是网上的文章很多配置非常复杂，因此总结了一套非常简单的配置方式，能够快速搭建一套可用模板。 本文主要有两大工具
Prettier+Commitlint，配置中穿插Lint-staged、Husky、Eslint等工具的配置。
部分关键工具及文件介绍：
Prettier：主要用来实现代码提交前的格式化Commitlint：主要用来实现代码commit信息的规范性检测Husky：主要是操作 git 钩子的工具Lint-staged：主要是本地暂存代码检查工具- .husky文件中的
pre-commit：通过钩子函数判断提交的代码是否符合规范 - .husky文件中的
commit-msg：通过钩子函数判断commit信息是否符合规范
一、Prettier 实现代码格式的工程自动化
Prettier是一款前端工程化中非常流行的代码格式化工具，支持大量的编程语言，当然包括js、ts等，它就像是一个大厨，而我们只负责将食材交给Prettier处理就能得到一盘美味的菜肴，他内置的配置是具有普适性的，几乎不需要设置参数。Prettier官方文档地址：https://www.prettier.cn/
我们可以看到官网的格式化代码比较图，它并不关心你的语法是否正确，只关心你的代码格式，比如是否使用单引号，语句结尾是否使用分号，以及适时的换行等，它将杂乱的代码转化为符合标准的代码格式。
1.安装Prettier
npm install --save-dev --save-exact prettier<br>
yarn add --dev --exact prettier
复制代码2.新建配置文件 .prettierrc.json
echo {}> .prettierrc.json
复制代码.prettierrc.json文件可以配置格式化选项,如官网的基础配置，当然可以根据文档配置更多内容。
"semi": false, // 使用分号, 默认true
"singleQuote": true, // 使用单引号, 默认false(在jsx中配置无效, 默认都是双引号)
"bracketSpacing": true， // 对象中的空格 默认true
"tabWidth": 4， // tab缩进大小
复制代码注意采坑点，提交时会报错
Invalid [configuration](https://so.csdn.net/so/search?q=configuration&spm=1001.2101.3001.7020) file.prettierrc.json: JSON Error in D:\XXX,这是因为错误的原因是因为编码不对，webstorm等工具默认应该是utf16了，改成utf8之后运行正常
3.创建.prettierignore文件
类似于
.gitignore文件，配置忽略格式化的文件，我们做如下配置
# Ignore artifacts:
build
coverage
复制代码4.利用Pre-commit Hook做工程自动化
我们希望自己的项目能够在代码提交前自动格式化，因此需要使用
Pre-commit Hook
（1）安装lint-staged
npx mrm@2 lint-staged
复制代码该命令将安装和配置
husky和lint-staged,并且生成.husky文件及pre-commit hook，husky是一个可以让我们方便管理git hook的工具。
同时在package.json文件中将会生成相关配置，如果我们是ts、tsx文件可以在
lint-staged增添扩展名,这两行命令意思是在pre-commit之前即在提交前运行lint-staged，使用Prettier对代码进行格式化。
注意如果使用
npx mrm lint-staged命令会报如下错误，原因是当前版本3mrm中与lint-staged并不兼容，需要运行npx mrm@2 lint-staged才能解决问题。
5.让Prettier与Eslint更好搭配
由于我们的项目中常常存在
Eslint，Prettier与Eslint一起工作时常常会有冲突，所以我们需要专门为此配置一下。
（1）安装eslint-config-prettier
yarn add eslint-config-prettier
复制代码在package.json的
eslint配置中增添prettier,覆盖一部分eslint规则。
6.查看效果
可以进行commit操作，在git提交记录中查看变化，我们可以看到App.tsx在提交代码前的空格以及行样式都被格式化了。
二、Commitlint 实现代码提交信息的规范化
在实际开发中，我们的代码提交常常是比较潦草的，可能有时候只会写个简单的修复，这样的提交信息虽然开发中省时省力，但在代码回顾、维护时，常常需要提交信息才能更好理解代码的作用，因此代码提交信息的规范化其实是前端代码规范中的重要一环，而
commitlint是一个帮我们检查commit msg是否符合规范的工具。 commitlint仓库地址：https://github.com/conventional-changelog/commitlint
1.安装commitlint
# Install commitlint cli and conventional config
npm install --save-dev @commitlint/{config-conventional,cli}
# For Windows:
npm install --save-dev @commitlint/config-conventional @commitlint/cli
复制代码2.创建配置文件（echo创建记得将编码改为utf-8）
它会在项目下生成
commitlint.config.js配置文件
# Configure commitlint to use conventional config
echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js
复制代码3.配置husky hook
在package.json的husky hook配置中添加
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
"husky": {
"hooks": {
"pre-commit": "lint-staged",
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
}
},
"lint-staged": {
"*.{js,css,md,ts,tsx}": "prettier --write"
}
复制代码
4.在.husky文件夹下生成commit-msghook。
npx husky add .husky/commit-msg 'npx --no-install commitlint --edit $1'
复制代码
5.测试效果
如果commit msg为ci不规范消息则在commit时会报错，如果使用
ci: add commitlint将会提交成功。
6.commitlint规范
git commit -m 'fix: 修复xxx的bug'
git commit -m 'ci: 搭建基础配置'
复制代码最后
我们通过以上配置实现了代码格式统一化以及提交信息的规范化，对于实现前端工程化-代码规范化有很大的帮助，在配置过程中有其他问题欢迎讨论，也希望能够有更好更全的配置方式。