Welcome to deBUG.to Community where you can ask questions and receive answers from Microsoft MVPs and other experts in our community.
0 like 0 dislike
824 views
in Tools by 23 25 39

Today, we will explore another Visual Studio code extension Eslint that helps you to discover possible errors in Visual Studio Code.

after install


What is Eslint?

Eslint is a visual studio code extension for identifying and reporting on patterns found in ECMAScript/JavaScript code, with the goal of making code more consistent and avoiding bugs.

Features:

  • Find errors automatically.
  • Eslint is concerned with code quality.
  • Easy to maintenances code.
  • Reduce time of manual review.

How to Install the Eslint extension for Visual Studio Code?

To install the Eslint extension for Visual Studio Code, you should follow the below steps:

Steps

  • Go to the extension button, and search for Eslint, then click install.

 search for Eslint

Also,  you can install it from this link install ESLint

  • After the installation is finished, you will notice that the extension has been enabled globally as below.

after install

How to install Eslint using npm in the project folder? 

  • Go to terminal  In visual studio code and type below command and press enter  

npm install eslint --save-dev

terminal

  • Now we have to install Eslint in our project  the next step we are going to initialize it with our project to do that type below command  in the terminal and press enter  

npx eslint –init
  • This command will run the wizard 

init the wizard

  • And then you should follow the steps of the wizard as below

finish wizard

  • Now the Eslint installs the package in the project folder as you can see in the below picture

package

How to use the Eslint extension for Visual Studio Code?

To use the Eslint, you should first create a new project and it will automatically import the package used by the Eslint into our project.

Simple example

Below is an example of a code that has 6 errors.

example_error

When you hover the error, you will get a message that tells you if you want to view a problem or quick fix.

fix error

If you click Quick fix, you will see more choices where you can choose one of them as you prefer.

choices

The below is the result after selecting "Fix all"

example without error


ESLint Quickstart - find errors automatically

See also


If you don’t ask, the answer is always NO!
...