title: Eslint & Prettier conflicts
body: <p>I am new in eslint and prettier. I have this simple example, when i use  &quot;tabWidth&quot;: 4 in .prettierrc.json file. i saw error.I order to not have conflicts between them, i installed the eslint-config-prettier. But i still get errors.</p>
  <p><strong>Files:</strong></p>
  <p><strong>1. App.js</strong></p>
  <pre><code>import React, { useState } from &quot;react&quot;;
  function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  
  const lea = 15;
  
  const loginHandler = (email, password) =&gt; {
      setIsLoggedIn(true);
  };
  
  const logoutHandler = () =&gt; {
      setIsLoggedIn(false);
  };
  
  return (
      &lt;&gt;
          &lt;MainHeader isAuthenticated={isLoggedIn} onLogout={logoutHandler} /&gt;
          &lt;main&gt;
              {!isLoggedIn &amp;&amp; &lt;Login onLogin={loginHandler} /&gt;}
              {isLoggedIn &amp;&amp; &lt;Home onLogout={logoutHandler} /&gt;}
          &lt;/main&gt;
      &lt;/&gt;
  );}
  </code></pre>
  <p>export default App;</p>
  <p><strong>2. .eslintrc.json</strong></p>
  <pre><code>{
  &quot;env&quot;: {
      &quot;browser&quot;: true,
      &quot;es2021&quot;: true
  },
  &quot;extends&quot;: [
      &quot;plugin:react/recommended&quot;,
      &quot;airbnb&quot;,
      &quot;plugin:prettier/recommended&quot;,
      &quot;eslint:recommended&quot;,
      &quot;prettier&quot;
  ],
  &quot;parserOptions&quot;: {
      &quot;ecmaFeatures&quot;: {
          &quot;jsx&quot;: true
      },
      &quot;ecmaVersion&quot;: 12,
      &quot;sourceType&quot;: &quot;module&quot;
  },
  &quot;parser&quot;: &quot;babel-eslint&quot;,
  &quot;plugins&quot;: [&quot;react&quot;, &quot;prettier&quot;],
  &quot;rules&quot;: {
      &quot;prettier/prettier&quot;: [&quot;error&quot;]
  }}
  </code></pre>
  <p><strong>3. .prettierrc.json</strong></p>
  <pre><code>{
  &quot;arrowParens&quot;: &quot;always&quot;,
  &quot;bracketSpacing&quot;: true,
  &quot;htmlWhitespaceSensitivity&quot;: &quot;css&quot;,
  &quot;insertPragma&quot;: false,
  &quot;jsxBracketSameLine&quot;: false,
  &quot;jsxSingleQuote&quot;: false,
  &quot;printWidth&quot;: 86,
  &quot;proseWrap&quot;: &quot;preserve&quot;,
  &quot;quoteProps&quot;: &quot;preserve&quot;,
  &quot;requirePragma&quot;: false,
  &quot;semi&quot;: true,
  &quot;singleQuote&quot;: false,
  &quot;tabWidth&quot;: 4,
  &quot;trailingComma&quot;: &quot;es5&quot;,
  &quot;useTabs&quot;: false,
  &quot;vueIndentScriptAndStyle&quot;: false}
  </code></pre>
  <p><strong>4. package.json</strong></p>
  <pre><code>{
  &quot;name&quot;: &quot;react-complete-guide&quot;,
  &quot;version&quot;: &quot;0.1.0&quot;,
  &quot;private&quot;: true,
  &quot;dependencies&quot;: {
      &quot;@testing-library/jest-dom&quot;: &quot;^5.11.6&quot;,
      &quot;@testing-library/react&quot;: &quot;^11.2.2&quot;,
      &quot;@testing-library/user-event&quot;: &quot;^12.5.0&quot;,
      &quot;react&quot;: &quot;^17.0.1&quot;,
      &quot;react-dom&quot;: &quot;^17.0.1&quot;,
      &quot;react-scripts&quot;: &quot;4.0.1&quot;,
      &quot;web-vitals&quot;: &quot;^0.2.4&quot;
  },
  &quot;scripts&quot;: {
      &quot;start&quot;: &quot;react-scripts start&quot;,
      &quot;build&quot;: &quot;react-scripts build&quot;,
      &quot;test&quot;: &quot;react-scripts test&quot;,
      &quot;eject&quot;: &quot;react-scripts eject&quot;
  },
  &quot;eslintConfig&quot;: {
      &quot;extends&quot;: [
          &quot;react-app&quot;,
          &quot;react-app/jest&quot;
      ]
  },
  &quot;browserslist&quot;: {
      &quot;production&quot;: [
          &quot;&gt;0.2%&quot;,
          &quot;not dead&quot;,
          &quot;not op_mini all&quot;
      ],
      &quot;development&quot;: [
          &quot;last 1 chrome version&quot;,
          &quot;last 1 firefox version&quot;,
          &quot;last 1 safari version&quot;
      ]
  },
  &quot;devDependencies&quot;: {
      &quot;eslint&quot;: &quot;^7.32.0&quot;,
      &quot;eslint-config-airbnb&quot;: &quot;^18.2.1&quot;,
      &quot;eslint-config-prettier&quot;: &quot;^8.3.0&quot;,
      &quot;eslint-plugin-import&quot;: &quot;^2.24.2&quot;,
      &quot;eslint-plugin-jsx-a11y&quot;: &quot;^6.4.1&quot;,
      &quot;eslint-plugin-prettier&quot;: &quot;^4.0.0&quot;,
      &quot;eslint-plugin-react&quot;: &quot;^7.26.1&quot;,
      &quot;eslint-plugin-react-hooks&quot;: &quot;^4.2.0&quot;,
      &quot;prettier&quot;: &quot;^2.4.1&quot;
  }}
  </code></pre>
  <p><strong>5. error image</strong>
  <a href="https://i.stack.imgur.com/Qlp2C.png" rel="nofollow noreferrer">enter image description here</a></p>