为什么我在 React JS 中遇到意外错误 [重复]

Question

我开始学习 React JS。我在 Clock.js 文件中遇到意外错误。但我不明白为什么会出现错误。

这是我的项目文件夹的图片：

我得到的错误：Delete ␍ eslintprettier/prettier

index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

app.js：

import React from 'react';
import Clock from './components/Clock';

function App() {
  return (
    <div>
      <Clock />
    </div>
  );
}

export default App;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Clock.js：

import React from 'react';

class Clock extends React.Component {
  render() {
    return (
      <h1>
        <span>Time: {new Date().toLocaleTimeString()}</span>
      </h1>
    );
  }
}

export default Clock;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

.eslintrc 配置：

{
  "parserOptions": {
  "ecmaVersion": 12,
  "sourceType": "module",
  "ecmaFeatures": {
    "jsx": true
    }
  },
  "extends": ["plugin:prettier/recommended"],
  
  "plugins": ["prettier"],
  
  "rules": {
    "prettier/prettier": "error"
  }
}

.prettierrc 配置：

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "useTabs": false
}

解决办法是什么？请帮我解决问题。

Answer 1

在您看到CRLF 的VSCode 的最底部单击它并将其切换到LF