Eslint + Prettier+ Lint-staged + Husky + Commitlint实现工程化规范前端代码

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第2天，点击查看活动详情

前言

在实际开发中常常会遇到同事之间协作开发，由于编辑器代码格式化的不同以及其他代码规范问题，导致代码之间格式不统一，合并代码时常常非常痛苦，因此急需在项目中配置一套可靠的代码规范工具，但是网上的文章很多配置非常复杂，因此总结了一套非常简单的配置方式，能够快速搭建一套可用模板。 本文主要有两大工具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规范

commitlint规范文档地址

git commit -m 'fix: 修复xxx的bug'

git commit -m 'ci: 搭建基础配置'
复制代码

最后

我们通过以上配置实现了代码格式统一化以及提交信息的规范化，对于实现前端工程化-代码规范化有很大的帮助，在配置过程中有其他问题欢迎讨论，也希望能够有更好更全的配置方式。