背景:没有好好记录过项目搭建的流程,现在准备记录一下。 这里是基于eslintv9 主要从几方面开始记录,这个项目将作为以后得一个react+tsx的项目模版。
一、react项目搭建总结
1、创建vite项目
react-ts 是vite提供的 react + typesctrpt的模板 假如你要自己选末班 你就先执行下面这段命令
js
pnpm create vite@latest my-react-ts-app
直接创建react-ts模板的命令
js
pnpm create vite@latest my-react-ts-app --template react-ts
2、配置工程化(antfu)
1.安装依赖
eslint这里我用的是v9,规则太多,这里我们一键使用antfu的配置,
js
pnpm i eslint @antfu/eslint-config --save-dev
2.在根目录创建eslint.config.js
基础配置如下:
js
import antfu from '@antfu/eslint-config'
export default antfu({})
加入react hooks的校验 安装依赖react的插件依赖
sql
# 确保 React 类型依赖正确(供 ESLint 解析 React 语法)
pnpm i @types/react @types/react-dom --save-dev
pnpm i eslint-plugin-react-hooks --save-dev
生效配置:
js
import antfu from '@antfu/eslint-config'
import reactHooks from 'eslint-plugin-react-hooks'
export default antfu({
type: 'react',
plugins: {
'react-hooks': reactHooks,
},
rules: {
// 强制启用 Hooks 核心规则
'react-hooks/rules-of-hooks': 'error', // 检查 Hooks 调用位置
'react-hooks/exhaustive-deps': 'error', // 检查依赖项完整性
},
})
3.配置package.json脚本
js
"scripts": {
"lint": "eslint .", // 检查所有文件
"lint:fix": "eslint . --fix" // 自动修复可修复的问题
}
3、根目录创建prettier.config.js
代码块自己任意发挥一下,还没有完全完善
js
export default {
semi: false, // 不使用分号
singleQuote: true, // 使用单引号
arrowParens: 'avoid', // 单参数箭头函数省略括号
jsxBracketSameLine: false, // 强制闭合括号换行
printWidth: 120,
bracketSpacing: true,
endOfLine: 'auto', // 换行符自动
tabWidth: 2, // 缩进
plugins: [
'prettier-plugin-tailwindcss',
],
}
5、.vscode文件配置
实现保存自动格式化
js
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit"
} // 保存时自动修复eslint错误
}
6、遇到的问题:
1、json文件自动保存没有被格式化 要先设置一下默认的格式化配置
