- Initialize project:
npx create-react-app my-app --template typescript
- Add .eslintrc with the following settings (no need to install any packages, it comes along in the previous step)
{
"env": {
"browser": true,
"es6": true,
"jest": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:@typescript-eslint/recommended"
],
"plugins": ["react", "@typescript-eslint"],
"settings": {
"react": {
"pragma": "React",
"version": "detect"
}
},
"rules": {
"@typescript-eslint/explicit-function-return-type": 0,
"@typescript-eslint/explicit-module-boundary-types": 0,
"react/react-in-jsx-scope": 0
}
}
- Next, we need to get our linting script to parse *.tsx files, which are the TypeScript equivalent of React's JSX files. We can do that by altering our lint command in .package.json to the following:
{
// ...
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"lint": "eslint './src/**/*.{ts,tsx}'"
},
// ...
}