CODEWITHSUNDEEP
reactjsmaterial-uieslintprettier
BoGoodSki
BoGoodSki

Reputation: 123

How do I make ESlint less stringent while working with Prettier in a React project (with Material-UI)?

Update

I added a .eslintc file to the root of my client app and, in it, added this JS Object: 

{
    "extends": "react-app",
    "plugins": ["prettier"]    
}

That removes the linting problems from displaying in my IDE but still leaves Prettier in a bad state; that is, when I format, Prettier adjusts my code in a way that produces a ton of errors.

I think I need to next adjust the config rules that are guiding how my Prettier plugin functions. Any help with that would be appreciated. My ultimate goal is to get Prettier/ESLint to function as they do originally when shipped with Create React App. Thanks for the help so far!

End Update

I've been building a project that is using React and Material-UI on the front-end. I'm using VSCode as my IDE with ESlint and Prettier. I had originally initiated the front-end of the project with Create React App.

All had been going well until I did something - and I have no idea what - to make my ESLint become super stringent. It's now presenting problems all over, whereas the same code previously had zero linting problems, and no changes to the code have been made.

I've also been using Prettier and now, because of these linting problems, when I format with Prettier, the code adjusts to address the Linting problems. Which causes actual errors.

I've been searching all over. I installed ESlint Plugins, been digging around, looking for (and creating .eslintrc.json) files. Nothing seems to work. It is making work on this project much more difficult.

What did I do? How do I fix it?

Thank you.

Linting problems that are now being indicated

Upvotes: 1

Views: 600

Answers (1)

Ankit Manchanda
Ankit Manchanda

Reputation: 582

Add or Update your .eslintrc.js file

  • set indent off
  • set globals false if it (definition not found)

Hope it helps

module.exports = {
    rules: {
        indent: 'off',
        'new-cap': [0]
    },
    globals: {
        db: false,
        mongoose: false,
        response: false,
        offline: false
    }
};

Upvotes: 1

Related Questions