Typescript with Eslint2019-11-15 23:02Dev, JavaScript, Typescript

Typescript with Eslint

Firstly you may need to install eslint

npm install eslint

Then init and create a config fiel:

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:

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

Unable to resolve path to module './serviceWorker'.eslint(import/no-unresolved)

You just need to add 1 more properties into .eslintrc.json configuration file:

{
  "settings": {
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"]
      }
    }
  },
  ...
}

JSX not allowed in files with extension '.tsx'

    "rules": {
        "react/jsx-filename-extension": [
            1,
            {
                "extensions": [
                    ".js",
                    ".tsx",
                    ".jsx"
                ]
            }
        ],
    },

Typescript interface shows unused

import {
  iStates
} from './Interfaces';
// iState shows error that no-unused-vars

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

Reference

Powered by Remix
|
Designed by szhshp
|
Copyright © szhshp 2022