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 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 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.

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:

Now, a file called .eslintrc.json is created. Replace all the content of this file with the following code:

{
    "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 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:

{
    "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 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:

{
"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.

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