Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ESLint support Visual studio 2017

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?

like image 769
Martin Dawson Avatar asked May 29 '17 19:05

Martin Dawson


People also ask

How do I enable ESLint?

To configure ESLint automatically in all new projects, open the Settings for New Projects dialog (File | New Projects Setup | Settings/Preferences for New Projects) , go to Languages & Frameworks | JavaScript | Code Quality Tools | ESLint, and select the Automatic ESLint configuration option.

How do I fix ESLint errors in Visual Studio Code?

In your code editor, open the JavaScript file you created earlier. All the broken rules will be indicated. If you have the ESLint extension installed you can use CTRL+SHIFT+P to open the Command Palette. Then search for ESLint: Fix all auto-fixable Problems and press ENTER (or RETURN ).

Is ESLint only for JavaScript?

ESLint requires Node. js for installation. Follow the instructions in the Getting Started Guide to install ESLint. Note: You can also use alternative package managers such as Yarn or pnpm to run ESLint.


2 Answers

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

like image 143
smurtagh Avatar answered Sep 24 '22 14:09

smurtagh


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.

like image 35
VBartilucci Avatar answered Sep 22 '22 14:09

VBartilucci