Turn off ESLint rule (in React app, using WebStorm)

Question

I am writing a React app in WebStorm using the standard React setup. I have never previously explicitly set up any linting, so whatever error/warning messages are showing up are from some sort of default configuration. When I run npm start I get the following warning:

Compiled with warnings.

Warning in ./path/to/MyComponent.js

/my/complete/path/to/MyComponent.js
  19:49  warning  Unexpected whitespace before property bind  no-whitespace-before-property
...
You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.

The last two lines make it explicitly clear that the warnings are from ESLint (as opposed to, say, JSHint or some custom React linting, etc.).

I want to keep ESLint running, i.e. I don't just want to globally disable all linting. However, I want to turn the "no-whitespace-before-property" warning off everywhere, not just on one line or in one file. How do I do that?

My package.json shows the following for npm start (which is what I run when the warnings appear):

"scripts": {
  "start": "react-scripts start",
  ...
}

I am developing in WebStorm. The ESLint preferences panel has the "Enable" checkbox unchecked, so all of the ESLint configuration options in the IDE are grayed-out and presumably irrelevant, so presumably also the configuration and invocation of ESLint are happening elsewhere (e.g. built into React?).

I tried putting the following .eslintrc.json file into my project home directory:

{
  "rules": {
    "no-whitespace-before-property": "off"
  }
}

alone as well as with "extends": "eslint:recommended".

I tried adding the following to my project's package.json file:

{
  ...
  "eslintConfig": {
    "rules": {
      "no-whitespace-before-property": "off"
    }
  }
}

I've also tried setting the value to 0 instead of to "off".

It may or may not be relevant that I'm writing a React app, and it may or may not be relevant that I'm developing in WebStorm, but I include those facts just in case.

I've checked around on StackOverflow and can't find an answer.

according to the ESLint docs, the file's name is just .eslintrc.js or .eslintrc (deprecated), not .eslintrc.json; the WebStorm docs say it wants .eslintrc so I'd try that. Not submitting as an answer since I don't use WebStorm and can't verify that this will fix your problem. Give it a shot though and let us know! — Dan O
The note below the errors is not coming from ESLint (error is). So I'm assuming you are using some sort of wrapper, like github.com/facebookincubator/create-react-app Those wrappers do not use .eslintrc file and can't be configured directly. You will have to read through documentation of your wrapper to figure out how to disable this rule. — Ilya Volodin
@IlyaVolodin, I followed your link and, based on the documentation there, made a copy of my project to test this strategy. I then ran npm run eject. That did indeed give me the ability to configure ESLint, including no-whitespace-before-property. I won't continue down that road at the moment because I want to continue using the automated build operation, but at least now I know why the bare-bones ESLint-ing wasn't configurable. If you want to write up your comment as a short answer, I'd be happy to accept it. — Andrew Willems

Ilya Volodin Ilya Volodin · Accepted Answer · 2017-02-04T20:02:31

The note below the errors is not coming from ESLint (error is). So I'm assuming you are using some sort of wrapper, like github.com/facebookincubator/create-react-app Those wrappers do not use .eslintrc file and can't be configured directly. You will have to read through documentation of your wrapper to figure out how to disable this rule.

In general ESLint wrappers like create-react-app, standard, xo, etc. are specifically designed to "just work", and hence remove ability to configure and fine tune styles/rules.

Turn off ESLint rule (in React app, using WebStorm)

1 Answers