[英]ESLint and Prettier indent conflict
I am using eslint and prettier (in vscode), and I configured the indent rule:我正在使用 eslint 和 prettier(在 vscode 中),并且我配置了缩进规则:
// .eslintrc
{
// other settings...
rules: {
"indent": ["error", 4] // 4 whitespace indent
}
}
// .prettierrc
{
// other settings...
"useTabs": false,
"tabWidth": 4 // 4 whitespace indent
}
It works well in other places.它在其他地方运行良好。 But in this case, two plugins have some conflict:但是在这种情况下,两个插件有一些冲突:
// format by prettier
const rules = func(() => {
const rule = {...};
return condition
? [
{
foo: rule.a,
bar: rule.b,
baz: rule.c
}
]
: [];
});
// correct code of eslint
const rules = func(() => {
const rule = {...};
return condition
? [
{
foo: rule.a,
bar: rule.b,
baz: rule.c
}
]
: [];
});
Prettier take 2 extra space to indent the object declare(and ]
), so eslint throw some error like Expected indentation of x spaces but found x+2
. Prettier 需要 2 个额外的空间来缩进 object 声明(和]
),所以 eslint 会抛出一些错误,例如Expected indentation of x spaces but found x+2
。
And when I try to remove the extra space, prettier will tip me Insert '··'
(two whitespace).当我尝试删除多余的空间时,prettier 会提示我Insert '··'
(两个空格)。
I read eslint and prettier documents, but it seems have no solution about this.我阅读了 eslint 和更漂亮的文档,但似乎对此没有解决方案。
I can turn off the rule in eslint to ignore this error, but have any better config to fix it?我可以关闭 eslint 中的规则以忽略此错误,但有更好的配置来修复它吗?
The problem also is mentioned on a GitHub issue . GitHub issue 也提到了这个问题。
ESLint and Prettier have different indentation implementations and they will conflict with each other. ESLint 和 Prettier 有不同的缩进实现,它们会相互冲突。
You should turn off ESLint indentation check when using prettier.使用 prettier 时应关闭 ESLint 缩进检查。
// .eslintrc
{
// other settings...
rules: {
"indent": "off"
}
}
You can make eslint accept all the prettier formatings by doing the following您可以通过执行以下操作使 eslint 接受所有更漂亮的格式
install eslint configuration for prettier为 prettier 安装 eslint 配置
npm install eslint-config-prettier
And include it in the extends
option in the file .eslintrc.js
并将其包含在文件.eslintrc.js
的extends
选项中
extends: [
...,
"prettier",
],
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.