持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第6天，点击查看活动详情
前言
大家好，我是陈同学，一枚野生前端开发者，感谢各位的点赞、收藏、评论
在前端工程发展越来越成熟的今天，我们开始注重中大型多人协作项目中代码质量问题，在团队中可能我们会有代码规范文档，但每一位成员的代码编写习惯都各不相同，故我们需要增加自动化代码检查的流程，以提醒开发者遵循相关规范进行项目开发
本文就来记录一下现代前端工程中流行的代码检查工具的接入流程
本文阅读成本与收益如下：
阅读耗时：3mins
全文字数：3k+
预期效益
- 学习使用commit-msg检查
- 学习使用eslint检查
- 学习使用prettier
规范化commit-msg
格式化的Commit-message，几个好处:
-
提供更多的历史信息，方便快速浏览
-
可以过滤某些commit（比如文档改动），便于快速查找信息
-
可以直接从commit生成Changelog
commit-message的格式
commit-message共分为三个部分
- Header（must）
包括三个字段：type、scope、subject
其中type、subject为必填项
type
选项有：（此处可根据项目情况自定义）
- feat：新功能（feature）
- fix：修补bug
- docs：文档（documentation）
- style：格式（不影响代码运行的变动）
- refactor：重构（即不是新增功能，也不是修改bug的代码变动）
- test：增加测试
- chore：构建过程或辅助工具的变动
scopre：说明
commit影响的范围，比如数据层、控制层、视图层等等
subject：
commit目的的简短描述，不超过50个字符
- Body（optional）
对本次commit的详细描述，可以分成多行
说明代码变动的动机，以及与以前行为的对比
- Footer（optional）
commit-message检查接入
- 安装commit-msg检查的第三方依赖
npm install --save-dev @commitlint/config-conventional @commitlint/cli
npm install husky --save-dev
- 激活Git-Hooks
npx husky install
- 新增hook逻辑
npx husky add .husky/commit-msg "npx --no -- commitlint --edit ${1}"
- 生成依赖配置项
# Configure commitlint to use conventional config
echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js
- 验证
输入一个不符合格式要求的commit-message，查看控制台打印内容
基于开源项目：github.com/conventiona…
ESLint检查
ESLint静态分析代码以快速发现问题，内置在大多数文本编辑器中
ESLint检查接入
ESLint官方接入流程已经整合为一条简单的初始化命令，很大程度降低了开发者的接入门槛
- 执行初始化命令
npm init @eslint/config
- 验证效果
prettier格式化代码
prettier是一个稳定的代码格式化工具，通过解析代码并使用自己的规则重新生成代码来强制实现一致的代码风格
prettier自动格式化接入
- 安装第三方依赖并生成空白配置文件
npm install --save-dev --save-exact prettier
echo {}> .prettierrc.json
- 安装husky和lint-staged并新增pre-commit钩子
npm install --save-dev husky lint-staged
npx husky install
npm set-script prepare "husky install"
npx husky add .husky/pre-commit "npx lint-staged"
pre-commit钩子扩展：prettier.io/docs/en/pre…
- package.json中新增配置
{
"lint-staged": {
"**/*": "prettier --write --ignore-unknown"
}
}
配置好后，之后每一次提交commit之前都会执行代码风格的自动化统一流程
讲到最后
谢谢大家，我们下节再见！！！
感谢各位看到这里，如果你觉得本节内容还不错的话，欢迎各位的点赞、收藏、评论，大家的支持是我做内容的最大动力
本文为作者原创，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接，否则保留追究法律责任的权利
