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

Question

我在 VSCode 上安裝了 eslint 和更漂亮的擴展。 我通常使用 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 、漂亮的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"],

漂亮的.js

// prettier.config.js or .prettierrc.js
module.exports = {
  endOfLine: "auto",
};