[quotes] Insert unexpected quotes when using this plugin and format code by prettier.

[zhengxiaoyao0716]

Repro

{
  "extends": [
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier"
  ],
  "rules": {
    "quotes": ["error", "single"]
  }
}

import React from 'react';

const test1 = (
  <>
    <div />
  </>
);

const test2 = (
  <div>
    <div />
  </div>
);

Expected Result
All works well.

Actual Result
Each time format the code, then it would insert unexpected quotes between <><div/></>, looks like this:

Additional Info
To reproduce it, maybe we should notice that:

1. we must both using plugin:react/recommended @typescript-eslint/eslint-plugin and prettier.
2. quotes rule must be set, the inserted quotes would be ' if quotes rule set to single, and be " if set to double.
3. it would only insert unexpected quotes between <></> (short syntax of fragments), as the above code test1 shows.
4. it would only happend in .tsx files, I tried jsx but everything works well inconceivable.

Versions

package	version
@typescript-eslint/eslint-plugin	1.9.0
@typescript-eslint/parser	1.9.0
TypeScript	3.4.5
ESLint	5.16.0
node	v8.11.3
npm	6.8.0

[bradzacher]

what command are you running to cause this to happen?
eslint --fix? prettier --write?

[zhengxiaoyao0716]

I'm using VSCode and format codes by Prettier plugin.
I have tried both eslint --fix and prettier --write, but the problem not appeared, I'm sorry but I could only reproduced it by the VSCode plugin, maybe this is a problem of that plugin?

[bradzacher]

Are you using the eslint integration option within the plugin? if so then yes, that is known to be broken.

[zhengxiaoyao0716]

Yes, I set the "prettier.eslintIntegration" option of the plugin setting to true. then what should I do now?

[bradzacher]

You should not use that option.
It's broken because the plugin uses ESLint v4 (and is hard locked to v4). This plugin requires v5.

Subscribe to prettier/prettier-vscode#763 and wait for a fix.

Until then you can work around this by installing the eslint extension and turning on the eslint extension's autofix on save setting.