为什么 eslint 和 prettier 好像在打架？

Question

我在 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，因为我可以关闭它。我不得不将其关闭以摆脱整个项目中的行，因为它想在新行上添加每个元素属性。

这是 prettierrc.js:

module.exports = {
  tabWidth: 2,
  semi: true,
  singleQuote: false,
  printWidth: 200,
};

我也不得不关闭 formatOnSave。我很确定问题出在 extends: 数组中，但我不知道为什么。我读过的所有 eslint 文档都只显示了一个插件，而不是像这样的多个插件。

如何让规则生效？

Answer 1

我在下面很幸运 -

.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",
};

为什么 eslint 和 prettier 好像在打架？

Why does it seem like eslint and prettier are fighting one another?

eslint

vue.js

prettier

vue-cli