Installation

The project TSLint is dead since 2019 and was replaced by the typescript-eslint project. We will install these as dependencies to our project. This assumes that you already have started your typescript project from previous samples and installed the 'typescript' module globally

npm i -D @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint eslint-config-airbnb eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-import

create a '.eslintrc' file in the root of your project and enter the following

{
  "extends": [ "airbnb", "plugin:@typescript-eslint/recommended" ],
  "parser": "@typescript-eslint/parser",
  "plugins": [ "@typescript-eslint" ],
  "env": {
    "node": true,
    "amd": true,
    "jest": true
  },
  "settings": {
    "import/parsers": {
      "@typescript-eslint/parser": [ ".ts", ".tsx" ]
    },
    "import/resolver": {
      "node": {
        "extensions": [ ".js", ".jsx", ".ts", ".tsx" ],
        "moduleDirectory": [ "node_modules", "src/" ]
      }
    }
  },
  "rules": {
    "import/extensions": [
      "error",
      "ignorePackages",
      {
        "js": "never",
        "jsx": "never",
        "ts": "never",
        "tsx": "never"
      }
    ]
  }
}

create a '.eslintignore' file to prevent it from trying to lint test unnecessary folders

dist/
public/
node_modules/

now lets go to 'package.json' and add a new script

{
.
.
  "scripts": {
    "lint": "eslint . --ext .ts,.tsx",
    "lint-fix": "eslint . --ext .ts,.tsx --fix",
  },
.
.
}

go to your console and run the following

npm run lint

it will provide an error list similar to the following

D:\myapp\src\index.ts
   1:30  error    Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
   1:30  error    Missing semicolon                                semi
   2:24  error    Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
   2:24  error    Missing semicolon                                semi
   3:1   error    Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
   4:23  error    Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
   5:19  error    Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
   6:53  error    Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
   6:53  error    Missing semicolon                                semi
   7:37  error    Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
   8:1   error    Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
   9:45  error    Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  10:36  error    Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  11:1   error    Expected indentation of 2 spaces but found 4     indent
  11:42  error    Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  11:42  error    Missing semicolon                                semi
  12:4   error    Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  13:1   error    Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  14:25  error    Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  15:1   error    Expected indentation of 2 spaces but found 4     indent
  15:5   warning  Unexpected console statement                     no-console
  15:60  error    Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  16:1   error    Expected indentation of 2 spaces but found 4     indent
  16:5   warning  Unexpected console statement                     no-console
  16:59  error    Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  17:4   error    Newline required at end of file but not found    eol-last

✖ 26 problems (24 errors, 2 warnings)
  24 errors and 0 warnings potentially fixable with the `--fix` option.

lets fix this easily using our lint-fix script

npm run lint-fix

Visual Studio 2019 ESLINT

Setting up ESLint in VS2019 is easy. First go to Tools->Options

Locate the Javascript/Typescript section and click the Enable ESLint

If you use AirBnb eslint style, chances are your indentation uses 2 spaces. so set it in the Tabs section