前端工程化小记

1.引言

工作中，我们是否经常遇到以下情况：

• 我们是否发现接手其他同事的代码非常痛苦，比如：缩进，换行等等代码风格这些一度让人浑身难受
• 某个同事提了经常提语法报错的代码，语法报错只能用肉眼一个个review代码，完全没有提示
• 同事每个人写的commit风格都不一样，也有偷懒的，一个单词搞定的，但是也不描述本次更改是属于什么范畴？比如：是加功能？是代码优化？还是修复bug？还是修改webpack配置？还是修改工具链等等
• 如果是monorepo的仓库，里面有很多项目，commit一顿乱写，完全不管改的哪个项目，是不是很崩溃？

关于代码语法检查、代码格式化、commit注释规范、代码编译等等这些工作量繁杂且巨大的苦力活，除非你不想把人当马用，那还是交给机器去做，是吗？

前端领域早已不是以前的纯js、jquery 时代，模块化、工程化也成为了前端领域的追求，这样才能保证前端程序的可读性，可维护性，健壮性等等

2.背景

前端工程化已经发展了有些年月了，大量提高效率的包如雨后春笋般涌出。所以作为小前端的我也忍不住去探索一番，毕竟谁也不想疯狂加班，被当作马使，也想下早班开启简单开心的生活

本文旨在记录探索前端基本工程化的实践过程，方便自己以后翻阅，请轻喷(ps: 这篇文章聚焦代码检查，代码美化，commit规范，其中有借助chatgpt)

项目基本技术选型为：react + ts，所以将以此为基础展开前端工程化基本配置

3.Git钩子：husky

husky 是一个用于在 Git 钩子中运行命令的工具，它能够在代码提交或推送等特定事件中自动触发指定的命令。通过 husky，你可以在代码提交前、提交后、推送前等场景下运行脚本，以进行代码风格检查、单元测试、构建等操作

安装如下：

1. 下载husky的npm包
2. 初始化husky
3. 配置npm install时自动初始化husky

用快捷命令完成上面的安装步骤

# npm
npx husky-init && npm install

# yarn
yarn dlx husky-init --yarn2 && yarn

#pnpm
pnpm dlx husky-init && pnpm install

4.文件过滤工具：lint-staged

lint-staged是一个用于在 git 暂存文件上运行指定命令的工具。它可以帮助你在提交代码前，只对即将提交的文件进行代码风格检查、