(ESLint) Definition for rule 'react/jsx-sort-prop-types' was not found

Question

I have just updated my VS 2017 (version 15.8.2). Now when I open any .js file, I see a red squiggly line on the first line of the file... this is the warning message:

Definition for rule 'react/jsx-sort-prop-types' was not found

and when I hover over the squiggly line:

I am not sure why suddenly I am getting so many .js errors?

Answer 1

ESLint (which is a JS code analyzer) is enabled by default in VS 2017 - from version 15.8:

ESLint support: ESLint support has been reimplemented in this release. So, Visual Studio will now lint JavaScript files as you edit. ESLint has been updated to use ESLint 4 by default, but if your project has a local installation of ESLint, it will use that version instead. You can easily disable ESLint globally in VS by unchecking the “Enable ESLint” setting in the “Tools / Options” dialog in the location shown below.

If you want to use ESLint coding guideline, then all you need to do is to Reset global .eslintrc file. In VS go to:

Tools > Options > Text Editor > JavaScript/TypeScript > Linting

And click on Reset global .eslintrc button:

Resetting .eslintrc will fix your settings file (it imports react plugin)

Note that the default plugin which comes with VS is react plugin, this does not mean that you are using react.js, but it means you are using react coding guidelines.

Also note that, the above step imports react plugin into the setting, and sets up ESLint correctly, but you would probably still get a lot of .js styling errors, because you probably have not been following react coding guideline or some of the .js libraries that you have included in your project do not follow the guideline (the linting errors may not appear if the .js files are not open in VS, open a couple .js files and recompile to get the linting errors).

As an example, I was getting some styling error on jquery.validate.js. You probably don't want to change jquery.validate.js code, see this question on how to configure ESLint to ignore certain .js files.

---

If you don't want to make all the modifications to your project, you can disable ESLint as shown in the picture above.

If you want to use a different plugin, this is the full list of predefined plugins.

Answer 2

This just means that ESLint does not match the configuration found on .eslintrc file.

Clicking the "Reset global .eslintrc" button will fix it. It will reset your .eslintrc file to match with what ever required configuration of the ESLint installed on VS.