The Random Ramblings of a Software Developer

Linting consists of the usage of tools to analyze source-code, find and report errors, bugs, and bad coding style. This post is a guide to install and use the ESLint and TSLint linters with Visual Studio Code, while also using the extension Prettier to provide the stylistic opinions. We will also extend the Airbnb style guide in the ESLint setup. I will not lie to you, dear reader, the main objective of this post is to serve as future reference for myself when setting up this environment again.

This was tested with Node.js 11.4.0 and Yarn 1.13.0.

Let’s begin by installing all the global dependencies we will need:

yarn global add typescript eslint tslint prettier eslint-plugin-import eslint-plugin-prettier eslint-config-prettier eslint-config-airbnb-base tslint-config-prettier

Notice that eslint-plugin-import is necessary because it is a peer dependency of eslint-config-airbnb-base. If you need support for React, consider using eslint-config-airbnb instead. It has additional peer dependencies, check the dependency page for more information.

The .eslintrc.json file goes into the user’s home folder (Windows: %UserProfile%, Linux: ~), and is as follows:

{
  "extends": ["airbnb-base", "prettier"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": ["error"],
    "linebreak-style": 0
  }
}

Notice that we are extending the Airbnb style guide, and then overriding it with the Prettier config. This is to make sure that ESLint and Prettier won’t fight with each other for the correct style.

The tslint.json file also goes into the user’s home folder, and is as follows:

{
  "extends": ["tslint:recommended", "tslint-config-prettier"],
  "rules": {
    "typedef": [
      true,
      "call-signature",
      "arrow-call-signature",
      "parameter",
      "arrow-parameter",
      "property-declaration"
    ]
  }
}

Notice this file’s name is not preceded by a dot (it’s not a hidden file).

Like before, we have extended a configuration to tell TSLint not to fight against Prettier.

At this point, we are ready to install the Visual Studio Code extensions. The ones we use are Prettier (esbenp.prettier-vscode), ESLint (dbaeumer.vscode-eslint) and TSLint (eg2.tslint). After installing them, add the following lines to the Visual Studio Code’s user settings:

"eslint.packageManager": "yarn",
"tslint.packageManager": "yarn",
"javascript.format.enable": false,
"typescript.format.enable": false,
"editor.formatOnSave": true

The lines “javascript.format.enable” and “typescript.format.enable” are set to false to disable the built-in formatter, and allow us to use Prettier correctly.

And we are done! Reload Visual Studio Code if you haven’t already, and the linting should work. Happy coding!