0

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

enter image description here

Improve this question
4
  • 1
    "how difficult to introduce ESLint?" answer: not. You have a bunch of errors, each pointing the exact place where the failure is and the exact type of error. If you look up the name of the rule, you'll get a very good explanation of what the rule is, why would you use it and what valid and invalid code is for it. "Does the project work properly until all indent correct?" it works. ESLint does nothing more than a static analysis of your code and reports problems. The problems depend on the rules being configured.
    – VLAZ
    Commented Mar 16, 2021 at 9:08
  • 1
    If you have rules to enforce a given style, you'll get reports of incorrect style. "How long does it take time to modify all files!???" you have 36 reported problems. Rather minor ones. If it takes you 10-15 seconds for each (it could very well be less) that's between 6 and 9 minutes to fix instances one by one. Although ESLint can autofix stylistic rule breaches (24 of those problems) thus it should take about a second or two to fix those. "Should not I use ES-lint anyway!?" I very strongly advise using a linter.
    – VLAZ
    Commented Mar 16, 2021 at 9:08
  • Thank you for answering. Why should I use a linter? Is it easier to use than ES-lint? Is it possible to run the project with warnings?
    – user14232549
    Commented Mar 21, 2021 at 15:14
  • A linter is just a general name of tools that do static analysis of code and warn you of potential errors. ESLint is one such linter. Probably the most used. The reason you want one is to avoid very easy to fix problems, like missing semicolons or accidental == instead of ===. You can run a project even with problems but that sort of defeats the purpose of solving your potential issues. I wouldn't recommend to anybody to develop without a linter as it's a waste of time. There is so much you can avoid by spending one second to fix a red underline instead of 30 minutes debugging.
    – VLAZ
    Commented Mar 21, 2021 at 15:19

1 Answer 1

Reset to default
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

Improve this answer
2
  • Thank you for answering. I understand the errors insist where I should fix but the application didn't work well after installing Eslint. I would like to turn on my project with ESlint errors.
    – user14232549
    Commented Mar 21, 2021 at 15:04
  • Have a look at eslint-plugin-only-warn
    – David Bradshaw
    Commented Mar 23, 2021 at 9:16

Not the answer you're looking for? Browse other questions tagged or ask your own question.