ESLint 和 Prettier 冲突，无法为代码块禁用 Prettier

Posted 2023-02-22

【中文标题】ESLint 和 Prettier 冲突，无法为代码块禁用 Prettier

【英文标题】：ESLint and Prettier Conflict, Unable to Disable Prettier for code block

【发布时间】：2020-01-30 17:50:23

【问题描述】：

我们的项目使用 Prettier 和 ESLint。通常它们可以很好地协同工作，但我们遇到了两者冲突的问题。我不知道为什么，我不知道如何修复它，而且我无法为该行禁用 prettier，因为我得到了错误。

我们设置的相关部分

// .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,

这里是代码，添加了 cmets 以指示问题：

    const options =
      children === undefined
        ? items.map((item) => (
          // Prettier complains about the next four lines
          <option key=uuidv1() value=item>
            item
          </option>
        ))
        : children;

Prettier 希望这些行另外两个空格。

ESLint 喜欢他们在哪里。我倾向于同意 ESLint。如果我为 Prettier 自动格式化，ESLint 会抱怨并希望它改回来。我正在使用 VSCode。我们的代码库中的其他任何地方都没有发生过这样的冲突。

我尝试为这些行禁用 prettier，但 eslint 的自动禁用选项添加了// eslint-disable-next-line prettier/prettier，这会导致应用程序出错并显示Definition for rule 'prettier/prettier' was not found。由于 JSX，尝试添加 // prettier-ignore 是不可能的。

我不明白为什么 Prettier 想要 ESLint 所说的那样。我们能够修复它的唯一方法是从我们的 ESLint 配置中完全删除 'prettier/prettier': ['error'],，这似乎不合适。

建议？

2019 年 10 月 10 日更新 - 感谢用户 chazsolo 的建议，我修改了函数的格式以得到这个，它没有任何 linting 问题：

const dropDownOptions =
  children ||
  items.map((item) => (
    <option key=uuidv1() value=item.value || item>
      item.text || item
    </option>
  ));

这是解决此问题的可行解决方法，但我没有回答这个问题，因为我仍然觉得我的代码完全有效并且不应该出现这种冲突。

仅当我检查 children 之类的值是否虚假时，该解决方法也有效。我们还有另一种情况，它是匹配的，我不能以同样的方式短路它。所有这些问题都涉及到.map()的使用。

// Can't short-circuit here
var === SOME_ENUM
  ? filteredItems.map((item) => (
      // some JSX
    ))
  : filteredItems.map((item) => (
      // some other JSX
    ));

我可以在 map 函数中移动条件，但这会导致检查条件每个循环。

这个问题已经出现了很多，我可能会以这种速度在 Prettier 中为它创建一个问题，因为排除故障相当烦人。

【问题讨论】：

您反对以不同的方式编写代码吗？您可以将children 和items.map 短路，而不是使用三元组。我无法验证这是否可行？

查看我的编辑。这是一个很好的建议，适用于这种情况，但我们发现很多类似的问题都涉及到三元运算符中的 map。并非所有解决方法都是可能的或理想的。 :/ 不过，欣赏这个想法！

很高兴能帮到你，但不幸的是我不知道让 eslint/prettier 协同工作的最佳方式。在您的下一个示例中，我建议在组件上创建内联映射函数方法，然后使用 SOME_ENUM ? filteredItems.map(fn1) : filteredItems.map(fn2)。我知道这不是解决问题，而是在此期间要做的事情:)

【参考方案1】：

我的基本设置适用于 .eslintrc.json 中的 vue/ts。 你应该在插件中添加更漂亮

  "parser": "vue-eslint-parser",
  "parserOptions":  
    "parser": "@typescript-eslint/parser" 
  ,
  "plugins": ["@typescript-eslint", "prettier"],
  "rules": 
    "semi": ["error", "never"],
    "quotes": ["error", "single"],
    "prettier/prettier": "error"