yarn upgrade eslint@latest
yarn add --dev eslint-plugin-react-hooks @typescript-eslint/parser eslint-plugin-jsx-a11y eslint-plugin-import
{
"env": {
"browser": true,
"es2021": true
},
"extends": [
"plugin:@typescript-eslint/recommended",
"prettier",
"plugin:react/recommended",
"airbnb"
],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 12,
"sourceType": "module"
},
"plugins": ["react-hooks", "prettier", "react", "@typescript-eslint"],
"rules": {
"no-use-before-define": "off",
"@typescript-eslint/no-use-before-define": ["error"],
"comma-dangle": ["error", "only-multiline"],
"prettier/prettier": "error",
"react-hooks/rules-of-hooks": "error",
"react-hooks/exhaustive-deps": "warn",
"react/jsx-filename-extension": [1, { "extensions": [".tsx"] }],
"import/prefer-default-export": "off",
"import/extensions": [
"error",
"ignorePackages",
{
"ts": "never",
"tsx": "never"
}
]
},
"settings": {
"import/resolver": {
"typescript": {}
}
}
}
After making these changes, the app's ts files will have to be modified to pass the eslint rules
// main.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
// App.tsx
import React from 'react';
const App: React.FC = () => <div className="App">Vite - React Template</div>;
export default App;