eslint with jsx

How eslint deal with jsx

1. parserOptions.ecmaFeatures.jsx: true, parser(espree) will parse jsx to JSXIdentifier Node in ast

2. react/react-in-jsx-scope rule used to check: when there is jsx in file, there should be a React in variable

Gotchas

Til now (Apr-05-2020), eslint does not deal with jsx in a parsed way. That been said, eslint treat jsx as raw jsx syntax, and use react/react-in-jsx-scope to trick the way around to check if React exist.

The proper way, as babel did, parsing jsx to React.createElement(), providing proper/standard variable referencing, is not supported by babel-eslint <= v10.x. Since it parse the code with a set of default opts, without being able to access the project's .babalrc config file.

Tricky part is, github default page for babel-eslint is actually for UNRELEASED v11.x, in which a new config field parserOption.babelOptions is added. With babel changed to a peerDep and external parse config.

This ensures that the same Babel configuration is used during both linting and compilation.

To enable different jsx transpiler for eslint, there are 3 ways

1. react/react-in-jsx-scope can be worked around with jsx pragma, it can be added as /** jsx Preact.createEl */, or add pragma as shared settings

2. In preact, the recommended way is to use alias in bundler(webpack/parcel/browersify), and jsx can easily share same support with react before bundle.

3. Use babel-eslint >= v11.x and use a shared .babelrc