Setup Airbnb config for the backend with Typescript + Prettier

It’s not the first (even fifth) article about such type of configuration, but when we found that after configuration according to instruction, rules are not applied, Dmitriy Yefimchuk spent time to check bunch of stack overflow recommendations, official documentation, and articles to finally find full working instructions. We wanted to share it with you. Hope you will find it as useful as we are

1) Project setup

• Install Typescript:

yarn add typescript --dev
npm install --save-dev typescript

2) ESLint configuration
Install ESLint, its Typescript plugin, and the related parser:

On the latest version of the ESLint may behave incorrectly, so we advise you to install the version of lint @8.22.0

Yarn: yarn add eslint@8.22.0 @typescript-eslint/parser @typescript-eslint/eslint-plugin --dev
Npm: npm install --save-dev eslint@8.22.0 @typescript-eslint/parser @typescript-eslint/eslint-plugin

Add a basic ESLint for Typescript configuration in a new file .eslintrc.js:
Our default export contains all of our ESLint rules, including ECMAScript 6+. It requires eslint and eslint-plugin-import.
npm i eslint-plugin-import

For install eslint-config-airbnb-base  we need the correct versions of each package, which are listed with the command:
npm info "eslint-config-airbnb-base@latest" peerDependencies

• Then install:

Npm: npm install --save-dev eslint-config-airbnb-base eslint-config-airbnb-typescript
Yarn: yarn add --dev eslint-config-airbnb-base eslint-config-airbnb-typescript

Now config file should be like that:

module.exports = {
  parser: "@typescript-eslint/parser",
  plugins: ["@typescript-eslint", "prettier"],
  overrides: [
    {
      files: ["*.ts", "*.tsx"],
      extends: [
        "airbnb-base",
        "airbnb-typescript/base",
        "plugin:@typescript-eslint/eslint-recommended",
        "plugin:@typescript-eslint/recommended",
      ],
      parserOptions: {
        parser: "@typescript-eslint/parser",
        project: "tsconfig.json",
        sourceType: "module",
      },
    },
  ],
};

• Rules

You can set your own rules or change existing ones. ESLint comes with a large number of built-in rules and you can add more rules through plugins. You can modify which rules your project uses either using configuration comments or configuration files. To change a rule setting, you must set the rule ID equal to one of these values:

• "off" or 0 - turn the rule off
• "warn" or 1 - turn the rule on as a warning (doesn’t affect the exit code)
• "error" or 2 - turn the rule on as an error (exit code is 1 when triggered

here can find all the rules

An example of an object with custom rules .eslintrc.js

{
...
// some config
rules: {
    // for example, the rule below mean that this rule requires an empty line
    // before return statements to increase code clarity, except when the 
    // return is alone inside a statement group (such as an if statement).
    "newline-before-return": "error",
    "@typescript-eslint/no-var-requires": 0,
    "import/no-import-module-exports": "off",
  },
}

3) Prettier configuration

• Install Prettier:

Yarn: yarn add prettier eslint-config-prettier --dev
Npm: npm install --save-dev eslint-config-prettier

eslint-config-prettier ensures that there are no conflicts between ESLint and Prettier by disabling ESLint rules that might conflict.

Now we need to update ESLint configuration so the "extends" value looks like this:

extends: [
  "airbnb-base",
  "airbnb-typescript/base",
  "prettier", + 
  "plugin:@typescript-eslint/eslint-recommended",
  "plugin:@typescript-eslint/recommended",
],

4) Setup development environment

• Prettier

To work with Prettier in Visual Studio Code, you’ll need to install the extension. To do this, search for Prettier - Code Formatter in the extension panel of VS Code. Can read more here.

To use prettier in WebStorm you need go to | File > Settings > Languages & Frameworks > JavaScript > Prettier, and activate switch On save

• ESLint

In WebStorm enable running eslint --fix on save for the current project, go to Preferences > Settings > Languages and Frameworks > JavaScript > Code Quality Tools > ESLint and tick the Run eslint --fix on save checkbox. By default, WebStorm will run ESLint to autofix .js, .ts, .jsx, .tsx, .html, and .vue files.

In VSCode Open up settings : Code > Preferences > Settings.
It’ll open the fancy settings editor, but we need the raw JSON settings file instead.

Click that tiny icon in the top-right, that looks like a piece of paper with a little arrow (check image above), and activate Auto save dropdown
then add these 4 new lines inside the top-level settings object:

{
  // ...
  "eslint.format.enable": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}