Project Patterns and Tools - ESLint

The next tool that help us to go further and keep our code well formatted are ESLint and today we are going to configure this tool to work with TypeScript.

Maybe, ESLint is the most important tool of those three tools (eslint, editorconfig and prettier) to keep our code "under control".

For example, semicolon is not required at the end of the line for JavaScript, also we can use quotation marks or double quotes, it depends on your taste.

With ESLint we can define what kind of format our team need to follow, helping to keep our code readable and avoiding conflicts when we are trying to merge those code.

Installation

First things first, so before we start, we need to install ESLint extension for VSCode.

eslint

We have to set up the option codeActionOnSave on VSCode if you want to format your files when you save the code, you will need to add the code below in the configuration.

Open VSCode's settings.json and add the configuration below:

{
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
      }
}

Then, we can install ESLint as a development dependency for our NodeJS project.

yarn add eslint -D

After the installation, we have to initialize eslint to add the configuration for our project.

yarn eslint --init

Now, we need to select the set up for our project, so I'm gonna select the following configuration as a example (you can select the options you want for your own project):

Steps to configure ESLint

1. • How would you like to use ESLint? > To check syntax, find problems and enforce code style
2. • What type of modules does your project use? > JavaScript modules (import/export)
3. • Which framework does your project use? > None of these (because we are configuring the backend project)
4. • Does your project use TypeScript? > Yes
5. • Where does your code run? (Use the space bar to unselect Browser and select Node) > Node
6. • How would you like to define a style for your project? > Use a popular style guide
7. • Which style guide do you want to follow? > Airbnb
8. • What format do you want your config file to be in? > JSON
9. • Would you like to install them now with npm? > No (In our case, because I'm using yarn, I will need to answer No and then, install the dependencies manually).

Now, we need to run the command below:

yarn add @typescript-eslint/eslint-plugin@latest eslint-config-airbnb-base@latest eslint@^5.16.0 || ^6.8.0 || ^7.2.0 eslint-plugin-import@^2.21.2 @typescript-eslint/parser@latest -D

Don't forget to create the file .eslintignore and type the configuration below to ignore linting for some files that is not needed.

/*.js
node_modules
dist

Finally, we are going to configure the file .eslintrc.json created when we configured the ESLint initialization.

We need to add the line below inside of "extends" option:

"plugin:@typescript-eslint/recommended"

So, now we have to install one dependency to enable the Node's ability to understand "import" TypeScript.

For that, type the command below and hit enter:

yarn add eslint-import-resolver-typescript -D

and then, add the configuration below for .eslintrc.json file

"settings": {
    "import/resolver": {
      "typescript": {}
    }
  }

Inside "rules", add the configuration below to enable "import" from files type "tsx" without the extensions.

"import/extensions": [
            "error",
            "ignorePackages",
            {
              "ts": "never"
            }
          ]

Our file should be like the file below:

{
    "env": {
        "es2020": true,
        "node": true
    },
    "extends": [
        "airbnb-base",
        "plugin:@typescript-eslint/recommended"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "plugins": [
        "@typescript-eslint"
    ],
    "rules": {
        "import/extensions": [
            "error",
            "ignorePackages",
            {
              "ts": "never"
            }
          ]
    },
    "settings": {
        "import/resolver": {
          "typescript": {}
        }
      }
}

It's done!

To finish and apply all changes, we need to close and reopen VSCode at the root folder for the project, so we can verify if all changes is working as expected.

If you want, you can try to write a wrong code and ESLint should spot the error.

In the next post, I'm gonna configure Prettier for VSCode with ESLint.

That's it, folks!

Thanks for reading and I hope it's been useful for you. Please do comment your questions and suggestions.