javascript - react.js 'x' is assigned a value but never used no-unused-vars - Stack Overflow

admin管理员组

文章数量:1277298

I've setup eslint & eslint-plugin-react.

When I run ESLint, the linter returns no-unused-vars .

I'm assuming it's not recognizing that I'm using JSX or React syntax. Any ideas?

Line 5:11: 'x' is assigned a value but never used no-unused-vars

Example:

Please help me

---

Inside a file Component

import React,{ Component } from 'react';
class Item extends Component{
   render () {
       const x = 1;
       return (
         <div>test</div>
       );
    }
};

export default Item;

---

Inside a file .eslintrc.json

{
"env": {
    "browser": true,
    "es6": true
},
"extends": [
    "eslint:remended",
    "plugin:react/remended",
    "react-app","prettier"
],
"settings": {
  "react": {
    "createClass": "createReactClass"
    "pragma": "React",
    "version": "detect",
    "flowVersion": "0.53"
  },
  "propWrapperFunctions": [
      "forbidExtraProps",
      {"property": "freeze", "object": "Object"},
      {"property": "myFavoriteWrapper"}
  ],
  "linkComponents": [
    "Hyperlink",
    {"name": "Link", "linkAttribute": "to"}
  ]
},
"parserOptions": {
    "ecmaVersion": 2018,
    "ecmaFeatures": {
      "jsx": true
    }
},
"plugins": [
    "react","prettier"
],
"rules": {
  "react/jsx-uses-react": "error",
  "react/jsx-uses-vars": "error",
  "no-unused-vars": ["error", { "vars": "all", "args": "after-used", "ignoreRestSiblings": false }],
}

}

I've setup eslint & eslint-plugin-react.

When I run ESLint, the linter returns no-unused-vars .

I'm assuming it's not recognizing that I'm using JSX or React syntax. Any ideas?

Line 5:11: 'x' is assigned a value but never used no-unused-vars

Example:

Please help me

---

Inside a file Component

import React,{ Component } from 'react';
class Item extends Component{
   render () {
       const x = 1;
       return (
         <div>test</div>
       );
    }
};

export default Item;

---

Inside a file .eslintrc.json

{
"env": {
    "browser": true,
    "es6": true
},
"extends": [
    "eslint:remended",
    "plugin:react/remended",
    "react-app","prettier"
],
"settings": {
  "react": {
    "createClass": "createReactClass"
    "pragma": "React",
    "version": "detect",
    "flowVersion": "0.53"
  },
  "propWrapperFunctions": [
      "forbidExtraProps",
      {"property": "freeze", "object": "Object"},
      {"property": "myFavoriteWrapper"}
  ],
  "linkComponents": [
    "Hyperlink",
    {"name": "Link", "linkAttribute": "to"}
  ]
},
"parserOptions": {
    "ecmaVersion": 2018,
    "ecmaFeatures": {
      "jsx": true
    }
},
"plugins": [
    "react","prettier"
],
"rules": {
  "react/jsx-uses-react": "error",
  "react/jsx-uses-vars": "error",
  "no-unused-vars": ["error", { "vars": "all", "args": "after-used", "ignoreRestSiblings": false }],
}

}

• javascript
• reactjs
• function
• eslint
• eslintrc

Share Improve this question Follow asked Jan 17, 2020 at 9:18 hichemhichem 12111 gold badge33 silver badges77 bronze badges 3

• 1 const x = 1; and you never use x. Why do you think that the assignment would be used? – VLAZ Commented Jan 17, 2020 at 9:19
• 1 this happen because you are defining x but not use it.So, just remove it – Prakash Karena Commented Jan 17, 2020 at 9:21
• Wele to SO! Please note that it is appreciated to keep the provided code as explicit as neccessary, but as short as possible. You might want to have a look at stackoverflow./help/minimal-reproducible-example for some inspiration. – Twonky Commented Jan 17, 2020 at 10:00

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

ESLint lint behavior is right. You've declared x but don't use in your JSX. It should disappear if use it:)

import React,{ Component } from 'react';
class Item extends Component{
   render () {
       const x = 1;
       return (
         <div>test {x}</div>
       );
    }
};

export default Item;

In production you may do differently, but you can always add a line before your variable declaration to ignore the warnings:

// eslint-disable-next-line

{
    "env": {
        "browser": true,
        "es6": true
    },
    "extends": [
        "eslint:remended",
        "plugin:react/remended",
        "react-app","prettier"
    ],
    "settings": {
      "react": {
        "createClass": "createReactClass",
        "pragma": "React",
        "version": "detect",
        "flowVersion": "0.53"
      },
      "propWrapperFunctions": [
          "forbidExtraProps",
          {"property": "freeze", "object": "Object"},
          {"property": "myFavoriteWrapper"}
      ],
      "linkComponents": [
        "Hyperlink",
        {"name": "Link", "linkAttribute": "to"}
      ]
    },
    "parserOptions": {
        "ecmaVersion": 2018,
        "ecmaFeatures": {
          "jsx": true
        }
    },
    "plugins": [
        "react","prettier"
    ],
    "rules": {
      "react/jsx-uses-react": "error",
      "react/jsx-uses-vars": "error",
      "no-unused-vars": ["error", { "vars": "all", "args": "after-used", "ignoreRestSiblings": false }]
    }
}

本文标签： javascriptreactjs 39x39 is assigned a value but never used nounusedvarsStack Overflow