为什么默认的 react app 文件在启用 eslint 的情况下无法运行？

Question

我已经通过 cmd 全局安装了 eslint，它也作为 vs 代码的扩展安装。 之后，我在 vs code 终端中使用以下命令对其进行初始化：

npx eslint --init 

我在设置时使用了 Airbnb 风格指南选项。 但是，即使运行创建 React 应用程序时附带的默认文件，也会显示多个错误，如错误截图所示。
我刚开始学习 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，但此错误仍然存在。

Answer 1

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

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

Answer 2

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