Disable eslint-prettier with vue on annoying vue's html formatting

Question

<template>
    <div class="d-flex flex-grow-1" onclick="console.log('testing...');" style="display: block;">
        HOW CAN I LEAVE ME CODE LIKE THIS!!!!?
    </div>
</template>

<template>
    <div
        class="d-flex flex-grow-1"
        onclick="console.log('testing...');"
        style="display: block;"
    >
        eslint-prettier KEEPS CHANGING MY CODE LIKE THIS...    SOOOOOOOOO ANNOYING!!!
    </div>
</template>

---

.eslintrc.json

{
    "root": true,
    "env": {
        "node": true,
        "es6": true,
        "browser": true
    },
    "parser": "babel-eslint",
    "plugins": [],
    "extends": [
        "eslint:recommended"
    ],
    "overrides": [
        {
            "files": [
                "**/*.vue"
            ],
            "parser": "vue-eslint-parser",
            "parserOptions": {
                "parser": "@typescript-eslint/parser"
            },
            "plugins": [],
            "extends": [
                "plugin:@typescript-eslint/recommended",
                "prettier/@typescript-eslint",
                "plugin:vue/vue3-strongly-recommended",
                "prettier/vue",
                "plugin:prettier/recommended"
            ]
        }
    ]
}

package.json

  "devDependencies": {
    "babel-eslint": "^10.1.0",
    "eslint": "^6.8.0",
    "eslint-config-prettier": "^6.10.1",
    "eslint-plugin-prettier": "^3.1.3",
    "eslint-plugin-vue": "^7.0.0-alpha.0",
    "prettier": "^2.0.4",
  }

setting.json

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": [
    "javascript",
    "vue"
  ]
}

---

I have vetur and eslint installed on VS Code. I am working fine with this set of configure. However, this line wrap setting is very annoying. Anyone can give me advice on how can I disable line wrapping for vue's html or even disable formatting for vue's html?

Thanks in advance.

Answer 1

"rules": {
  "max-len": ["error", 140, 2, {
     ignoreComments: false,
     ignoreRegExpLiterals: true,
     ignoreStrings: false,
     ignoreTemplateLiterals: false,
  }],
   "vue/max-attributes-per-line": "off"
}

Add this to your rules, in your .eslintrc file you can adjust the number 140 to your preference so that it doesn't wrap the files to 80 characters which is default.

Answer 2

I see you are using Prettier as a code formatter: On the Prettier config: .prettierrc (create it if doesn't exist) put 120 or 180 for the printwidth. The default is 80.

{
  "printWidth": 120
}

You can override here other options too. See the documentation Prettier Options