52

ESlint static intellisense doesn't seem to be supported in Visual Studio 2017 which makes coding in .js files a complete pain as I have to run the CMD eslint command to get any linting errors. In VSCode I can just use the ESLint extension. What about Visual studio 2017?

Is their any way I can enable it?

smurtagh
  • 1,187
  • 9
  • 17
Martin Dawson
  • 7,455
  • 6
  • 49
  • 92

4 Answers4

88

How to Get ESLint Working in Visual Studio 2019 and 2017:

2019 v16 & 2017 >= v15.8

I've included the previous version instructions at the end, but do yourself a favor and upgrade if you want this feature.

From the menu: Tools > Options > Text Editor > Javascript/Typescript > Linting

Check Enable Eslint enter image description here

The global-in-visual-studio .eslintrc file is at your root user directory (Windows 10) along with other visual studio configs. You could still have eslint installed via npm install eslint -g on your machine. VS won't use it. It comes with the react plugin, but you can install other plugins and they'll will work. You can extend configs normally in your project (eslint ref)

It uses Eslint v4 but acc. to MS docs,

if your project has a local installation of ESLint, it will use that version instead

2017 v.15.7

From the menu: Tools --> Options --> Text Editor --> Javascript/Typescript Set Enable Eslint to True (if it's not already)

Then from the main menu: Tools --> Web Code Analysis --> Edit ESLint Settings

You will have to save the .eslintrc and your.js file for the rules to take effect. There might be a way to enable the intellisense as you type, but I haven't found it. I found that if I update the rules after visual studio has already begin linting, I have to restart the project for the new rule to take effect. Still clunky but this is a great way to quickly implement a coding standard especially when you match it with your text editor format and use an auto-format on save plugin like this one

Just remember to edit the .eslintrc file in the ESLint 2.0.0 format found here

Community
  • 1
  • 1
smurtagh
  • 1,187
  • 9
  • 17
  • 3
    I still couldn't get this to work. I use Resharper and eslint's AirBnB config. The fact that VS still doesn't support a lot of linting rules means I am just going to stick to VSCode for developing in JS I think. – Martin Dawson Jun 09 '17 at 13:30
  • 1
    Any idea how to upgrade the eslint version from 2.0.0 to a higher one? –  Nov 28 '17 at 06:28
  • @K48 not positive this will work, but you could try updating the eslint module in the node_modules folder for VS. The folder is located by default in Program Files -> Microsoft Visual Studio 14.0 -> Web -> External -> node_modules. Same location where you could place an additional plugin for ESlint. All you need is a globally installed npm. Let me know how it goes if you try! – smurtagh Nov 28 '17 at 13:31
  • 8
    Is there a way of using an .eslintrc file located in my project root in VS Professional 2017? I want to source control this file so having it in my user profile folder is no good. – garryp Jan 17 '18 at 10:23
  • @garryp you can do it the same way eslint works with multiple configs: https://eslint.org/docs/user-guide/configuring#extending-configuration-files – smurtagh Jan 23 '18 at 22:05
  • 1
    If I edit the ESLint config file, and want to disable warnings for `"no-extra-parens"` then this value is initially `1` (warning) - but when I change it Intellisense suggests "Error", "Off" and "Warn" (strings). So to disable, do have to enter `0` instead? And, does a rebuild solution re-check the rules too? Or do I really need to save the `.js` files afterwards? – Matt May 15 '18 at 12:30
  • 1
    @Matt yup, intellisense is working against you there, unless you are using a global installation of eslint – smurtagh May 15 '18 at 12:32
  • @smurtagh - Thank you, so I'll use the numeric value instead. – Matt May 15 '18 at 12:33
  • 2
    Just for documentation purpose: `0` = **off**, `1 `= **warn**, `2 `= **error**. – Matt May 15 '18 at 15:48
  • After doing this, how do I test if lint is running? Do I need to install npm? – Gqqnbig Aug 17 '18 at 01:29
  • @Gqqnbig you should see the warnings and errors in visual studio's Error List (`ctrl+\,E`). If you want to run the `eslint` command on your file to make simple auto-corrections, you will need npm. Is that what you mean by "running?" – smurtagh Aug 17 '18 at 12:58
  • 3
    The 15.8 version has a small issue with the .eslintignore file. You should not save it as utf8 with bom (the default of visual studio). Putting a # as the first line also makes it working better! Watch out, a *.js file should be saved, before any change to .eslintignore is processed. – JDC Sep 13 '18 at 09:51
  • @garryp [Yes](https://stackoverflow.com/a/59429889/1028230). – ruffin Sep 01 '20 at 22:27
14

I don't know if this is part of the 15.8.2 update (just added on 8/23/18) or not, but the layout for Options has changed slightly:

enter image description here

As has the menu options under Web Code Analysis:

enter image description here

I suddenly started getting the most picayune errors from it (Like "Expected '===' and instead saw '=='.") which I suspect is due to it having been "improved" to work better.

VBartilucci
  • 477
  • 6
  • 17
  • Exist some solution to avoid this? (Like "Expected '===' and instead saw '=='.") **without disable EsLint** – LuisEduardox Sep 19 '18 at 17:31
  • Not that I've seen yet. And it seems that just about all of the "errors" could/should be warnings, as in it's better to use three = signs, but two isn't quite "wrong" – VBartilucci Sep 19 '18 at 17:54
  • Yes, I agree with you. Sometimes is necessary use == to make/allow implicit cast. [Reference](https://stackoverflow.com/a/8616501/7452226) – LuisEduardox Sep 19 '18 at 18:12
  • 2
    If you want to disable error: (Like "Expected '!==' and instead saw '!='.") in JS files, open .eslintrc (generally inside root folder user) and modify property eqeqeq - i.e: **"eqeqeq": 0** (you could need close and open visual studio to make effective changes) – LuisEduardox Sep 20 '18 at 01:12
4

The eslint version of Visual Studio is not the latest one, that's why you couldn't get the eslint to work as in VSCode.

There is an extension named VisualLinter which let you use the newer version of eslint.

zcharles
  • 190
  • 6
4

As of 14/8/2018 eslint has much better support in Visual Studio 2017 (15.8.0)

https://learn.microsoft.com/en-us/visualstudio/releasenotes/vs2017-relnotes-v15.8#eslint-improvements

JDC
  • 1,569
  • 16
  • 33
  • 1
    The 15.8 version has a small issue with the .eslintignore file. You should not save it as utf8 with bom (the default of visual studio). Putting a # as the first line also makes it working better! Watch out, a *.js file should be saved, before any change to .eslintignore is processed. – JDC Aug 23 '18 at 09:10
  • could you add the above comment to my answer? – smurtagh Sep 12 '18 at 19:47
  • I was using version VS 15.8.1 and ESLint suddenly threw up all kinds of errors in JS library code - upgrading to the latest (15.8.5) fixed it. – Claire Furney Oct 03 '18 at 08:42