React + TypeScript + Vite

Questo modello fornisce una configurazione minima per far funzionare React in Vite con HMR e alcune regole ESLint.

Attualmente sono disponibili due plugin ufficiali:

@vitejs/plugin-react utilizza Babel per il Fast Refresh
@vitejs/plugin-react-swc utilizza SWC per il Fast Refresh

Estendere la configurazione ESLint

Se stai sviluppando un'applicazione di produzione, ti consigliamo di aggiornare la configurazione per abilitare regole di lint che tengano conto dei tipi:

export default tseslint.config([
  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...
    },
  },
])

Puoi anche installare eslint-plugin-react-x ed eslint-plugin-react-dom per regole di lint specifiche di React:

// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'

export default tseslint.config([
  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...
    },
  },
])

cve-2023-28771-demo

Più Popolari