我在 VSCode 上安装了 eslint 和 prettier 扩展。我通常使用 prettier 来修复和格式化我的 HTML。我搭建了一个 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",
}
当我从事这个项目时,我有一些想要关闭的规则;主要是 eslint no-unexpected-multiline
、prettier printWidth
以及我在工作时注意到的其他一些。但每当我尝试将这些添加到 .prettierrc.js
或 .eslintrc.js
(我必须手动创建的更漂亮的配置文件)时,它似乎都会忽略它们大部分。我不知道为什么。它还会忽略我为忽略下一行和整个文件(我不经常使用但相关)所做的任何注释,例如 //eslint-disable-next-line prettier/prettier
。
这是我的 .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",
},
};
它在规则下似乎唯一听的是prettier/prettier
,因为我可以关闭if。我必须将其关闭才能删除整个项目中的行,因为它想要在新行上添加每个元素属性。
这是 prettierrc.js
:
module.exports = {
tabWidth: 2,
semi: true,
singleQuote: false,
printWidth: 200,
};
我还必须关闭formatOnSave
。我很确定问题出在 extends:
数组中,但我不知道为什么。我读过的所有 eslint 文档都只显示了一个插件,而不是像这样的多个插件。
如何让规则发挥作用?
最佳答案
我很幸运地做到了以下几点 -
.eslintrc.js
extends: ["plugin:vue/essential", "eslint:recommended", "prettier"],
plugins: ["prettier"],
在另一个项目中我正在使用这个 -
.eslintrc.js
extends: [
"plugin:vue/essential",
"eslint:recommended",
"prettier",
"plugin:prettier/recommended",
],
plugins: ["prettier"],
prettierrc.js
// prettier.config.js or .prettierrc.js
module.exports = {
endOfLine: "auto",
};
关于vue.js - 为什么 eslint 和 prettier 看起来像是在互相争斗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68549940/