Today, we will explore another Visual Studio code extension Eslint that helps you to discover possible errors in Visual Studio Code.
![after install](https://debug.to/?qa=blob&qa_blobid=13248714629765184074)
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](https://debug.to/?qa=blob&qa_blobid=14090792092308743657)
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](https://debug.to/?qa=blob&qa_blobid=13248714629765184074)
How to install Eslint using npm in the project folder?
npm install eslint --save-dev
![terminal](https://debug.to/?qa=blob&qa_blobid=4561187458159064757)
npx eslint –init
![init the wizard](https://debug.to/?qa=blob&qa_blobid=11474747909768182441)
![finish wizard](https://debug.to/?qa=blob&qa_blobid=11545610841403697424)
- Now the Eslint installs the package in the project folder as you can see in the below picture
![package](https://debug.to/?qa=blob&qa_blobid=15331998798782562660)
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](https://debug.to/?qa=blob&qa_blobid=3301089410252071586)
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](https://debug.to/?qa=blob&qa_blobid=18171795980595689173)
If you click Quick fix, you will see more choices where you can choose one of them as you prefer.
![choices](https://debug.to/?qa=blob&qa_blobid=3400382415356002743)
The below is the result after selecting "Fix all"
![example without error](https://debug.to/?qa=blob&qa_blobid=1013185212401535293)
ESLint Quickstart - find errors automatically
See also