article
README
🚀 React + TypeScript + Vite
本模板为使用 Vite 快速开启 React 项目提供了最小化配置,具备 HMR(热模块替换)功能,并包含了一些 ESLint 规则。
目前有两个官方插件可供使用:
- @vitejs/plugin-react:借助 Babel 实现快速刷新。
- @vitejs/plugin-react-swc:利用 SWC 实现快速刷新。
🚀 快速开始
此模板提供了使用 Vite 快速入门 React 的最小化设置,带有 HMR(热模块替换)和一些 ESLint 规则。你可以根据需求选用官方插件实现快速刷新。
✨ 主要特性
- 提供最小化配置,可快速开启 React 项目。
- 支持 HMR(热模块替换),提升开发效率。
- 包含 ESLint 规则,保证代码质量。
- 有两个官方插件可供选择,实现快速刷新。
📚 详细文档
扩展 ESLint 配置
如果你正在开发一个生产应用,我们建议你更新配置以启用类型感知的 lint 规则:
1. 在顶级 parserOptions 属性中进行如下设置
export default tseslint.config({
languageOptions: {
// 其他选项...
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: import.meta.dirname,
},
},
})
2. 替换配置项
将 tslint.configs.recommended 替换为 tslint.configs.recommendedTypeChecked 或 tslint.configs.strictTypeChecked。
3. 可选配置
可选地添加 ...tslint.configs.stylisticTypeChecked。
4. 安装并更新配置
安装 eslint-plugin-react 并更新配置:
// eslint.config.js
import react from 'eslint-plugin-react'
export default tseslint.config({
// 设置React版本
settings: { react: { version: '18.3' } },
plugins: {
// 添加React插件
react,
},
rules: {
// 其他规则...
// 启用它的推荐规则
...react.configs.recommended.rules,
...react.configs['jsx-runtime'].rules,
},
})
微信扫一扫