-1

I am started learning React JS. I am getting an unexpected error on the Clock.js file. But I don't understand why I am getting the error.

Here is a image of my project folder:

enter image description here

Error I'm getting: 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 config:

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

.prettierrc config:

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

What is the solution? Please help me to solve the problem.

Satyajit Roy
  • 517
  • 1
  • 5
  • 18
  • 3
    https://stackoverflow.com/questions/53516594/why-do-i-keep-getting-delete-cr-prettier-prettier? – Andy Oct 20 '21 at 15:34
  • 2
    Does this answer your question? [Why do I keep getting Delete 'cr' \[prettier/prettier\]?](https://stackoverflow.com/questions/53516594/why-do-i-keep-getting-delete-cr-prettier-prettier). It's complaining about the carriage return. – War10ck Oct 20 '21 at 15:35
  • Thanks. Solved. – Satyajit Roy Oct 20 '21 at 15:43

1 Answers1

-1

At the very bottom of VSCode where you see CRLF click on that and switch it to LF

yangcodes
  • 281
  • 5
  • 11