ESLint 和 Prettier 冲突，无法禁用 Prettier 对代码块的格式化

Question

我们的项目使用 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,

以下是代码，已添加注释以指示问题：

    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`，这会导致应用程序出错，并显示“未找到规则'prettier/prettier'的定义”。由于JSX的原因，尝试添加 `// prettier-ignore` 是不可能的。

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

有什么建议吗？

更新10/10/19 - 感谢用户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中创建一个问题，因为排除故障变得非常烦人。

- cdpautsch

---

你是否反对以稍微不同的方式编写代码？可以使用短路运算符代替三元运算符来处理“children”和“items.map”。我无法验证那是否有效？ - chazsolo

看了我的修改。这是一个好建议，对于这种情况很有效，但我们发现有很多类似的问题涉及到在三元运算符中使用map函数。并非所有的解决方法都是可行或理想的。:/ 尽管如此，感谢这个想法！ - cdpautsch

很高兴能帮到你，但不幸的是我不知道让eslint/prettier良好协作的最佳方法。在您的下一个示例中，我建议将内联映射函数作为组件上的方法进行定义，然后像这样使用：SOME_ENUM ? filteredItems.map(fn1) : filteredItems.map(fn2)。我知道这并没有解决问题，但可以在过渡期间做些什么 :) - chazsolo

Answer 1

我基本的vue/ts设置在.eslintrc.json文件中已经很好地运行了。你应该在插件中添加prettier。

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

- bravohex