[英]Why does it seem like eslint and prettier are fighting one another?
I have eslint and prettier extensions installed on VSCode.我在 VSCode 上安装了 eslint 和更漂亮的扩展。 I usually use prettier to fix up and format my HTML.
我通常使用 prettier 来修复和格式化我的 HTML。 I scaffolded a
vue-cli
project which installed several dev-dependancies for eslint and prettier:我搭建了一个
vue-cli
项目,该项目为 eslint 和 prettier 安装了几个开发依赖项:
"devDependencies": {,
"@vue/cli-plugin-eslint": "~4.5.13",
"@vue/eslint-config-prettier": "^6.0.0",
"eslint": "^7.31.0",
"eslint-plugin-prettier": "^3.4.0",
"eslint-plugin-vue": "^7.14.0",
"prettier": "^2.3.2",
}
As I worked on this project, I had rules that I wanted to turn off;当我在这个项目上工作时,我想关闭一些规则; mainly eslint
no-unexpected-multiline
, prettier printWidth
and some others I've noticed as I work.主要是 eslint
no-unexpected-multiline
、漂亮的printWidth
以及我在工作时注意到的其他一些。 But anytime I try to add these to either .prettierrc.js
or .eslintrc.js
(the prettier config file I had to manually create) it seems to just ignore them for the most part.但是每当我尝试将这些添加到
.prettierrc.js
或.eslintrc.js
(我必须手动创建的更漂亮的配置文件)时,它似乎在很大程度上忽略了它们。 I have no idea why.我不知道为什么。 It also ignores any comments I make for ignoring next lines and entire files (which I don't use often but is related), such as
// eslint-disable-next-line prettier/prettier
.它还忽略我为忽略下一行和整个文件(我不经常使用但相关)所做的任何评论,例如
// eslint-disable-next-line prettier/prettier
。
Here's what my .eslintrc.js looks like:这是我的 .eslintrc.js 的样子:
module.exports = {
root: true,
env: {
node: true,
},
extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
parserOptions: {
parser: "babel-eslint",
},
rules: {
"prettier/prettier": "warn",
"no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
"no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
"no-unexpected-multiline": "error",
},
};
The only thing it seems to listen to under rules is prettier/prettier
because I can turn if off.它似乎在规则下唯一听的东西是
prettier/prettier
因为如果关闭我可以关闭。 I've had to turn it off to get rid of the lines all over my project because it wants to add each element property on new lines.我不得不关闭它以摆脱项目中的所有行,因为它想在新行上添加每个元素属性。
Here's the prettierrc.js
:这是
prettierrc.js
:
module.exports = {
tabWidth: 2,
semi: true,
singleQuote: false,
printWidth: 200,
};
I've also had to turn off formatOnSave
.我还不得不关闭
formatOnSave
。 I'm pretty sure the issue lies in the extends:
array but I don't know why.我很确定问题出在
extends:
数组上,但我不知道为什么。 All documentation for eslint I've read shows only a single plugin and not multiple like this has.我读过的所有 eslint 文档都只显示了一个插件,而不是像这样的多个插件。
How can I get rules to work?我怎样才能让规则发挥作用?
I've had luck with the below -我在下面很幸运 -
.eslintrc.js .eslintrc.js
extends: ["plugin:vue/essential", "eslint:recommended", "prettier"],
plugins: ["prettier"],
In another project I am using this -在另一个项目中,我正在使用这个 -
.eslintrc.js .eslintrc.js
extends: [
"plugin:vue/essential",
"eslint:recommended",
"prettier",
"plugin:prettier/recommended",
],
plugins: ["prettier"],
prettierrc.js漂亮的.js
// prettier.config.js or .prettierrc.js
module.exports = {
endOfLine: "auto",
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.