我们的项目使用 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
,这会导致应用程序出错Definition for rule 'prettier/prettier' was not found
。尝试添加// prettier-ignore
由于 JSX,这是不可能的。
我不明白为什么 Prettier 想要 ESLint 所说的东西。我们能够修复它的唯一方法是删除'prettier/prettier': ['error'],
完全来自我们的 ESLint 配置,这似乎不合适。
建议?
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
));
我可以在地图函数内移动条件,但这会导致检查条件每个循环.
这个问题已经出现了lot,并且我可能会以这种速度在 Prettier 中为其创建一个问题,因为排除故障相当烦人。