|
61 | 61 | ├── global.d.ts # 글로벌 타입 선언 |
62 | 62 | ├── vite-env.d.ts # Vite 환경 타입 선언 |
63 | 63 | └── ... |
| 64 | + |
| 65 | + |
| 66 | +# React + TypeScript + Vite |
| 67 | + |
| 68 | +This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. |
| 69 | + |
| 70 | +Currently, two official plugins are available: |
| 71 | + |
| 72 | +- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh |
| 73 | +- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh |
| 74 | + |
| 75 | +## Expanding the ESLint configuration |
| 76 | + |
| 77 | +If you are developing a production application, we recommend updating the configuration to enable type aware lint rules: |
| 78 | + |
| 79 | +- Configure the top-level `parserOptions` property like this: |
| 80 | + |
| 81 | +```js |
| 82 | +export default tseslint.config({ |
| 83 | + languageOptions: { |
| 84 | + // other options... |
| 85 | + parserOptions: { |
| 86 | + project: ['./tsconfig.node.json', './tsconfig.app.json'], |
| 87 | + tsconfigRootDir: import.meta.dirname, |
| 88 | + }, |
| 89 | + }, |
| 90 | +}) |
| 91 | +``` |
| 92 | + |
| 93 | +- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked` |
| 94 | +- Optionally add `...tseslint.configs.stylisticTypeChecked` |
| 95 | +- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config: |
| 96 | + |
| 97 | +```js |
| 98 | +// eslint.config.js |
| 99 | +import react from 'eslint-plugin-react' |
| 100 | +
|
| 101 | +export default tseslint.config({ |
| 102 | + // Set the react version |
| 103 | + settings: { react: { version: '18.3' } }, |
| 104 | + plugins: { |
| 105 | + // Add the react plugin |
| 106 | + react, |
| 107 | + }, |
| 108 | + rules: { |
| 109 | + // other rules... |
| 110 | + // Enable its recommended rules |
| 111 | + ...react.configs.recommended.rules, |
| 112 | + ...react.configs['jsx-runtime'].rules, |
| 113 | + }, |
| 114 | +}) |
| 115 | +``` |
0 commit comments