title: ESLint and Prettier Conflict, Unable to Disable Prettier for code block
body: <p>Our project is using Prettier and ESLint. Normally they work fine together, but we're running into an issue where the two are in conflict. I don't know why, I can't figure out how to fix it, and I can't disable prettier for the line because I get errors.</p>
  
  <p>Relevant parts of our settings</p>
  
  <pre class="lang-js prettyprint-override"><code>// .prettierrc
    "printWidth": 80,
    "tabWidth": 2,
    "useTabs": false,
    "semi": true,
    "singleQuote": true,
    "trailingComma": "es5",
    "arrowParens": "always"
  
  // eslintrc.js
    extends: ['airbnb', 'eslint-config-prettier', 'prettier/react'],
    plugins: [
      'eslint-plugin-prettier',
      'redux-saga',
      'react',
      'react-hooks',
      'jsx-a11y',
    ],
    rules: {
      'prettier/prettier': ['error'],
      indent: [
        2,
        2,
        {
          SwitchCase: 1,
        },
      ],
      'max-len': 0,
  </code></pre>
  
  <p>And here is the code, with comments added to indicate the issues:</p>
  
  <pre class="lang-js prettyprint-override"><code>    const options =
        children === undefined
          ? items.map((item) =&gt; (
            // Prettier complains about the next four lines
            &lt;option key={uuidv1()} value={item}&gt;
              {item}
            &lt;/option&gt;
          ))
          : children;
  </code></pre>
  
  <p>Prettier wants those lines intended another two spaces.</p>
  
  <p><a href="https://i.stack.imgur.com/2mVbP.png" rel="noreferrer"><img src="https://i.stack.imgur.com/2mVbP.png" alt="Screenshot of errors"></a></p>
  
  <p>ESLint likes them where they are. I'm inclined to agree with ESLint. If I auto-format for Prettier, ESLint complains and wants it changed back. I am using VSCode. We haven't had such a conflict anywhere else in our code base.</p>
  
  <p>I tried just disabling prettier for those lines, but the auto-disable option with eslint adds <code>// eslint-disable-next-line prettier/prettier</code>, which causes the app to error out with <code>Definition for rule 'prettier/prettier' was not found</code>. Trying to add <code>// prettier-ignore</code> is impossible because of the JSX.</p>
  
  <p>I don't understand why Prettier wants what ESLint says it wants. The only way we've been able to fix it is by removing <code>'prettier/prettier': ['error'],</code> from our ESLint config entirely, which doesn't seem appropriate.</p>
  
  <p>Suggestions?</p>
  
  <p><em>Update 10/10/19</em> - Thanks to a suggestion by user chazsolo, I modified how the function was formatted to get this, which doesn't have any linting issues:</p>
  
  <pre class="lang-js prettyprint-override"><code>const dropDownOptions =
    children ||
    items.map((item) =&gt; (
      &lt;option key={uuidv1()} value={item.value || item}&gt;
        {item.text || item}
      &lt;/option&gt;
    ));
  </code></pre>
  
  <p>This is a viable workaround for this problem, but I'm leaving this question unanswered, as I still feel like my code is entirely valid and shouldn't get this conflict.</p>
  
  <p>The workaround also only works if I'm checking a value like <code>children</code> for being falsey. We have another condition where it is a match, and I can't short-circuit it in the same way. All of these problems involve the use of <code>.map()</code>.</p>
  
  <pre class="lang-js prettyprint-override"><code>// Can't short-circuit here
  var === SOME_ENUM
    ? filteredItems.map((item) =&gt; (
        // some JSX
      ))
    : filteredItems.map((item) =&gt; (
        // some other JSX
      ));
  </code></pre>
  
  <p>I can move the condition inside the map function, but that leads to checking the condition <em>every loop</em>.</p>
  
  <p>This problem has cropped up a <em>lot</em>, and I'll probably be creating an issue in Prettier for it at this rate, because it's rather annoying to troubleshoot.</p>