Enhance your code readability with Prettier and 
Tags: opensource, prettier, eslint
Published: 2020-11-14 22:10:22

### Why should we add tools to our editor?
* Enhance work quality.
* Improve work efficiency
* Avoid mistakes while coding so that we could save time from fixing bugs

### Prettier and ESLint
[Prettier](https://prettier.io/) is a code formatter which supports JS language. A code formatter helps improve code readability so that our code would be cleaner and easier to understand. Moreover, Prettier can integrate with most editors. By which, I mean it is commonly used by many programmers.

[ESLint](https://eslint.org/) is a linter that automatically detects any silly mistakes we could make while coding. ESLint provides the ability to quickly find problems in our code. Also, it can help fix them automatically. Furthermore, to make it more flexible developers could customize the rules for ESLint.

### How to set up

One of the reasons why I decided to choose those two is because they are both easy to set up which I'm about to show you.

#### Set up Prettier by using commands
* Install Prettier to your local machine 

`npm install --save-dev --save-exact prettier`

* Create an empty config file

`echo {}> .prettierrc.json`

* Create an `.prettierignore` file to ignore what files we don't want to format. Normally, the content of this file is based on the one of `.gitignore` file.

* To format all files with Prettier

`npx prettier --write .`

* To format a specific file or a directory

`npx prettier --write ./src`

To read more about the installation of Prettier, please get access at [here](https://prettier.io/docs/en/install.html).

#### Set up Prettier by using commands
* To install ESLint at your local machine:

`npm install eslint --save-dev`

* Next, set up a configuration file:

`npx eslint --init`

* To run ESLint for all files:

`npx eslint .`

* To run ESLint for a specific file:

`npx eslint filename`

To read more about the installation of ESLint, please get access at [here](https://eslint.org/docs/user-guide/getting-started).

### Before and after using Prettier

Below is a block of code before and after using Prettier so that we can see what difference it can make.

Before:

```
const {checkURL, archivedURL, jsonResult} = require('../urlHelper/urlFunctions')	 
const {fileInteraction} = require('../readFiles/fileInteractions')	  
const {telescopeCheck} = require('../apiHandler/apiHandler')
```

After:
```
const {
  checkURL,
  archivedURL,
  jsonResult,
} = require("../urlHelper/urlFunctions");
const { fileInteraction } = require("../readFiles/fileInteractions");
const { telescopeCheck } = require("../apiHandler/apiHandler");
```
As we can see, after being formatted by Prettier my code is more organized and readable.

### How ESLint improves my code
Usually, when writing a loop in JS, I don't declare a iterator instead I just use it like the example below:
```
for (i = 0; i < response.data.length; i++) {
    ...
      }
```
In VSCode I can compile and run without getting any errors. However, this is one of the silly mistakes I make when coding. Thanks to ESLint I could learn to realize my behavior and fix it.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/zqw4dfikt9vf5vvkrnqk.JPG)

### Automate your tools

To automate Prettier and ESLint please read at [my CONTRIBUTING.md](https://github.com/phast184/link-checker-tool/blob/3a0617a6cb73828e879428b1724d1944385c338d/CONTRIBUTING.md)

### What I learn from this week assignment
* Using tools like Prettier and ESLint helps improve my code quality a lot.

* How to install and integrate them to my editor (VS Code).