为什么默认的 React 应用程序文件在启用 eslint 的情况下不是 运行？

Why does the default react app file not run with eslint enabled?

我已经通过 cmd 全局安装了 eslint，并且它还作为 vs code 中的扩展安装。之后我在 vs code 终端使用下面的命令来初始化它：

npx eslint --init

我在设置时使用了爱彼迎风格指南选项。 但是即使 运行 创建 React 应用程序时出现的默认文件也会显示多个错误 screenshot of errors.
我刚开始学习 React，不知道解决这个问题可能还需要哪些其他细节。 下面是 App.js 文件代码。

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return ( <
    div className = "App" >
    <
    header className = "App-header" >
    <
    img src = {
      logo
    }
    className = "App-logo"
    alt = "logo" / >
    <
    p >
    Edit < code > src / App.js < /code> and save to reload. <
    /p> <
    a className = "App-link"
    href = "https://reactjs.org"
    target = "_blank"
    rel = "noopener noreferrer" >
    Learn React <
    /a> <
    /header> <
    /div>
  );
}

export default App;

编辑： 导入 React 模块并添加

 "react/jsx-filename-extension": [1, { "extensions": [".js", ".JSX"] }]

在 .eslinrc.json 的规则中，但 

Line 7:5:  JSX not allowed in files with extension '.js'  react/jsx-filename-extension

尽管为我的应用程序删除并重新初始化了 eslint，但此错误仍然存​​在。

此问题已在 react-scipts:"4.0.3" 中修复，但项目中存在的 eslint 错误默认情况下不会转换为警告。您必须创建一个应包含 ESLINT_NO_DEV_ERRORS=true 标志的 .env 文件。由于此标志，您将收到 eslint 错误作为警告，而不是开发中的错误。

这个标志在生产过程中被忽略，当它们是任何 git 钩子 运行 时，这将在您尝试提交带有 eslint 错误的代码时反过来导致错误。

将 extends: ["eslint:recommended", "plugin:react/recommended"] 添加到 eslint 配置，并使用 npm install eslint-plugin-react.

安装插件