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,
},
})
warthog-extension-wallet
├─ .gitignore
├─ README.md
├─ eslint.config.js
├─ index.html
├─ package-lock.json
├─ package.json
├─ public
│ ├─ icon-128.png
│ ├─ icon-48.png
│ ├─ logo.svg
│ ├─ manifest.json
│ └─ vite.svg
├─ src
│ ├─ App.css
│ ├─ App.tsx
│ ├─ api
│ │ └─ index.tsx
│ ├─ assets
│ │ └─ react.svg
│ ├─ background.ts
│ ├─ components
│ ├─ main.tsx
│ ├─ pages
│ │ ├─ Popup
│ │ │ ├─ Popup.css
│ │ │ ├─ Popup.tsx
│ │ │ ├─ index.html
│ │ │ └─ index.tsx
│ │ └─ Welcome
│ │ ├─ Create
│ │ │ ├─ Create.css
│ │ │ └─ Create.tsx
│ │ ├─ Import
│ │ ├─ Welcome.css
│ │ ├─ Welcome.tsx
│ │ ├─ index.html
│ │ └─ index.tsx
│ ├─ services
│ │ └─ walletService.ts
│ └─ vite-env.d.ts
├─ tsconfig.app.json
├─ tsconfig.app.tsbuildinfo
├─ tsconfig.json
├─ tsconfig.node.json
├─ tsconfig.node.tsbuildinfo
└─ vite.config.ts