How to setup eslint and prettier in an existing node and typescript project.
Tags: typescript, node, webdev, beginners
Published: 2022-10-06 07:23:20

## 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.
```ts
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
```js
npm init @eslint/config
```

Eslint will ask you few questions, such as

![how would you like to use Eslint question](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q9bkow02z7ygv0flicix.png)

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

---

![type of modules question](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r3cqk49ykh0heymkrcdz.png)

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

---

![framework used question](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q7esgb7b0n90cxuvzpyu.png)

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

---

![is ts question](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h8vajlp6obcqk0jgvajn.png)

Choose yes

---

![where does your project run question](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z9i6avsogvj92fs5xygm.png)

choose only node.

---

![style guide question](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/64d2zzx42wkbhznqhmbb.png)

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

---

![choose style guide question](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8t02wxdx91c5xxvjkhp1.png)

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

---

![config file format question](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9s5q05usyvb72htfctix.png)

Choose based on your preference. I prefer json

---

![install packages question](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pmo1mlhz2mkwk8grpwu9.png)

It will ask you to install some packages, click yes

---

![package manager question](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q21mprdeni19nph5u6jm.png)

Choose the package manager used in your project

---

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

#### .eslintrc
```json
{
    "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
```js
node_modules
tests
```

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

we need to install 3 more packages for this step

```js
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

```json
{
  "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

```json
"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 😀