Prettier 不在 React 项目工作

我正在将我的爱彼迎 eslint 规则迁移到更漂亮的规则，但我遇到了一些问题。

这是我的 .eslintrc：

{
  "parserOptions": {
    "ecmaVersion": 6
  },
  "env": {
    "browser": true,
    "node": true
  },
  parser: "babel-eslint",
  "plugins": ["prettier", "react"],
  "rules": {
    "prettier/prettier": [
      "error",
      {
        "singleQuote": true,
        "semi": true
      }
    ]
  },
  "extends": ["eslint:recommended", "prettier", "prettier/react"]
}

通过此设置，我在 App.jsx 文件中收到以下错误：

“React”已被定义但从未使用过。 （没有未使用的变量）

“标题”已定义但从未使用。 （没有未使用的变量）

import React from 'react';
import style from './App.scss';
import Header from '../header/Header';

const App = () =>
  <div className={style.wrapper}>
    <Header />
  </div>;

export default App;

遵循的步骤（使用更漂亮的在此输入图像描述 https://i.stack.imgur.com/BM2Fs.png):

1. 单击右上角文本“JavaScript React”
2. 选择配置“JavaScript React”基于语言的设置
3. 在文件中添加此片段

    "[javascriptreact]": {
            "editor.defaultFormatter": "esbenp.prettier-vscode"
        },
        "editor.formatOnSave": true

一切准备就绪，完美运行！