How to enable support for JSX?

[trusktr]

What version of TypeScript are you using?

2.9.1

What version of typescript-eslint-parser are you using?

17.0.1

(compatible with ts version, as I don't get the arning in the console)

What code were you trying to parse?

const div = (
    <div>
        <span className="foo">hello</span>
    </div>
)

What did you expect to happen?

It should work with JSX.

What happened?

❯ eslint -c ./.eslintrc.js test.ts

/Users/trusktr/test.ts
  3:8  error  Parsing error: '>' expected

✖ 1 problem (1 error, 0 warnings)

(3:8 is right at the beginning of className)

I read the README, and I don't see any mention of JSX or how to turn on support for it.

eslintrc

module.exports = {
    extends: ['prettier'],
    parser: 'babel-eslint',
    parserOptions: {
        sourceType: 'module',
    },

    overrides: [
        {
            files: ['*.ts', '*.tsx'],
            parser: 'typescript-eslint-parser',
        },
    ],
}

I am not trying to lint anything, I just want to check syntax errors (hence the simple eslintrc).

[trusktr]

Oooooooooooooooooh, I need to add the ecmaFeatures to parserOptions:

module.exports = {
    extends: ['prettier'],
    parser: 'babel-eslint',
    parserOptions: {
        sourceType: 'module',
    },

    overrides: [
        {
            files: ['*.ts', '*.tsx'],
            parser: 'typescript-eslint-parser',
            parserOptions: {
                ecmaFeatures: {
                    jsx: true,
                },
            },
        },
    ],
}

This wasn't very clear. Maybe the readme should cover which options is supports compared to other parsers, because it wasn't obvious that I should assume these parser options are the same as (for example) babel-eslint.

[trusktr]

PR for updating README: https://github.com/eslint/typescript-eslint-parser/pull/530