Dev/Typescript
Source Edit History
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