Comments (18)
As I mentioned in the ESLint issue, you can manually turn off variable checking for React
:
/*eslint-disable no-unused-vars*/
var React = require('react');
/*eslint-enable no-unused-vars*/
In the next version of ESLint, you'll be able to do it with just one comment:
var React = require('react'); // eslint-disable-line no-unused-vars
The exception cases we have for JSX aren't the same category as this. We can easily tell that a JSX element represents an identifier and should be counted. This change would require us to hardcode knowledge of the React
local variable, and that's what I don't want to do.
from babel-eslint.
I had same problem.
I followed the document, and updated .eslintrc.json
as below:
{
...
"extends": [
"eslint:recommended",
"plugin:react/recommended"
],
...
}
from babel-eslint.
Just in case anyone comes here as I did, because they've got a bunch of ESLinting JSX errors, there is an excellent Dan Abramov blog post which has some great guidance on how to get ESLint + Babel + JSX/React up and working as well as the SublimeText plugins. It has an very useful final image on a good set of base settings for the .eslintrc
file for integrating eslint-plugin-react
:
from babel-eslint.
Closing this as eslint-plugin-react is now a thing.
from babel-eslint.
Wow, them closing that issue is a real bummer.
I see their reasoning but it's ridiculous to assume anyone would go over 500 components in a codebase to surround every React require with an eslint comment.
Of course it's a "right" decision by ESLint but it directly hurts users if there is no way to work around it using just the config.
from babel-eslint.
The source for the rule is here, check it out yourself:
https://github.com/eslint/eslint/blob/master/lib/rules/no-unused-vars.js
The complexity here is that React
is not set globally, it's being created locally (the top-level scope in browserified code is a function scope, not the global scope). You can already specify some globals that don't have to be used in the .eslintrc
file. By including it specifically, you are telling ESLint, "hey, this is a local variable that I'm planning on using."
I've already shown how to disable this warning. I'm not sure why there's resistance to that. Any other type of "special configuration" would also be extra code somewhere. Why not use what's already available?
To me, the real change here is that the JSX compiler/transpiler should be inserting the React
reference for you as part of that step. Forcing you to remember to do that seems like unnecessary cognitive overhead.
from babel-eslint.
修改.eslintrc. 文件
"rules": {
//...
"react/jsx-uses-react": 1,
}
from babel-eslint.
"rules": { //... "react/jsx-uses-react": 1, }
Thanks, this worked !
from babel-eslint.
(I retract my comment if it's possible with a custom rule. But a custom rule can't change the behavior of a builtin rule, can it?)
from babel-eslint.
You need to use https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-uses-vars.md
from babel-eslint.
See also eslint/eslint#1867
I think this will need to be a custom rule
from babel-eslint.
It would probably be nicer if there was a way to customize JSX parser in the config to specify the variables "required" to be in scope by using JSX. I don't know if it's possible though.
The idea is not to tie it to React, but to allow configuration to specify "React", or anything else, is required when file uses JSX. I think it's sensible in case other libraries start to use it for other purposes.
from babel-eslint.
@gaearon Agreed.
No. ESLint supports JSX syntax as defined in the spec. We don't specifically support React, just like we don't specifically support jQuery.
You already have rules that support React usage of JSX. JSXIdentifier
is explicitly special cased in the no-undef
rule. There's nothing in the JSX spec that says that a JSXIdentifier
refers to a local binding as the JSX spec does not dictate any logical behaviour beyond syntax.
from babel-eslint.
By the way it's not that bad now (most files using JSX also use React.createClass), but it will get worse after 0.13 when components can be plain ES6 classes.
I know JSX may get decoupled from React in the future (see http://facebook.github.io/react/blog/2015/02/24/streamlining-react-elements.html, "Problem: It Couples JSX to React") but we're not there yet.
from babel-eslint.
I think it should be fairly straightforward to replace the no-undef and no-unused rules with ones that understand React?
I haven't looked into it but I can see why this shouldn't live in eslint core.
The idea is we'd want some injection point to say that <Jsx />
is the use of React and Jsx variables (and that <jsx />
uses React and no other variables)
from babel-eslint.
I agree that hard-coding react would be a bad idea, it would still be useful if there were some extension point to say what variables JSX uses.
If React
is not set globally, then using JSX in a file without a react import causes an error.
In the current spec lowercase JSX produces a string, but beginning the tag with an uppercase character is a variable - is this currently hard-coded?
from babel-eslint.
Filed as eslint/eslint#1905
from babel-eslint.
"plugin:react/recommended"
Thank You. It worked for me. Great!!!!!!
from babel-eslint.
Related Issues (20)
- Latest Babel + flow generates "is not defined" errors on star imports HOT 3
- npm WARN [email protected] requires a peer of @babel/core@>=7.2.0 but none is installed HOT 3
- Disabling eslint on file does not work HOT 2
- Using decorator syntax doesn't pass eslint HOT 7
- There are no release notes for 10.1.0 HOT 2
- Imports from sibling directory not parsed using babel config HOT 2
- 11.0.0-beta.2 - Private method is not defined. (eslintno-undef) HOT 7
- eslint returns with parsing error unexpected token HOT 4
- How to use babel-eslint in a non-node JS environment (such as client environment, browser) HOT 6
- Breaking change in Node 13.13 HOT 2
- Typescript: parsing error when using "readonly" in interface HOT 2
- Expected indentation is forced for comments as well HOT 1
- Question: `11.0.0-beta2` Not installing all babel plugins (top level await) HOT 1
- no-unused-vars false positive with typescript types HOT 2
- Feature idea: have a way for eslint-plugin-prettier to share an AST with eslint HOT 4
- Missing 'ImportExpression' in visitorKeys HOT 4
- `RegExpLiteral` is not converted to `Literal` in an edge case HOT 2
- Template-literal rule attempting to run on nullish coalescing operations, and then crashing eslint HOT 1
- Error on 'extends' operator on generic type HOT 1
- works for me HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from babel-eslint.