Notes-04-05-eslint-and-babel

Eslint

• add env entry for different global environment variables, and module system

• add for each rule, basic switches are off, warn issue with exit(0) , error issue with exit(1)

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(04-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-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 NewReact.createEl */, or add pragma as shared settings

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

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

Babel

For compatibility reasons, .babelrc is an alias for .babelrc.json

Use babel.config.js is a recommended way to do config cos it's more flexible, while cache is harder so explicit api.cache() setup is forced