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

Question

I have eslint and prettier extensions installed on VSCode. I usually use prettier to fix up and format my HTML. I scaffolded a vue-cli project which installed several dev-dependancies for eslint and 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. 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. 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 .

Here's what my .eslintrc.js looks like:

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. 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 :

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

I've also had to turn off formatOnSave . I'm pretty sure the issue lies in the extends: array but I don't know why. All documentation for eslint I've read shows only a single plugin and not multiple like this has.

How can I get rules to work?

Answer 1

I've had luck with the below -

.eslintrc.js

  extends: ["plugin:vue/essential", "eslint:recommended", "prettier"],
  plugins: ["prettier"],

In another project I am using this -

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