title: Eslint and prettier in typescript project - disable prettier error
body: <p>I have tried all possible combinations of plugins and extends in <code>.eslint</code> so that it plays nicely with prettier. What I want is the editor (vscode) to not show prettier errors when writing code because I expect it to understand that there error will be fixed when I save the code (by fixOnSave option on vscode). 
  So, here's my eslint config which does not work: </p>
  
  <pre class="lang-js prettyprint-override"><code>{
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
      "ecmaVersion": 2018,
      "jsx": true,
      "useJSXTextNode": true
    },
    "env": {
      "browser": true,
      "jest/globals": true,
      "cypress/globals": true
    },
    "plugins": ["@typescript-eslint", "react-hooks", "jest", "prettier"],
    "extends": [
      "plugin:react/recommended",
      "airbnb",
      "plugin:cypress/recommended",
      "plugin:import/errors",
      "plugin:import/warnings",
      "plugin:import/typescript",
      "prettier/react",
      "plugin:prettier/recommended",
      "plugin:@typescript-eslint/eslint-recommended",
      "plugin:@typescript-eslint/recommended"
    ],
    "rules": {
      "prettier/prettier": "error",
      "import/extensions": [
        "error",
        "ignorePackages",
        {
          "js": "never",
          "jsx": "never",
          "ts": "never",
          "tsx": "never"
        }
      ],
      "import/no-extraneous-dependencies": [
        "error",
        {
          "devDependencies": [
            ".storybook/**",
            "**/stories/**",
            "jest.setup.js",
            "**/*.spec.[jt]s?(x)",
            "scripts/**",
            "src/test/**",
            "next.config.js",
            "cypress/**"
          ]
        }
      ],
      /**
       * @description rules of eslint official
       */
      /**
       * @bug https://github.com/benmosher/eslint-plugin-import/issues/1282
       * "import/named" temporary disable.
       */
      // "import/named": "off",
      "react/jsx-props-no-spreading": "off",
      "react/react-in-jsx-scope": "off",
      /**
       * @bug?
       * "import/export" temporary disable.
       */
      "import/export": "off",
      "import/prefer-default-export": "off", // Allow single Named-export
      "no-unused-expressions": [
        "warn",
        {
          "allowShortCircuit": true,
          "allowTernary": true
        }
      ], // https://eslint.org/docs/rules/no-unused-expressions
  
      /**
       * @description rules of @typescript-eslint
       */
      "@typescript-eslint/prefer-interface": "off", // also want to use "type"
      "@typescript-eslint/explicit-function-return-type": "off", // annoying to force return type
  
      /**
       * @description rules of eslint-plugin-react
       */
      "react/jsx-filename-extension": [
        "warn",
        {
          "extensions": [".jsx", ".tsx"]
        }
      ], // also want to use with ".tsx"
      "react/prop-types": "off", // Is this incompatible with TS props type?
  
      /**
       * @description rules of eslint-plugin-react-hooks
       */
      "react-hooks/rules-of-hooks": "error",
      "@typescript-eslint/ban-ts-ignore": "off",
      "no-console": "off",
      "react/destructuring-assignment": "off"
    }
  }
  
  </code></pre>
  
  <p>Here's the prettier config: </p>
  
  <pre class="lang-js prettyprint-override"><code>{
    "semi": true,
    "trailingComma": "all",
    "singleQuote": true,
    "printWidth": 80
  }
  </code></pre>
  
  <p>I don't really understand how these plugins play together in <code>extends</code>. Hope this is a valid question for stackoverflow :)</p>