[no-unused-vars] with React

[laibulle]

Hello,

I have several false positive no-unused-vars. I saw several issues related to no-unised-var but I am not sure that it is related.

Did I missed something in my configuration ?

Best regards

package.json

...
"typescript": "^2.7.2",
"typescript-eslint-parser": "^14.0.0",
"eslint": "^4.18.2",
...

Dashboard.tsx

import * as React from 'react'
import { connect } from 'react-redux'
import { Route } from 'react-router'
import { push, RouterAction } from 'react-router-redux'
import { Dispatch } from 'redux'

import { RootState } from './../reducers'
import Navbar from './Navbar'
import LeftMenu from './LeftMenu'
import Recipes from './Recipes'
import Home from './Home'
import NewRecipe from './NewRecipe'

import Api, { User } from './../api'
import { storeUser } from '../actions'

interface Props {
    user: User | undefined,
    api: Api,
    storeUser: (user: User) => void,
    redirect: () => {}
}

class Dasboard extends React.Component<Props> {
    componentWillMount() {
        const token = localStorage.getItem('accessToken')

        if (token != null) {
            this.props.api.setToken(token)
            this.props.api.getUser('me').then(user => {
                this.props.storeUser(user)
            })
        } else {
            this.props.redirect()
        }
    }

    render() {
        if (this.props.user == null) return (<div></div>)

        return (
            <div className="main-container">
                <Navbar />
                <div className="wrapper">
                    <LeftMenu />
                    <div className="content-wrapper">
                        <Route exact path="/dashboard" component={Home} />
                        <Route exact path="/dashboard/recipes" component={Recipes} />
                        <Route exact path="/dashboard/recipes/add" component={NewRecipe} />

                    </div>
                </div>
            </div>
        )
    }
}

export default connect(
    (state: RootState) => ({
        user: state.app.user,
        api: state.app.api
    }),
    (dispatch: Dispatch<any>) => ({
        storeUser: (user: User) => { dispatch(storeUser(user)) },
        redirect: () => { dispatch(push('/dashboard/login')) }
    })
)(Dasboard)

.eslintrc.json

{
    "env": {
        "browser": true,
        "commonjs": true,
        "es6": true
    },
    "parser": "typescript-eslint-parser",
    "extends": "eslint:recommended",
    "parserOptions": {
        "ecmaFeatures": {
            "experimentalObjectRestSpread": true,
            "jsx": true
        },
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "overrides": {
        "files": [
            "**/*.ts",
            "**/*.tsx"
        ],
        "parser": "typescript-eslint-parser",
        "rules": {
            "no-undef": "off"
        }
    },
    "rules": {
        "no-undef": "warn",
        "no-unused-vars": "warn",
        "react/jsx-uses-react": "error",
        "react/jsx-uses-vars": "error",
        "linebreak-style": [
            "error",
            "unix"
        ],
        "quotes": [
            "error",
            "single"
        ],
        "semi": [
            "error",
            "never"
        ]
    }
}

Linter result

  4:16  warning  'RouterAction' is defined but never used  no-unused-vars
  5:10  warning  'Dispatch' is defined but never used      no-unused-vars
  7:10  warning  'RootState' is defined but never used     no-unused-vars

✖ 3 problems (0 errors, 3 warnings)

[macklinu]

From what I can tell, RouterAction is actually unused, but Dispatch and RootState are used as types.

It doesn't look like your eslintrc.json has included eslint-plugin-typescript. If you make the following changes, do the unused variable false-positives go away?

.eslintrc.json

{
    "env": {
        "browser": true,
        "commonjs": true,
        "es6": true
    },
    "parser": "typescript-eslint-parser",
    "extends": "eslint:recommended",
    "parserOptions": {
        "ecmaFeatures": {
            "experimentalObjectRestSpread": true,
            "jsx": true
        },
        "sourceType": "module"
    },
    "plugins": [
+        "react",
+        "typescript"
    ],
    "overrides": {
        "files": [
            "**/*.ts",
            "**/*.tsx"
        ],
        "parser": "typescript-eslint-parser",
        "rules": {
            "no-undef": "off"
        }
    },
    "rules": {
        "no-undef": "warn",
-        "no-unused-vars": "warn",
+        "typescript/no-unused-vars": "warn",
        "react/jsx-uses-react": "error",
        "react/jsx-uses-vars": "error",
        "linebreak-style": [
            "error",
            "unix"
        ],
        "quotes": [
            "error",
            "single"
        ],
        "semi": [
            "error",
            "never"
        ]
    }
}

[erezny]

I've reproduced this issue. disabling "no-unused-vars" causes "typescript/no-unused-vars" to not check anything at all.

[bradzacher]

cannot reproduce against v0.13.0.

used the following test code:

import * as React from 'react'
import { connect } from 'react-redux'
import { push } from 'react-router-redux'
import { Dispatch } from 'redux'

import { RootState } from './../reducers'

import Api, { User } from './../api'
import { storeUser } from '../actions'

interface Props {
    user: User | undefined,
    api: Api,
    storeUser: (user: User) => void,
    redirect: () => {}
}

class Dasboard extends React.Component<Props> {
    componentWillMount() {
        const token = localStorage.getItem('accessToken')

        if (token != null) {
            this.props.api.setToken(token)
            this.props.api.getUser('me').then(user => {
                this.props.storeUser(user)
            })
        } else {
            this.props.redirect()
        }
    }

    render() {
        return null
    }
}

export default connect(
    (state: RootState) => ({
        user: state.app.user,
        api: state.app.api
    }),
    (dispatch: Dispatch<any>) => ({
        storeUser: (user: User) => { dispatch(storeUser(user)) },
        redirect: () => { dispatch(push('/dashboard/login')) }
    })
)(Dasboard)

[j-f1]

@bradzacher Do you want to install something like no-response to auto-close issues when the OP hasn’t responded? I created the awaiting response label for that purpose.

[bradzacher]

Closing due to no response.
Feel free to reopen this issue if you have a solid repro case for your problem