使用说明
React + TypeScript + Vite
这个模板提供了一个最小化的设置，以便在Vite中使用热更新（HMR）和一些ESLint规则来运行React。
目前，有两款官方插件可供使用：
- @vitejs/plugin-react（Vite 的 React 插件） 使用 巴别 （或 oxc 当用于……时 `rolldown-vite` 翻译成中文是“轻量级 Vite 构建工具（或：基于 Vite 的轻量级打包工具）”。不过，具体翻译可能根据上下文有所调整，因为“rolldown”本身是一个假设的或特定项目/工具名，直接翻译可能不够准确，需要结合其实际功能和用途来确定最贴切的中文表述。但在这里，为了给出一个大致的翻译方向，我选择了“轻量级 Vite 构建工具”作为示例) 用于快速刷新
- @vitejs/plugin-react-swc 翻译为中文是：“Vite 针对 React 的 SWC 插件” 使用 SWC（根据上下文，可翻译为“软件开发公司”或具体指代的某个软件开发相关的机构/项目名称，若无具体上下文，则保持为“SWC”或译为“软件开发中心”等通用表述） 用于快速刷新
React 编译器
此模板未启用React编译器，因为其会对开发和构建性能产生影响。如需添加，请参阅 这份文件.
扩展 ESLint 配置
如果您正在开发一个生产级应用程序，我们建议更新配置以启用类型感知的lint规则：
export default defineConfig([
globalIgnores(['dist']),
{
files: ['**/*.{ts,tsx}'],
extends: [
// Other configs...
// Remove tseslint.configs.recommended and replace with this
tseslint.configs.recommendedTypeChecked,
// Alternatively, use this for stricter rules
tseslint.configs.strictTypeChecked,
// Optionally, add this for stylistic rules
tseslint.configs.stylisticTypeChecked,
// Other configs...
],
languageOptions: {
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: import.meta.dirname,
},
// other options...
},
},
])
你也可以安装 eslint-plugin-react-x 翻译为中文是：“React 的 ESLint 插件 x”。不过，这里的“x”可能代表一个特定的版本、分支或自定义名称，所以在实际翻译时，如果“x”有具体含义，应替换为相应的中文表述。如果没有具体含义，保持“x”不变也是可以的。因此，一个通用的翻译就是“React 的 ESLint 插件 x” 并且 eslint-plugin-react-dom 翻译为中文是：“用于 React DOM 的 ESLint 插件” 针对 React 特定的代码规范规则：
// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'
export default defineConfig([
globalIgnores(['dist']),
{
files: ['**/*.{ts,tsx}'],
extends: [
// Other configs...
// Enable lint rules for React
reactX.configs['recommended-typescript'],
// Enable lint rules for React DOM
reactDom.configs.recommended,
],
languageOptions: {
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: import.meta.dirname,
},
// other options...
},
},
])
