我们的项目使用 Prettier 和 ESLint。通常它们可以很好地协同工作,但我们遇到了一个冲突问题。我不知道原因,也无法解决问题,同时我不能禁用 Prettier 因为这会导致错误。以下是我们配置文件的相关部分:
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问题:
这是一个可行的解决方法,但是我不会回答这个问题,因为我仍然觉得我的代码完全有效,不应该出现这种冲突。
此解决方法只适用于检查类似于“children”的值是否为假。我们还有另一个条件符合要求,无法以相同方式短路。 所有这些问题都涉及使用“map()”函数。
// .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中创建一个问题,因为排除故障变得非常烦人。
SOME_ENUM ? filteredItems.map(fn1) : filteredItems.map(fn2)
。我知道这并没有解决问题,但可以在过渡期间做些什么 :) - chazsolo