How to properly set up ESLint, Prettier in 2020?

Question

JavaScript

Hello. I read everything I found on this topic in Google. Almost all of them are outdated or do not suit me. Here's what I got when I collected all the information. I'm building an app with create-react-app . Here is what I have in my .eslintrc.json file :

{
  "env": {
    "browser": true,
    "es6": true
  },
  "extends": [
    "airbnb",
    "plugin:jsx-a11y/recommended",
    "prettier",
    "prettier/react"
  ],
  "plugins": ["react", "jsx-a11y", "prettier"], 
  "globals": {
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly"
  },
  "parser": "babel-eslint",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 2018,
    "sourceType": "module"
  },
  "rules": {
    "prettier/prettier": "error",
    "react/jsx-filename-extension": [
      1,
      {
        "extensions": [".js"]
      }
    ],
    "no-shadow": "off",
    "react/state-in-constructor": [2, "never"]
  }
}

And here's what's in the VSCode settings :

{
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.formatOnSave": false // не понятно для чего эта строка
  },
  "editor.formatOnPaste": false,
  "javascript.format.enable": false,
  "javascript.validate.enable": false,
  "files.associations": {
    "*.jsx": "javascriptreact",
    "*.js": "javascriptreact"
  },
  "emmet.syntaxProfiles": {
    "javascript": "jsx"
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "prettier.disableLanguages": ["js"],
}

And everything seems to be fine. It shows a syntax error. Formats when saving, etc. But problems arise in the following scenario:
In this file, it shows me an error that I need to remove the quotes from the properties:

To remove this warning, I click Quick Fix and select Disable prettier/prettier for the entire file . It adds /* eslint-disable prettier/prettier */ to the top of the file and the warning is actually gone. But when saving the file, the quotes are still removed and the following error occurs in the browser:

Answer 1

It looks like the eslint config was picked up by VS Code, but not by create-react-app. If prettier errors do not appear in the browser, then most likely they are. It is necessary to look towards the Advanced configuration , specifically the flag "EXTEND_ESLINT"