实现思路:
本地开发:开发时需要同统一格式且保持一定规范需要借助Prettier、EsLint、Vuter三个VsCode插件。 代码提交时:利用husky插件在git的pre-commit阶段对代码进行统一格式化和检测。在commit-msg时进行git提交记录检测。
实现过程:
本地格式化
下载三个插件Prettier(格式化)、EsLint(代码提示)、Vetur(vue2代码高亮)
!
提交格式化
所需各种包介绍 | 包名 | 介绍 | 安装指令 | | --- | --- | --- | | prettier | 代码格式化,详细介绍 | npm install --save-dev --save-exact prettier | | eslint | 代码提示,详细介绍 | npm install eslint --save-dev | | husky | GitHook工具,详细介绍 | npm install husky -D | | eslint-config-prettier | 解决Prettier与EsLint冲突,详细介绍 | npm install --save-dev eslint-config-prettier | | lint-staged | 对暂存区的git文件运行linter,详细介绍 | npm install --save-dev lint-staged | | commitlint | 对git commit 记录做规范约束,详细介绍 | npm install --save-dev @commitlint/{config-conventional,cli} |
安装完后需要进行一定的配置 1、配置Prettier的格式化 下载prettier包后,项目根目录执行指令,生成Prettier的格式化参考文件。该文件的优先级高于VsCode的Prettier配置。在该json文件中写入各配置项。配置项详解
echo {}> .prettierrc.json
2、配置EsLint检测 下载eslint包后,项目根目录执行指令,选择相应的配置后生成eslint的配置文件。
npx eslint --init
最后选的全部配置:
生成的config文件,更多配置详情
此时如果你的extends中的校验规则与prettier的格式化规则矛盾的话,就需要引入一个解决矛盾的extend
3、下载好解决eslint和prettier矛盾的包后,在eslint的配置文件的extends最后一项放入"prettier"。like this。
4、此时需要在vscode的setting.json文件中加入一句配置就能在保存文件时自动格式化
"editor.formatOnSave": true,
5、若协作时部分成员不安装相应插件,则需要在提交代码时对暂存区的文件进行一遍格式化。此时需要使用git hook 工具husky和暂存区操作工具lint-staged。在下载完相应的包后。 package.json中添加一条指令并执行一次(git的根目录必须是此项目根目录,不然会报错,详情)
"prepare": "husky install",
此时项目根目录会生成一个.husky文件夹
而后我们需要添加hook指令了,让git在commit前执行我们指定的指令。执行指令生成pre-commit文件
npx husky add .husky/pre-commit "npx lint-staged"
此时.husky下会多一个pre-commit文件。里面就是我们指定的指令 npx lint-staged
npx lint-staged是让对暂存区的文件做操作,具体做什么操作还要在package.json里面配置。在package.json里面加一个配置(注意不是scripts里,是和scripts平级),让对暂存区的文件全部走一遍格式化和预发检测(检测失败则不允许提交)。当然你可以自定义文件范围和指令。
6、对git的commit做约束。下完对应的包后需要添加一个配置文件。根目录下添加commitlint.config.js文件,用于配置约束要求,当然可以使用默认的配置。在文件写入,如需拓展可以参考这里
当然还是需要一个git hook操作,让我们在git commit的时候对commit内容校验。执行指令在.husky下新加一个commit-msg文件
npx husky add .husky/commit-msg "npm run commitlint"
还是需要在package.json中添加commitlint指令
这样在git提交的时候就可以对commit进行校验了,若不符合就不让提交。如下
最后演示一套流程,暂存区格式化和git提交约束