title: VS Code project code formatting using ESLint
body: <p>I'm using VS Code for a React project and have VS Code configured to <em>format on save</em> and to <em>Require a 'prettierconfig' to format</em>. I also have the ESLint plugin enabled.</p>
  <p>That seems to mean my project's <em>.prettierrc</em> config file drives the formatting on save and <em>.eslintrc.json</em> provides linting warnings. But in at least one case (below) some formatting issues are left unresolved on save.</p>
  <p>The code below, as formatted, shows <em>eslint(indent)</em> squiggly warnings in VS Code. Upon save (<kbd>Ctrl</kbd> + <kbd>S</kbd>), some get resolved, but some do not.</p>
  <p>Specifically, the incorrect indent spacing of the first <code>&lt;div&gt;</code> gets fixed on save and that <em>eslint(indent)</em> warning disappears. However, the later <em>eslint(indent)</em> warnings do NOT get resolved on save. But they DO, however, get resolved when (on Windows) I click <kbd>Ctrl</kbd> +<kbd>Shift</kbd>+ <kbd>P</kbd>, then find and click the &quot;ESLint: Fix all auto-fixable Problems&quot;.</p>
  <p>When I save the file again those changes are reverted and the warning appears again.</p>
  <p>So &quot;format on save&quot; applies different formatting than &quot;ESLint: Fix all auto-fixable Problems&quot;. Is there a way to reconcile these? I would like <strong>all</strong> the <em>eslint(indent)</em> issues to resolve on save.</p>
  <p>Does anyone know what ESLint settings drive &quot;ESLint: Fix all auto-fixable Problems&quot;?</p>
  <pre><code>const MyModule = () =&gt; {
    ...   
  
    return (
      // &quot;eslint(indent)&quot; warning on next line gets resolved on save
    &lt;div&gt;
        {!menus.find(function(permission) {
          return permission.level === 'ADMIN';
        }) ? (
          // &quot;eslint(indent)&quot; warnings below DO NOT get resolved on save
          // ... but they DO get resolved on &quot;ESLint: Fix all auto-fixable problems&quot;
          // ... then they reappear on save
          &lt;div&gt;
            &lt;Redirect to=&quot;/&quot; /&gt;
          &lt;/div&gt;
        ) : (
          &lt;div&gt;
            &lt;Results /&gt;
          &lt;/div&gt;
        )}
      &lt;/div&gt;
    );
  };
  
  export default MyModule;
  </code></pre>
  <p>My .eslintrc.json contents:</p>
  <pre><code>{
    &quot;extends&quot;: [
      &quot;eslint:recommended&quot;,
      &quot;plugin:import/errors&quot;,
      &quot;plugin:react/recommended&quot;,
      &quot;plugin:jsx-a11y/recommended&quot;,
      &quot;prettier&quot;,
      &quot;prettier/react&quot;
    ],
    &quot;rules&quot;: {
      &quot;react/prop-types&quot;: 0,
      &quot;no-console&quot;: 1,
      &quot;no-control-regex&quot;: 0,
      &quot;indent&quot;: [&quot;warn&quot;, 2],
      &quot;quotes&quot;: [&quot;warn&quot;, &quot;single&quot;],
      &quot;space-in-parens&quot;: 1,
      &quot;prefer-destructuring&quot;: 0,
      &quot;prefer-const&quot;: 0
    },
    &quot;parser&quot;: &quot;babel-eslint&quot;,
    &quot;plugins&quot;: [&quot;react&quot;, &quot;import&quot;, &quot;jsx-a11y&quot;],
    &quot;parserOptions&quot;: {
      &quot;ecmaVersion&quot;: 2018,
      &quot;sourceType&quot;: &quot;module&quot;,
      &quot;ecmaFeatures&quot;: {
        &quot;jsx&quot;: true
      }
    },
    &quot;env&quot;: {
      &quot;es6&quot;: true,
      &quot;browser&quot;: true,
      &quot;node&quot;: true
    },
    &quot;settings&quot;: {
      &quot;react&quot;: {
        &quot;version&quot;: &quot;detect&quot;
      }
    }
  }
  </code></pre>
  <p>My .prettierrc:</p>
  <pre><code>{
    &quot;useTabs&quot;: false,
    &quot;printWidth&quot;: 120,
    &quot;tabWidth&quot;: 2,
    &quot;singleQuote&quot;: true
  }
  </code></pre>