How to setup eslint and prettier in an existing node and typescript project.

What and Why

Different Developers have different style and way of writing code .

Example
In typescript/javascript we have 2 ways for accessing a property in an object, so some developer may prefer dot notation and some may prefer bracket notation.

let x = {a: 1}
console.log(x.a)
console.log(x['a'])

Similarly some developers prefer single quotes for strings while others might prefer double quotes. This can be bad because when you look at code written by 2 different developers in the same project, it looks odd and not so good.

So to solve these kind of problems and maintain a standard style, formatting and to catch problematic patterns of code, we use a tool called Eslint.

This tool can be used to impose some rules like strings should be only double quotes, dot-notation must be used instead of bracket notation for accessing a property in an object and formatting rules.

Prettier

Prettier is a very good tool used for formatting, Most developers prefer prettier because the built in formatting provided by Eslint is not very good.

So, now that we know why these tools are used, let's see how to add Eslint and prettier to an existing node typescript project

Run the following command in the terminal at the root of your project

npm init @eslint/config

Eslint will ask you few questions, such as

we want to use ESLint to find problems, syntax and style so choose the 3rd option and click enter.

Choose this option according to the type of modules you are using in your project.

Choose None, since we have a node with typescript project.

Choose yes

choose only node.

We could answer few questions and setup a custom style, but we are better off using a standard and popular style guide. so choose Use a popular style guide and click enter

Checkout the github repos of these style guides and choose one you like. I prefer standard-with-typescript

Choose based on your preference. I prefer json

It will ask you to install some packages, click yes

Choose the package manager used in your project

When the packages are downloaded we get a .eslintrc config file like this

.eslintrc

{
    "env": {
        "commonjs": true,
        "es2021": true,
        "node": true
    },
    "extends": "standard-with-typescript",
    "overrides": [
    ],
    "parserOptions": {
        "ecmaVersion": "latest"
    },
    "rules": {
    }
}

To ignore the files and folders we dont want to lint create a .eslintignore file at the root level (package.json level) of your project and specify the files and folders which needs to be ignored by ESLint

.eslintignore

node_modules
tests

Now let's add prettier (code formatting tool).

we need to install 3 more packages for this step

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

We need to edit the .eslintrc config file to tell ESLint that we are going to use prettier for formatting and the config file at the end should look like this

{
  "env": {
    "commonjs": true,
    "es2021": true,
    "node": true
  },
  "parser": "@typescript-eslint/parser",
  "extends": ["standard-with-typescript", "prettier"],
  "plugins": ["prettier"],
  "overrides": [],
  "parserOptions": {
    "ecmaVersion": "latest",
    "project": "./tsconfig.json"
  },
  "rules": {
    "prettier/prettier": ["error"]
  }
}

note: make sure you specify the path to .tsconfig file correctly in the parserOptions.

The final step is to add the following scripts in the package.json file

"lint": "eslint . --config .eslintrc.json",
"lint:fix": "eslint . --fix --config .eslintrc.json"

run the lint command to see the errors and lint:fix to fix the automatically fixable errors. Some errors might not be fixable automatically with the lint:fix command and you have to fix these manually.

Doing this will ensure that the code is more readable, organized and avoiding problematic code patterns.

Thanks for reading 😀