Closed
Description
After many requests and some soul-searching, I've come around to believing that ESLint should optionally support JSX. My rationale is based on:
- The growing popularity of React/JSX
- The existence of Esprima-FB and estraverse-FB
There is still the issue of escope not supporting es6 scoping rules and relying on estraverse directly, but that may be solvable.
The way I'm envisioning this working is by allowing you to specify one of four JavaScript modes:
- ECMAScript 3
- ECMAScript 5
- ECMAScript 6
- JSX
That means ECMAScript 6 support is separate from JSX support. You opt-in to JSX, you get whatever is in Esprima-FB vs. opting in to ES6, which should not support JSX syntax.
This issue is to gather investigation data to determine how this can be achieved and what blockers might exist.
Activity
michaelficarra commentedon Sep 24, 2014
ES4? I hope you meant ES5.
nzakas commentedon Sep 24, 2014
Yikes, yes.
michaelficarra commentedon Sep 24, 2014
ECMAScript 6 is a superset of ECMAScript 5, which is a superset of ECMAScript 3. I see only two options: ES6 and JSX.
andreypopp commentedon Sep 24, 2014
@nzakas thank you for reconsidering this!
Another library which can provide traversal over es5/es6/jsx/es7 is ast-types which is used by recast.
vjeux commentedon Oct 1, 2014
Please note that we're committed to JSX and in order to make sure that the integration with tooling such as eslint is as easy as possible we created a specification for JSX.
nzakas commentedon Oct 1, 2014
@vjeux good to know! The spec is useful, but not as useful as libraries that we can plug in and have "just work". :) Have you (all) done any work around creating an
escope
that's compatible with JSX?jeffmo commentedon Oct 1, 2014
@nzakas: It's worth noting that esprima-fb is the esprima harmony branch + JSX (it tracks the upstream harmony branch, we periodically merge in updates from upstream, and we always send harmony-specific PRs to upstream first) -- so if you just always use esprima-fb for ES6, you're supporting both ES6 and JSX. If you were to provide a toggle between esprima-fb and esprima/harmony, the only distinction you'd see (barring bugs) is that esprima/harmony would give a parse error if you threw JSX at it.
On the other hand, you still have the option of rejecting JSX in code if you so desire -- even if the parser parses it (if you see the presence of a JSX node while traversing the syntax tree, you error).
Would it make sense to simply provide a no-JSX lint than a toggle on which parser to use?
vjeux commentedon Oct 1, 2014
The only issue using esprima-fb (or the esprima harmony branch) applied on ES5 JS code is the following:
The harmony branch has the fallthrough comment at a different position in the AST. Shouldn't be hard to get the lint rule accept both positions.
In order to lint ES6 or JSX code, there are a few rules that need to be updated. For example the unused variable rule doesn't consider to be a 'use' and marks it as unused.
We're currently playing around switching from jslint after pre-processing to eslint. So far we've got something "working" by disabling a few rules. It doesn't seem that it would require drastic changes and only a handful of pull requests would be needed to support it properly.
sophiebits commentedon Oct 1, 2014
This is tricky because in React's JSX, writing
<Button>
counts as a use of the variableButton
but since JSX itself doesn't specify semantics, that might not be true with a different transformer.jeffmo commentedon Oct 1, 2014
This sounds like a bug we should just get fixed -- not quite sure why they differ
This would be a React-specific lint rule. JSX is just syntax -- React applies meaning to that syntax; So given that the lint-rule would be react-specific anyway, specifying the react-specific contextually-local variables in the lint rule makes sense.
100 remaining items