> For the complete documentation index, see [llms.txt](https://notes.lirenxn.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://notes.lirenxn.com/featured/deep-dive-eslint/eslint-with-jsx.md).

# 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](https://github.com/yannickcr/eslint-plugin-react/blob/80f3826dd854796d25244ad34782b9147b90db1d/lib/util/pragma.js#L45), it can be added as `/** jsx Preact.createEl */`, or add pragma as [shared settings](https://eslint.org/docs/user-guide/configuring#adding-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`