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;

漂亮的人希望这些行再加上两个空格。

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'],，这似乎不合适。

建议？

更新10/10/19 -感谢用户chazsolo的建议，我修改了如何格式化函数以实现此目的，而没有任何掉毛问题：

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中为其创建一个问题，因为它很麻烦进行故障排除。

Answer 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"
  }
}

ESLint和更漂亮的冲突，无法为代码块禁用更漂亮

1 个答案: