jsx-uses-vars rule doesn't work with ES6 class

[haoqunjiang]

With eslint@0.22.1 & eslint-plugin-react@2.5.0

$ cat hello.jsx

class HelloMessage extends React.Component {
    static get propTypes() {
        return {
            name: React.PropTypes.oneOfType([
                React.PropTypes.string,
                React.PropTypes.number
            ])
        };
    }
    render() {
        return <div>Hello {this.props.name}</div>;
    }
}

React.render(<HelloMessage name='world' />, document.querySelector('#content'));

$ cat .eslintrc

parser:
    babel-eslint

env:
    browser: true
    es6: true

plugins:
    - react

globals:
    React: true

rules:
    strict: 0
    quotes: [1, single, avoid-escape]
    indent: [1, 4]
    quote-props: [1, as-needed]
    no-unused-expressions: 1
    react/jsx-no-undef: 1
    react/jsx-quotes: [1, single, avoid-escape]
    react/jsx-uses-react: 1
    react/jsx-uses-vars: 1
    react/prop-types: 1
    react/react-in-jsx-scope: 1

$ eslint hello.jsx

hello.jsx
  1:6  error  HelloMessage is defined but never used  no-unused-vars

✖ 1 problem (1 error, 0 warnings)

Is that a bug of this plugin?

[adambabik]

I have the same error. I used the following versions of the libraries: eslint@0.22.1, eslint-plugin-react@2.5.0 and babel-eslint@3.1.13.

Code:

'use strict';

import React from 'react';

class HelloMessage extends React.Component {
  render() {
    return <p>HelloWorld!</p>;
  }
}

React.render(<HelloMessage />, document.body);

$cat .eslintrc

{
  "parser": "babel-eslint",
  "plugins": [
    "react"
  ],
  "rules": {
    "strict": 0,
    "global-strict": 0,
    "quotes": [1, "single", "avoid-escape"],
    "react/display-name": 0,
    "react/jsx-boolean-value": 1,
    "react/jsx-no-undef": 1,
    "react/jsx-quotes": 1,
    "react/jsx-sort-prop-types": 1,
    "react/jsx-sort-props": 1,
    "react/jsx-uses-react": 1,
    "react/jsx-uses-vars": 1,
    "react/no-did-mount-set-state": 1,
    "react/no-did-update-set-state": 1,
    "react/no-multi-comp": 1,
    "react/no-unknown-property": 1,
    "react/prop-types": 1,
    "react/react-in-jsx-scope": 1,
    "react/self-closing-comp": 1,
    "react/sort-comp": 1,
    "react/wrap-multilines": 1
  },
  "env": {
    "browser": true,
    "es6": true
  },
  "ecmaFeatures": {
    "jsx": true,
    "modules": true
  }
}

$ eslint app.jsx

app.jsx
  5:6  error  HelloMessage is defined but never used  no-unused-vars

✖ 1 problem (1 error, 0 warnings)

I tried to find the root of the problem and it turned out that for the simplest case:

class A {};
<App />;

there are two variables with name A. One in scope: scope: { type: 'global', ... } and the second in scope scope: { type: 'class', ... }. The function markVariableAsUsed() marks only one of them with eslintUsed = true (the inner one I guess), so eslint reports an error.