ESLint is a linter that runs in Visual Studio Code to analyze code for possible errors. In this post, we will look at how to set up ESLint in Visual Studio Code, in order to check JavaScript files for errors. You will need node and npm installed.

First, let’s create a new directory and open the directory in VS Code:

Now, let’s create a JavaScript file. We will call our file test.js. You can see we have one function, and in that function, we are calling console1.log, which is a mistake (it should be console.log):

Now run npm init to initial this project as a node project:

Search results for 'ESLint', Visual Studio Code on marketplace.visualstudio.com. ESLint Visual Studio natively supports ESLint for linting JavaScript files, JSX files, and JavaScript contained in script blocks in HTML files. By default, Visual Studio installs ESLint 4 and uses it to lint all open.js files.jsx files, and files containing JavaScript code in script blocks. After turning on the built-in ESLint functionality in Visual Studio 2019 (Tools - Options - Text Editor - JavaScript/TypeScript - Linting - General - Enable ESLint = true) I’m able to see visual feedback from.

You can click Enter on all the options to choose all as defaults:

Now, let’s install eslint globally:

npm install -g eslint

We see eslint installed globally through the list command:

Now let’s initialize ESLint with eslint –init. We can use our cursor to choose any of the options. We will select the middle option:

And then:

Continue to select whichever answers make the most sense to you and your project, then click to install any dependencies:

You should see something like:

Our project now looks like this, with an eslintrc.json file created:

Now, if we look at our JavaScript file, we see it looks pretty much the same:

Let’s install the ESLint extension for VS Code:

The following message appears. Click Allow:

Now if we go to the JavaScript file, we see we’re getting errors reported:

We see the HelloWorld function has a red underline the error:

We see console1 is not defined:

And we see a summary of our problems from clicking in the bottom left on the error icons:

And we can click on each error to get a better description and solution from the ESLint website:

Resolving this, we see “No problems have been detected”:

ESLint can then be used for various validation scenarios as you write your code, e.g. when using strict mode:

Spyder shutter. You can do more to customize ESLint as well if you need to, which I might save for another post.

THANKS FOR READING. BEFORE YOU LEAVE, I NEED YOUR HELP.

I AM SPENDING MORE TIME THESE DAYS CREATING YOUTUBE VIDEOS TO HELP PEOPLE LEARN THE MICROSOFT POWER PLATFORM.

IF YOU WOULD LIKE TO SEE HOW I BUILD APPS, OR FIND SOMETHING USEFUL READING MY BLOG, I WOULD REALLY APPRECIATE YOU SUBSCRIBING TO MY YOUTUBE CHANNEL.

THANK YOU, AND LET'S KEEP LEARNING TOGETHER.

CARL

ABOUT CARL DE SOUZA

Carl de Souza is a developer and architect focusing on Microsoft Dynamics 365, Power BI, Azure, and AI.

carldesouza.com | LinkedIn | Twitter

Visual Studio Eslintrc

| YouTube

Related Posts:

• Fixing ESLint Execution is Not Approved or Denied in…
• Configuring ESLint Semi-Colons Rule
• Customizing Your Super-Linter and ESLint JavaScript Rules

If you used Web Essentials as your linter, you probably learned by now that it doesn’t provide that functionality anymore in VS 2015.
One way to fix it is to start using tools like gulp… or you could install a plugin – Web Analyzer

Eslint Visual Studio Code Setup

The tool seems to rely on node, so you need to install that as well. Also, it doesn’t look like it installs all of the necessary packages (at least it didn’t work for me, until I installed the packages). So, you may need to run npm install for these packages:
npm install -g eslint eslint-config-defaults
npm install -g babel-eslint

To config it, go to Tools – Web Analyzer – Edit ESLint Settings. All of the configuration settings can be found at http://eslint.org/. For example, if you use Jasmine tests and jQuery, your “env” will look like this:
“env”: {
“browser”: true,
“node”: true,
“es6”: true,
“jasmine”: true,
“jquery”: true
}

Eslint Visual Studio Code

In the “rules” block you can turn on/off individual rules and specify if they should show up as warnings (1) or errors (2).
“rules”: {
“eqeqeq”: 2,
…
This means that if ESLint sees “” instead of “” it will show up as an error in your Visual Studio Error List.