search

eslint / typescript-eslint-parser

An ESLint custom parser which leverages TypeScript ESTree to allow for ESLint to lint TypeScript source code.
Other
915 stars 92 forks source link

Known issue: Ambiguous syntax in JSX context #517

Closed JamesHenry closed 5 years ago

JamesHenry commented 5 years ago

In this parser we have to use the parserOptions.jsx flag to determine whether or not to configure the actual TypeScript compiler to parse the source as JSX.

When the TypeScript compiler parses certain syntax in "JSX mode" it is ambiguous and could be a JSXElement as far as it's concerned.

This is the same reason you cannot use the <> syntax for type assertions in TSX files, you have to use the as syntax.

Essentially then, if you want to have jsx: true, you have to accept that you are always in "JSX mode" in TypeScript, working in the same way as if all of your source files were .tsx, and so you cannot use any ambiguous constructs.

Right now the DX is not at all clear when you have configured jsx: true in your ESLint config and then use ambiguous TypeScript constructs. You will just end up with a random parse error from the TypeScript compiler.

Ideally, we would be able to provide clearer error messaging, or infer the jsx setting itself from the file extension (.ts vs .tsx)

You can usually reproduce the behaviour using the TypeScript compiler directly on: https://astexplorer.net/

kaicataldo commented 5 years ago

Ideally, I think we'd want to set jsx based on the file extension when it's available and to rely on the current behavior when it's not (i.e. when using ESLint's --stdin flag, though I believe in this case a user can still use --stdin-filename to specify a filename).