Using Eslint & Prettier in Javascript
Tags: javascript, prettier, eslint, cleancode
Published: 2020-12-28 10:16:39

One of the saviours for JS developers is how best we can utilize the tools to minimize our errors in development time, starting from common issues that are caused by our muscle memory, to having unique coding standard across a team of developers, we will need to follow this to make our lives easier.

We are in excellent hands of some of the amazing toolchains that make JS development easier than ever. The common solution we use for this include   [Eslint](https://eslint.org/)  & [Prettier](https://prettier.io/).

You can add them to your existing project using

```
npm install eslint prettier --save-dev
```

or  if you use yarn

```
yarn add eslint prettier --dev
```

# Prettier
Code Formatter that can integrate almost all popular editors out there, supporting multiple languages as well. Automate Prettier on save and be done with it.

## Configuring Prettier
Once you have installed prettier, they give plenty of options to help you with how you configure the code style. You can create `.prettierrc` file in the root of your project.
The common settings we use in our team is 

```
{
  "singleQuote": true, // Replace double quotes with single quote
  "arrowParens": "always", //Example: `(x) => x`
  "bracketSpacing": true, //Print spaces between brackets.
}
```

## Formatting on Save with VS Code
In your fav editor, you will have the option to automate prettier on save, I will discuss how we do in our VS Code. 
You will need to install this extension in VS Code first, the link is [here](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)

Or you can simply run 

```
ext install esbenp.prettier-vscode
```

Once you have installed, you can open your `settings.json` and add these lines

```
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}
```
with this, you will see the magic that prettier keeps doing every time you save your file.
For other editors, you can find the documentation [here](https://prettier.io/docs/en/editors.html).

# Eslint
Find problems during development, auto-fix most problems and fix the remaining ones before they come back to bite you.

Tslint is typescript version of this, but they are migrating from tslint to eslint, you can refer [here](https://github.com/Microsoft/TypeScript/issues/29288). This makes all the more reason for us to set up to any JS project that you are working on.


## Configuring Eslint
You can extend many popular companies coding standards, the commons ones include google, Airbnb.

Depending on React/Angular/Vue, you might want to add your eslint config one after another.

For example, for a nodejs/angular project, You can include the dependencies mentioned first,

```
npm install @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-config-prettier eslint-plugin-prettier prettier-eslint --save-dev
```
or if you are using yarn

```
yarn add @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-config-prettier eslint-plugin-prettier prettier-eslint --dev
```

Once done, you can create a file similar to how we created for prettier, the file name would be `.eslintrc.json`. You can also create rc file instead.

```
{
  "env": {
    "browser": true,
    "commonjs": true,
    "es6": true
  },
  "extends": [
    "plugin:@typescript-eslint/recommended",
    "prettier/@typescript-eslint",
    "plugin:prettier/recommended"
  ],
  "globals": {},
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
      "modules": true
    }
  },
  "plugins": ["@typescript-eslint"],
  "rules": {
    "no-const-assign": "error"
  },
  "settings": {}
}

```

##  Linting on Save with VS Code
You will need to install Eslint extension in vs code. You can do that using

```
ext install dbaeumer.vscode-eslint
```

You can find more on that extension [here](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)

You can run eslint on save files here as well. In your vs code settings, you will need to add these lines.

```
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
},
```
This will fix all your auto-fixable issues on save.

## Ignoring files from Eslint & Prettier

There are ways in which you can tell eslint & prettier to stop working on some files.

### Prettier ignore
Create a `.prettierignore` file and follow similar syntax on how you will use for `.gitignore`. Example would be

```js
// file name -> .prettierignore
styles-tailwind.css
```

### Eslint ignore
Similarly, you can create `.eslintignore` and it will skip that corresponding files specified there as well. Example would be


```js
// file name -> .eslintignore
package.json
package-lock.json
yarn.lock
dist/
node_modules/
```

# Using them on Pre-commit hooks.
Once you have set up eslint & prettier, you can make sure you are using them effectively by running a pre-commit hook to make sure you are not missing any errors. You can find more on that on my other blog [here](https://dev.to/rajivkr/effectively-using-pre-commit-hooks-in-git-for-javascript-developers-1hae).