ESLint 和 Prettier 沖突，無法為代碼塊禁用 Prettier

Question

我們的項目使用 Prettier 和 ESLint。 通常它們可以很好地協同工作，但我們遇到了兩者沖突的問題。 我不知道為什么，我不知道如何修復它，而且我無法禁用更漂亮的線路，因為我得到了錯誤。

我們設置的相關部分

// .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。 我們的代碼庫中的其他任何地方都沒有發生過這樣的沖突。

我嘗試為這些行禁用更漂亮，但是使用 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 的建議，我修改了 function 的格式以得到這個，它沒有任何掉毛問題：

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 function 中移動條件，但這會導致每個循環都檢查條件。

這個問題已經出現了很多，我可能會以這種速度在 Prettier 中為它創建一個問題，因為解決問題很煩人。

Answer 1

我的基本設置適用於 vue/ts in.eslintrc.json。 你應該在插件中添加更漂亮

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