React18 + Vite + TS + Eslint + Husky 从0到1搭建项目

项目创建

npm create vite@latest

 cd vite-react
  npm install
  npm run dev

执行完以上命令

目录结构

启动后界面展示

代码规范

添加Eslint

npm i eslint -D
npx eslint --init

执行 npx eslint --init 自动生成 .eslintrc.cjs, 而不是 自动生成 .eslintrc.js

解决：执行 npx eslint --init 自动生成 .eslintrc.cjs, 而不是 自动生成 .eslintrc.js
   1， 打开package.json 文件， 删掉  "type": "module"
   2， 删掉.eslintrc.cjs，重新执行命令

终端执行:

1, 查看项目中src目录下有哪些错误
pnpm exec eslint src/*    
２，修复项目中src目录下的错误
pnpm exec eslint src/* --fix

添加prettier

1，装依赖
npm i prettier eslint-config-prettier eslint-plugin-prettier -D
2，手动新建.prettierrc.js 文件
3，手动在文件里添加配置
module.exports = {
    tabWidth: 2,
    printWidth: 90,
    endOfLine: "auto",
    singleQuote: true,
    bracketSameLine: true,
}
4，在.eslintrc 中,extend中添加 "prettier" 解决 eslint 和 prettier 的冲突

git 规范

添加husky

1, 执行 npm i husky -D 安装husky
2， git init 初始化git
3,  npx husky install 启用 git hooks
4，加入 husky prepare 命令
     - 执行 npm pkg se