Typescript with Eslint
Firstly you may need to install eslint
Then init and create a config fiel:
And choose the style you want, and then it will automatically install all necessary dependencies. For example for Airbnb
Standard we may need to install:
1 2 3 4 5 6 7 8 eslint-plugin-react@^7.14.3 @typescript-eslint/eslint-plugin@latest eslint-config-airbnb@latest eslint@^5.16.0||^6.1.0 eslint-plugin-import@^2.18.2 eslint-plugin-jsx-a11y@^6.2.3 eslint-plugin-react-hooks@^1.7.0 @typescript-eslint/parser@latest
Make sure all packages installed, then you can install eslint plugin/extension from your IDE, the configured eslint should work now.
Troubleshooting
Unable to resolve path for .tsx
1 Unable to resolve path to module './serviceWorker'.eslint(import/no-unresolved)
You just need to add 1 more properties into .eslintrc.json
configuration file:
1 2 3 4 5 6 7 8 9 10 { "settings" : { "import/resolver" : { "node" : { "extensions" : [".js" , ".jsx" , ".ts" , ".tsx" ] } } }, ... }
JSX not allowed in files with extension ‘.tsx’
1 2 3 4 5 6 7 8 9 10 11 12 "rules": { "react/jsx-filename-extension": [ 1, { "extensions" : [ ".js" , ".tsx" , ".jsx" ] } ], },
Typescript interface shows unused
1 2 3 4 5 6 7 8 import { iStates } from './Interfaces' ; class CommentTree extends React .Component <iStates > {... }
1 2 3 4 "eslint:recommended", "plugin:@typescript-eslint/eslint-recommended", "plugin:@typescript-eslint/recommended"
Reference