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

Question

I have globally installed eslint via cmd and its also installed as an extension in vs code. After that I used the following command in the vs code terminal to initialize it:

npx eslint --init 

I used the Airbnb style guide option while setting it up. But even running the default file that comes when you create a react app multiple errors are shown like this screenshot of errors .
I have just started learning React, and don't know what other details might be needed to solve this issue. Below is the App.js file code.

 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;

Edit: Imported React module and added

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

in rules of.eslinrc.json but

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

this error is still there, despite deleting and reinitializing eslint for my app.

Answer 1

This issue has been fixed in the react-scipts:"4.0.3" but, the eslint errors present in the project are not converted to warnings by default. You have to create an.env file which should contain a ESLINT_NO_DEV_ERRORS=true flag. Due to this flag, you will receive the eslint errors as warnings and not as errors in the development.

This flag is ignored during production and when they are any git hooks running, which will in turn cause an error when you are trying to commit the code with an eslint error in it.

Answer 2

Add extends: ["eslint:recommended", "plugin:react/recommended"] to the eslint config, and install the plugin using npm install eslint-plugin-react .