ES lint for Typescript in VS Code

Install following extensions:

• ESLint
• Prettier – Code formatter

Remove everything from TS lint in the node_modules and extensions you may have.

In your typescript project run following commands in the terminal:

npm i eslint --save-dev
npm i eslint-config-prettier
npm i @typescript-eslint/eslint-plugin --save-dev
npm i @typescript-eslint/parser" --save-dev
npx eslint --init                         (choose json as the file extension)

A new file named eslintrc.json is made.
Overwrite it and adjust it to your needs:

{
  "env": {
    "browser": true,
    "es2020": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier",
    "prettier/@typescript-eslint"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 2015,
    "sourceType": "module"
  },
  "plugins": ["@typescript-eslint"],
  "rules": {
    "@typescript-eslint/explicit-module-boundary-types": "off",
    "@typescript-eslint/no-empty-function": "off",
    "@typescript-eslint/explicit-function-return-type": [
      "off",
      { "allowExpressions": true }
    ],
    "arrow-body-style": "error",
    "brace-style": ["error", "1tbs"],
    "camelcase": "off",
    "complexity": [
      "error",
      {
        "max": 10
      }
    ],
    "constructor-super": "error",
    "curly": "error",
    "default-case": "error",
    "eol-last": "error",
    "eqeqeq": ["error", "smart"],
    "guard-for-in": "error",
    "id-blacklist": "off",
    "id-match": "off",
    "newline-before-return": "error",
    "newline-after-var": "error",
    "max-len": [
      "error",
      {
        "code": 170,
        "ignoreStrings": true
      }
    ],
    "max-lines": ["error", 2500],
    "new-parens": "error",
    "no-bitwise": "error",
    "no-caller": "error",
    "no-console": [
      "error",
      {
        "allow": [
          "log",
          "warn",
          "dir",
          "timeLog",
          "assert",
          "clear",
          "count",
          "countReset",
          "group",
          "groupEnd",
          "table",
          "debug",
          "dirxml",
          "error",
          "groupCollapsed",
          "Console",
          "profile",
          "profileEnd",
          "timeStamp",
          "context"
        ]
      }
    ],
    "no-debugger": "error",
    "no-duplicate-imports": "error",
    "no-empty": "off",
    "no-empty-function": [
      "error",
      { "allow": ["functions", "constructors", "methods"] }
    ],
    "no-eval": "error",
    "no-fallthrough": "error",
    "no-irregular-whitespace": "error",
    "no-multiple-empty-lines": "error",
    "no-new-wrappers": "error",
    "no-redeclare": "error",
    "no-restricted-imports": ["error", "rxjs/Rx"],
    "no-return-await": "error",
    "no-shadow": [
      "error",
      {
        "hoist": "all"
      }
    ],
    "no-throw-literal": "error",
    "no-trailing-spaces": "error",
    "no-undef-init": "error",
    "no-underscore-dangle": "off",
    "no-unused-labels": "error",
    "no-var": "error",
    "prefer-const": "error",
    "radix": "error",
    "capitalized-comments": [
      "error",
      "always",
      {
        "ignorePattern": "pragma|ignored",
        "ignoreInlineComments": false
      }
    ],
    "spaced-comment": [
      "error",
      "always",
      {
        "markers": ["/"]
      }
    ],
    "sort-imports": [
      "warn",
      {
        "ignoreCase": true,
        "ignoreDeclarationSort": true,
        "ignoreMemberSort": false,
        "memberSyntaxSortOrder": ["none", "all", "single", "multiple"],
        "allowSeparatedGroups": false
      }
    ],
    "sort-keys": [
      "warn",
      "asc",
      {
        "natural": true,
        "minKeys": 4
      }
    ],
    "sort-vars": ["warn", { "ignoreCase": true }],
    "vars-on-top": "warn",
    "quote-props": ["warn", "as-needed"]
  }
}

Some settings to adjust:

• – Search for editor.defaultFormatter and choose esbenp.pretter-vscode
• – Search for eslint.workingDirectories, in the settings.json file set it to “eslint.workingDirectories”: [{ “mode”: “auto” }]

Fix some weird VS code issue:

• Open a .ts file
• Open the command pallet (View > Command pallet)
• Take Format document with…
• Take the last option: Configure default formatter
• Take Prettier

Fixing stuff:

Open the settings.json file located in the .vscode folder and add following code

{
  "editor.codeActionsOnSave": {
    "source.fixAll": true,
    "source.organizeImports": true,
  }
}

Right click in a .ts file