Typescript with Eslint
文章目录

Typescript with Eslint

Firstly you may need to install eslint

1
npm install eslint

Then init and create a config fiel:

1
eslint --init

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';
// iState shows error that no-unused-vars

class CommentTree extends React.Component<iStates> {
...
}
1
2
3
"eslint:recommended",
"plugin:@typescript-eslint/eslint-recommended",
"plugin:@typescript-eslint/recommended"

Reference