![image](https://private-user-images.githubusercontent.com/1379694/385077955-301901f7-3b73-4226-b915-83a969c2dffe.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzkyODczMTEsIm5iZiI6MTczOTI4NzAxMSwicGF0aCI6Ii8xMzc5Njk0LzM4NTA3Nzk1NS0zMDE5MDFmNy0zYjczLTQyMjYtYjkxNS04M2E5NjljMmRmZmUucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI1MDIxMSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNTAyMTFUMTUxNjUxWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9NjVlOTkxNTcxZGIzMzI4NjQ0YjU2YzRkZGM2ZjA0NWQxNTQ0MDRiOWQ0MTYzMDY4YmE4MzJmOGZlOGUyODlkYSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ.oWNmd3E5Z1UNGUdR_jPPZqXb7ZmbE4yusxw6hadH0mw)
![image](https://private-user-images.githubusercontent.com/1379694/385078065-ad75d0c0-d679-4a1d-9dd6-55cc8865a638.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzkyODczMTEsIm5iZiI6MTczOTI4NzAxMSwicGF0aCI6Ii8xMzc5Njk0LzM4NTA3ODA2NS1hZDc1ZDBjMC1kNjc5LTRhMWQtOWRkNi01NWNjODg2NWE2MzgucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI1MDIxMSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNTAyMTFUMTUxNjUxWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9Y2UzNmFjYjJjMGE3NjczMDg4YzI3Y2Q4NDE0ODIwNTk2M2ZmZjBlYWQ3MjM5MzgxMjQ5Yzk3MTIzYTkzYjYxMCZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ.EO87sxt51AkvbBcToyc3JOND7U9SENLxNUy_cQBwEpE)
![image](https://private-user-images.githubusercontent.com/1379694/385078167-b10130f0-6820-4431-9acb-838f55236c69.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzkyODczMTEsIm5iZiI6MTczOTI4NzAxMSwicGF0aCI6Ii8xMzc5Njk0LzM4NTA3ODE2Ny1iMTAxMzBmMC02ODIwLTQ0MzEtOWFjYi04MzhmNTUyMzZjNjkucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI1MDIxMSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNTAyMTFUMTUxNjUxWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9OTdmOGRmYjg3YjA1YjYzYzY5YzBjMDBmNDZlMTZiOGViOThlYTcyNjA5YmVjM2I4YjBmZTA3MmI5MzE1YmZkMiZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ.Bjk_ZWeWCz99YfIDskQvK-9cPmOi2_MP43iJoGzqw0A)
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- @vitejs/plugin-react uses Babel for Fast Refresh
- @vitejs/plugin-react-swc uses SWC for Fast Refresh
If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
- Configure the top-level
parserOptions
property like this:
export default tseslint.config({
languageOptions: {
// other options...
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: import.meta.dirname,
},
},
})
- Replace
tseslint.configs.recommended
totseslint.configs.recommendedTypeChecked
ortseslint.configs.strictTypeChecked
- Optionally add
...tseslint.configs.stylisticTypeChecked
- Install eslint-plugin-react and update the config:
// eslint.config.js
import react from 'eslint-plugin-react'
export default tseslint.config({
// Set the react version
settings: { react: { version: '18.3' } },
plugins: {
// Add the react plugin
react,
},
rules: {
// other rules...
// Enable its recommended rules
...react.configs.recommended.rules,
...react.configs['jsx-runtime'].rules,
},
})