Add ESLint to Project NodeJS to keep your code “clean” and “beautiful”

Tram Ho

Original article at Adding ESLint to Project NodeJS to keep your code “clean” and “beautiful”

To keep our code in a consistent style and make it easier for others to “clean up” later, we need to set a standard for the code.

Here I use ESLint for my NodeJS project.

1. Environment Settings

First, open Extensions in VS Code and search for ESLint and install it.

Next, we open CMD to create a NodeJS project and open it with VS Code:

mkdir node-eslint && cd node-eslint && npm init -y && code .

Next, open Terminal in VS Code and run the ESLint init command:

npm init @eslint/config

Select To check syntax, find problems and enforce code style .

Select CommonJS (require/exports) .

Select None of these .

Here, I do not use Typescript, so I choose to continue on No .

The goal is to run NodeJS only, so I unchecked Browser and ticked Node .

Select Use a popular style guide .

Next choose Standard instead of Airbnb because I find it “genuine”.

Choose the format of the config file, here I choose Javascript .

Select Yes to install support packages for ESLint.

Choose npm or yarn as you like, here I choose yarn .

After running, we will have an .eslintrc.js file containing the project’s configs and rules.

2. Using ESLint

There are two popular ways you can use ESLint for your project:

  • Using commands in Terminal
  • Using VS Code’s command

2.1. Using commands in Terminal

To run the command conveniently, we have 2 ways.

Method 1: Run the following command directly in Terminal

eslint --fix ./*.js

Method 2: Add commands to scripts in package.json file.

"lint:fix": "eslint --fix ./*.js"

Then run it in Terminal

After running either of the above methods, it will automatically fix the errors in your project.

2.2. Use VS Code commands.

In VS Code, we use the following command to enable ESLint’s features

Ctrl + Shift + P

then enter:

ESLint: Fix all auto-fixable Problems

and enter, ESLint will automatically correct the error in the .js file you have open.

And this is the result:

Conclusion Thank you for visiting, hope that after applying ESLint, you will not let the “guy” of the code after you both code and “curse the previous code”. hello

Share the news now

Source : Viblo