Babel-eslint: no-unused-vars for jsx

Created on 27 Feb 2015  ยท  11Comments  ยท  Source: babel/babel-eslint

First, thank you for babel-eslint: it's like a dream :+1:

The following code warns for Router is defined but never used (no-unused-vars):

import Router from 'react-router';
export default (
  <Router.Route name="app" path="/" />
);

It seems happening when using JSX outside a React.createClass(). Is there a way to make eslint recognizing the use of the var?

Most helpful comment

I also had issues with this after eslint 0.17. It seems we should install eslint-plugin-react as explained in https://github.com/eslint/eslint/issues/2147.
With the following:

$ npm -g ls eslint eslint-plugin-react babel-eslint
/usr/local/lib
โ”œโ”€โ”€ [email protected]
โ”œโ”€โ”€ [email protected]
โ””โ”€โ”€ [email protected]

And adding the following to my .eslintrc

{
  ...
  "plugins": [
    "react"
  ],
  ...
  "rules": {
    ...
    "react/jsx-uses-vars": 1
  }
}

I no longer get the false warning

All 11 comments

+1, I also have this.

Most of these are easy fixes my laptop shit itself so I won't be able to
fix these for a couple of hours while I get a charger...

On Saturday, 28 February 2015, Dan Abramov [email protected] wrote:

+1, I also have this.

Reply to this email directly or view it on GitHub
https://github.com/babel/babel-eslint/issues/5#issuecomment-76455272.

Sebastian McKenzie

Fixed as of 1.0.8, thanks!

sorry but version 1.0.8 of what package? I'm using eslint version 0.17.1 and babel-eslint 2.0.2, I'm facing the same problem. My .eslintrc file looks like this:

{
  "parser": "babel-eslint",

  "env": {
    "browser": true,
    "node": true,
  },

  "rules": {
    "quotes": [2, "single", "avoid-escape"],
    "comma-dangle": [2, "always-multiline"],
    "strict": [2, "never"],
    "new-cap": [2, { "capIsNewExceptions": ["Router", "Schema"] }],
    "camelcase": [0],
    "consistent-return": [0]
  }
}

I think I'm having this problem as well.

.eslintrc

{
  "parser": "babel-eslint",
  "rules": {
    "strict": false,
    "no-console": false,
    "no-multiple-empty-lines": false
  },
  "env": {
    "mocha": true,
    "browser": true,
    "node": true
  }
}

problem-example.jsx

var Foo = require('./Foo.jsx')
module.exports = <Foo></Foo>

Sublime Text console

SublimeLinter: eslint output:
<text>: line 1, col 4, Error - Foo is defined but never used (no-unused-vars)
<text>: line 2, col 18, Error - 'Foo' is not defined. (no-undef)

terminal

$ npm ls -g babel-eslint eslint
/Users/cesarandreu/.nvm/versions/io.js/v1.6.1/lib
โ”œโ”€โ”€ [email protected]
โ””โ”€โ”€ [email protected]

As part of the Sublime Text console output it also shows it's using the correct eslint binary.

I also had issues with this after eslint 0.17. It seems we should install eslint-plugin-react as explained in https://github.com/eslint/eslint/issues/2147.
With the following:

$ npm -g ls eslint eslint-plugin-react babel-eslint
/usr/local/lib
โ”œโ”€โ”€ [email protected]
โ”œโ”€โ”€ [email protected]
โ””โ”€โ”€ [email protected]

And adding the following to my .eslintrc

{
  ...
  "plugins": [
    "react"
  ],
  ...
  "rules": {
    ...
    "react/jsx-uses-vars": 1
  }
}

I no longer get the false warning

I've got a similar config and I'm seeing the issue of all the JSX used vars show as not used.

Main difference is [email protected].

โžœ  ~/github/react-starter-kit (master u=) npm -g ls eslint eslint-plugin-react babel-eslint
/usr/local/lib
โ”œโ”€โ”€ [email protected]
โ”œโ”€โ”€ [email protected]
โ”œโ”€โ”€ [email protected]
โ””โ”€โ”ฌ [email protected] (git://github.com/feross/standard#4a2d51eb527bec1a987af9dae57ec8d1d61decaa)
  โ”œโ”€โ”€ [email protected]  (git://github.com/eslint/eslint.git#06927eeacba776c29a40bc0a191f9d9fc9575ba6)
  โ””โ”€โ”€ [email protected]

Working .eslintrc from the subdirectory containing my JSX:

{
  "rules": {
    "no-extra-parens": 0,
    "react/jsx-uses-vars": 1
  },
  "ecmaFeatures": {
    "jsx": true,
  },
  "env": {
    "node": false,
    "browser": true,
    "es6": true,
  },
  "parser": "babel-eslint",
  "plugins": [
      "eslint-plugin-react"
  ]
}

@sebmck, if you keep getting hassled about JSX e.g. #74, might be worth including some extra notes in the README.

Hi all, I'm still getting this error, would anyone mind a look here? https://stackoverflow.com/questions/45085584/how-to-remove-eslint-parsing-error-on-es6-export-statement?noredirect=1#comment77144342_45085584

npm v3.10.10 node v6.11.0 eslint v4.2.0

A figured it out, it was the last comment here : https://github.com/babel/babel-eslint/issues/6

Was this page helpful?
0 / 5 - 0 ratings