Set up a Node.js App with ESLint and Prettier
Tags: webdev, node, javascript, beginners
Published: 2022-12-19 10:41:37

Before building an application, we first need to prepare the development environment with tools and technologies that facilitate development and debugging. Node.js application is not an exception, so we need to set it up with packages, modules, plugins and tools that improve our code quality and avoid bugs and errors.. ESLint and Prettier are two of these tools.

## What is ESLint?
[ESLint](https://eslint.org/) is a JavaScript and TypeScript linting tool, that means it analyses source code and identifies possible programming problems and errors. It underlines errors in red and warnings in yellow. It is very useful to cover coding styles issues.

## What is Prettier?
[Prettier](https://prettier.io/) is an opinionated code formatter, it enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary. It is very useful to keep your code readable and make sure that the code format stays consistent when working in a team. It also supports many programming languages such as : JavaScript, TypeScript, CSS, GraphQL, JSON and much more.

## Setting up ESLint and Prettier.
First, create a new folder called _app-eslint-prettier-config_ and dive to this folder. Open your terminal and initialize your node.js application by entering this command:

`npm init --y`

Make sure that you have already installed Node.js on your local machine.Now, install all the necessary dependencies:

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

Configure ESLint by running this command :
`eslint --init`

After running this command, you need to configure ESLint by selecting some configuration options. Use the down arrow key to go to To check syntax and find problems, as seen in the following image. Press the spacebar to select and then press enter.

![Image Eslint config](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/todfw9wsfa3v6i84lubm.jpg)
Next, select what type of module you want to use and the framework you want to use. In our case, we will be working on a Node.js project, so select none of these. Answer all the following questions using the same procedure.

The final result will look like this:

![Image eslint setup](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mkmu2u0y3vyrdmnxw87r.jpg)
Now, a file called _.eslintrc.json_ is created. Replace all the content of this file with the following code:

```json
{
    "root": true,
    "parserOptions": {
         "ecmaVersion": 12,
         "sourceType": "module"
    },
    "extends": ["eslint:recommended", "prettier"],
    "env": { 
         "es2021": true,
         "node": true
    },
    "rules": {
         "no-console": "error"
    }
}
```
Now, let’s explain each bunch of code added in the _.eslintrc.json_ file:

- The _root_ property indicates that this configuration is the root of the project. By attributing true to this root property, ESLint is limited to a specific project and stops looking in parent folders.

- The _parserOptions_ defines what ECMASCRIPT version you use in your code and if you use modules or not.

- The _extends_ allows to add rules to the configuration. Here, we use the recommended rules of ESLint and the rules defined by the _eslint-config-prettier_ package. This package turns off all ESLint rules that are unnecessary or might conflict with Prettier.

- The _env_ property defines which kind of environment your code will run in. Here, it is a Node.js then we set node property to true. You can also add browser property and set it to true if you are also working in a client environment like React or Vue.

- The _rules_ property allows you to edit or add rules specifically. We add no-console: ”error” in order to avoid using methods on _console_. Console messages are considered to be used for debugging purposes and therefore not suitable to ship to the client. But If you want to allow methods of the console, add this sample of code in the rules : _{ “allow”: [“warn”, “error”] }_.

There are more options available, you can check the official [ESLint Documentation](https://eslint.org/docs/user-guide/) if you are interested.

Now, let us configure Prettier.

Create a file called _.prettierrc.json_ in the root directory of your project and add the following code to this file:

```json
{
    "trailingComma": "es5",
    "tabWidth": 4,
    "semi": false,
    "singleQuote": true
}
```
Here, we use the default configuration options, you can add more if you want. Check the[ Prettier documentation](https://prettier.io/) for more details.

We have finished to configure ESLint and Prettier .But once we need to add some scripts in the _package.json_ file so that we can run ESLint and Prettier manually.

_Code added in package.json:_
```json
{
"scripts": {
   "format:check": 
   "prettier --check .",
   "format:write": "prettier --write .",
   "lint:check": "eslint .",
   "lint:fix": "eslint --fix ."
}
}
```
Check if the formatting matches this Prettier’s rules by using:

```
npm run format:check
```
Force the formatting by using this command:

```
npm run format:write
```
Lint your code with:

```
npm run lint:check
```
Auto-fixing errors with this command:

```
npm run lint:fix
```

**Conclusion**
We have now finished setting up our Node.js application with Eslint and Prettier. You can find the complete source code in this [repository](https://github.com/Thomas-Max99/eslint-prettier-node-app).

**THANK YOU FOR READING** 
I hope you found this little article helpful.  Please share it with your friends and colleagues. Sharing is caring.

Connect with me on [various platforms](https://bio.link/thomassentre)