How to check Typescript Code with ESLint in IntelliJ or Webstorm

In your package.json add this example config:

 "eslintConfig": {
    "parserOptions": {
      "parser": "babel-eslint",
      "sourceType": "module"
    },
    "env": {
      "browser": true,
      "es6": true
    },
    "globals": {
      "Vue": true
    },
    "parser": "@typescript-eslint/parser",
    "plugins": [
      "@typescript-eslint"
    ],
    "extends": [
      "plugin:@typescript-eslint/recommended"
    ],
    "rules": {
      "quotes": [
        "error",
        "double",
        {
          "avoidEscape": true
        }
      ],
      "comma-dangle": [
        "error",
        {
          "arrays": "ignore",
          "objects": "always-multiline",
          "imports": "never",
          "exports": "never",
          "functions": "ignore"
        }
      ],
      "arrow-parens": 0,
      "no-tabs": 0,
      "indent": [
        "error",
        "tab",
        {
          "SwitchCase": 1
        }
      ],
      "no-console": 1,
      "generator-star-spacing": 0
    }
  }

In your IDE terminal, execute:

npm install @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev

In IntelliJ settings, add:

From now on, when you open your .ts or .tsx files, the ESLint will detect the errors.

You can open the context menu then, by clicking the right mouse tab and click on „Fix ESlint Problems“.

IntelliJ will then automatically fix the problems.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.