Using ESLint with TypeScript (and the React Hooks Rule plugin)

TSLint currently is the standard for linting TypeScript. This will change however. ESLint will soon replace TSLint and TSLint will be Desprecated. As shown in the TypeScript roadmap and this Blog Post: https://eslint.org/blog/2019/01/future-typescript-eslint

We can already use ESLint with TypeScript and support for it will only get better, as all TypeScript rules will be brought to the typescript-eslint project. Using ESLint with TypeScript will also allow us to use ESLint rules, which aren’t availible for TSLint at all. (Like the react-hooks Lint rules released some hours ago, as of writting).

Adding ESLint to an existing TypeScript project

We can install all our dependencies with npm

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

Now we need to create a .eslintrc.json file in our project root folder and tell ESLint how to deal with TypeScript. By putting this 👇 in our .eslintrc.json file:

{
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "jsx": true,
    "useJSXTextNode": true
  },
  "extends": ["plugin:@typescript-eslint/recommended"],
  "plugins": ["@typescript-eslint"]
}

The first line tells eslint to use the TypeScript parser, and the parserOptions is here to tell the TypeScript parser that we want to use JSX syntax, you can remove that, if you don’t use React or something simular.
The extends just means that we want to use the recommended rules provided from the typescript plugin.
The @typescript-eslint plugin than actually includes the typescript specific rules. All rules can be seen here: https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/eslint-plugin#supported-rules

Using Prettier

When using prettier we can tell eslint that it does not need to care about formatting rules, as Prettier already deals with them, by installing prettier locally:

npm install prettier eslint-config-prettier --save-dev

We can then extend our eslint config from the prettier config, which basically just disabels all the rules, prettier handles for us. Change your eslintrc.json file to look something like that:

{
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "jsx": true,
    "useJSXTextNode": true
  },
  "extends": [
    "plugin:@typescript-eslint/recommended",
    "prettier",
    "prettier/@typescript-eslint"
  ],
  "plugins": ["@typescript-eslint"]
}

Telling VSCode that ESLint checks our TypeScript

There is a awesome Extention for VSCode to integrate ESLint into our editor. Its called ESLint unsurprisingly and is published by Dirk Baeumer.

After installing the extension, we need to change some settings of VSCode under: File > Preferences > Settings . Here we want to go to the JSON view of our settings in the top right corner there is a Button with {} on it.
Here we need to add this config 👇:

"eslint.validate": [
  "javascript",
  "javascriptreact",
  {
    "language": "typescript",
    "autoFix": true
  },
  {
    "language": "typescriptreact",
    "autoFix": true
  }
]

Thats it 👍 unless you want to add the React Hooks rules to your esconfig.

Adding the React Hooks rules

Install the plugin:

npm install eslint-plugin-react-hooks --save-dev

And add it to the .eslintrc.json file:

{
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "jsx": true,
    "useJSXTextNode": true
  },
  "extends": [
    "plugin:@typescript-eslint/recommended",
    "prettier",
    "prettier/@typescript-eslint"
  ],
  "plugins": ["@typescript-eslint", "react-hooks"]
  "rules": {
    "@typescript-eslint/explicit-function-return-type": "off",
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn"
  }
}

The new stuff is bold.

Now thats it. For real. 🌈