gpt4 book ai didi

javascript - ESLint 和 Prettier 冲突,无法为代码块禁用 Prettier

转载 作者:行者123 更新时间:2023-12-03 14:55:31 28 4
gpt4 key购买 nike

我们的项目使用 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 想要这些线条用于另外两个空格。

Screenshot of errors

ESLint 喜欢他们在哪里。我倾向于同意 ESLint。如果我为 Prettier 自动格式化,ESLint 会提示并希望它改回来。我正在使用 VSCode。我们的代码库中的其他任何地方都没有发生过这样的冲突。

我尝试为这些行禁用更漂亮,但是使用 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
));

我可以在 map 函数中移动条件,但这会导致每个循环都检查条件。

这个问题已经出现了很多,我可能会以这种速度在 Prettier 中为它创建一个问题,因为排除故障相当烦人。

最佳答案

我的基本设置适用于 .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"
}
}

关于javascript - ESLint 和 Prettier 冲突,无法为代码块禁用 Prettier,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58184748/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com