how difficult to introduce ESLint?

Question

I am studying react with this tutorial. https://github.com/ayush221b/MarioPlan-react-redux-firebase-app

I tried to add es-lint to the project. After installing I restarted my project by yarn start Many errors happened. Failed to compiler

import { BrowserRouter,Switch,Route } from 'react-router-dom'

Line 1:9: There should be no space after '{' object-curly-spacing What???? Does the project work properly until all indent correct? How long does it take time to modify all files???? Should not I use ES-lint anyway!?

src/App.js
  Line 1:9:    There should be no space after '{'              object-curly-spacing
  Line 1:24:   There should be no space before ','             comma-spacing
  Line 1:24:   A space is required after ','                   comma-spacing
  Line 1:31:   A space is required after ','                   comma-spacing
  Line 1:37:   There should be no space before '}'             object-curly-spacing
  Line 1:63:   Missing semicolon                               semi
  Line 2:48:   Missing semicolon                               semi
  Line 3:57:   Missing semicolon                               semi
  Line 4:66:   Missing semicolon                               semi
  Line 5:46:   Missing semicolon                               semi
  Line 6:46:   Missing semicolon                               semi
  Line 7:64:   Missing semicolon                               semi
  Line 8:60:   Missing semicolon                               semi
  Line 9:58:   Missing semicolon                               semi
  Line 11:1:   Missing JSDoc comment                           require-jsdoc
  Line 13:5:   'React' must be in scope when using JSX         react/react-in-jsx-scope
  Line 14:7:   'React' must be in scope when using JSX         react/react-in-jsx-scope
  Line 15:9:   'React' must be in scope when using JSX         react/react-in-jsx-scope
  Line 16:9:   'React' must be in scope when using JSX         react/react-in-jsx-scope
  Line 17:1:   Expected indentation of 10 spaces but found 12  indent
  Line 17:13:  'React' must be in scope when using JSX         react/react-in-jsx-scope
  Line 18:1:   Expected indentation of 10 spaces but found 12  indent
  Line 18:13:  'React' must be in scope when using JSX         react/react-in-jsx-scope
  Line 19:1:   Expected indentation of 10 spaces but found 12  indent
  Line 19:13:  'React' must be in scope when using JSX         react/react-in-jsx-scope
  Line 20:1:   Expected indentation of 10 spaces but found 12  indent
  Line 20:13:  'React' must be in scope when using JSX         react/react-in-jsx-scope
  Line 21:1:   Expected indentation of 10 spaces but found 12  indent
  Line 21:13:  'React' must be in scope when using JSX         react/react-in-jsx-scope
  Line 21:63:  Trailing spaces not allowed                     no-trailing-spaces
  Line 22:1:   Expected indentation of 10 spaces but found 12  indent
  Line 22:13:  'React' must be in scope when using JSX         react/react-in-jsx-scope
  Line 22:64:  Trailing spaces not allowed                     no-trailing-spaces
  Line 23:1:   Expected indentation of 10 spaces but found 12  indent
  Line 23:13:  'React' must be in scope when using JSX         react/react-in-jsx-scope
  Line 23:60:  Trailing spaces not allowed                     no-trailing-spaces

Answer 1

You already have it working, those are eslint warnings, run eslint with the —fix flag and most of them will automagically get resolved. It's then up to you to learn about what the other errors mean by looking them up in the eslint docs which will show you how to fix them

Doing this will make you a better coder