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

原创

已于 2023-04-14 18:04:19 修改 · 587 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#git #npm #javascript

于 2023-04-12 18:29:47 首次发布

该文介绍了如何在Vite项目中设置代码规范，包括使用npm创建项目，集成ESLint和Prettier进行代码风格检查和自动格式化，通过husky和lint-staged在git提交前进行代码校验，以及添加stylelint来规范CSS代码。

项目创建

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

最低0.47元/天解锁文章