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:recommended",
"plugin:react/recommended",
"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 }],
}
}
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;
{ "env": { "browser": true, "es6": true }, "extends": [ "eslint:recommended", "plugin:react/recommended", "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 }] } }
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.