Eslint, Typescript & VSCode

Intro

I found myself doing a project with deep, complex nesting of callback functions and wanted to flag the reuse of argument names, such as:

const x: any = [];
x.forEach((el: any) => {
  el.forEach((el: any) => {});
});

Since this is legit typescript syntax, you need to use a linter, such as ESLint, to indicate the problem in VSCode with the “no-shadow” rule.

I found it frustrating trying to get ESLint to work, but finally found a decent article summarizing the essential steps. This post is just a quicker summary of how to get VSCode to flag ESLint-ruled problems.

Summary

• Install the main ESLint extension on VSCode
• Create a local vscode settings file with the following entry:
  • "eslint.validate": ["typescript", "typescriptreact"]
• Install locally: npm i -D eslint typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin
• Create file .eslintrc.json in the root of your VSCode folder:

{
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "rules": {
    "no-shadow": [
      "error",
      {
        "builtinGlobals": false,
        "hoist": "functions",
        "allow": [],
        "ignoreOnInitialization": false
      }
    ]
  }
}

Voila!