Eslint-plugin-react: No warnings are shown when using class="blah" or classname="blah"

[c0debreaker]

Here is my .eslintrc

{
  "extends": "react-app",
   "plugins": [
    "react"
  ],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "rules": {
    "react/jsx-uses-react": "error",
    "react/jsx-uses-vars": "error",
  }
}

and I'm using Atom editor. I was hoping that the codes below would trigger an eslint warnings

<div class="test">test</div>
<div classname="test">test</div>

Once I close the div tag, the eslint warning at the bottom of the editor goes away

[ljharb]

React itself will issue those warnings.

[c0debreaker]

I see the warnings in console in Chrome Dev Tools. However, I was hoping to see it during coding time in Atom. Eslint should take care of that right?

[ljharb]

No, eslint doesn't duplicate every runtime warning. Your tests have to handle that.

[c0debreaker]

Got it. Check out what I did. I commented out the usage of logo and look what eslint did. I was hoping I would also see something similar to this when I hover the mouse on class="blah"

http://imgur.com/a/UgoW8

[ljharb]

That's something static, defined in the file.

To warn on what you want, eslint-plugin-react would have to duplicate the list of valid DOM element props from inside React.

[yannickcr]

@c0debreaker I'm not sure what warning you expect ESLint to trigger here, but we have the no-unknown-property rule that can warn you on differences between HTML and JSX (like className instead of class)

[ljharb]

Oops, good call :-)

[c0debreaker]

Thank you folks!

[c0debreaker]

@yannickcr it worked really well! It's what I really want to happen :)

http://imgur.com/a/eTWZY