'Vetur + ESLint + Prettier makes img pair tag and breaks syntax highlight

I am using Vetur + ESLint + Prettier combo to autoformat code on save. It works OK most of the times, but breaks in at least one case. Now the configuration is so complicated I cannot really tell where the problems is.

When I save this specific tag, it makes <img> "self-closed" which doesn't seem OK to me as that one should not be a pair tag as far as I know. I think this "self-closed" <img> tag then breaks the formatting from that point on. See below:

enter image description here

The issue above happens when I save the file. The <v-list-item-avatar> should have larger indentation that the parent <template> tag, but instead it has a lower one. And than after the closing </template> tag the syntax highlighting breaks altogether.

I noticed I could workaround it by actually making <img> a pair tag, but even then it must not be on the same line, otherwise the same problem happens.

So if I do so it will format the code on save correctly and the syntax highlighting will start working again, but ESLint will still report an error about the enclosing tag:

enter image description here

Now I know you will ask me for my configuration... I am not sure what exactly should I post as again, the configuration of those tools seems to complicated for me, but I will try my best...

This is my global settings:

{
    "vetur.validation.template": false,
    "eslint.validate": [
        "vue", "html", "javascript"
    ],
    "eslint.autoFixOnSave": true,
    "editor.formatOnSave": true,
    "debug.javascript.autoAttachFilter": "smart",
    "terminal.integrated.shell.windows": "C:\\WINDOWS\\System32\\cmd.exe",
    "[css]": {
        "editor.defaultFormatter": "aeschli.vscode-css-formatter"
    },
    "[json]": {
        "editor.defaultFormatter": "vscode.json-language-features"
    },
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "[vue]": {
        "editor.defaultFormatter": "octref.vetur"
    },
    "[javascript]": {
        "editor.defaultFormatter": "vscode.typescript-language-features"
    },
    "json.maxItemsComputed": 20000,
    "[typescript]": {
        "editor.defaultFormatter": "vscode.typescript-language-features"
    },
    "git.autofetch": true
}

Here's the content of the .eslintrc.js in my project folder:

module.exports = {
  "env": {
      "browser": true,
      "es6": true,
      "node":true,
      "meteor":true,
      "mongo": true,
      "mocha": true
  },
  "extends": [
      "eslint:recommended",
      "plugin:vue/recommended"
  ],
  "globals": {
      "Atomics": "readonly",
      "SharedArrayBuffer": "readonly"
  },
  "parserOptions": {
      "parser": "babel-eslint",
      "allowImportExportEverywhere": true,
      "ecmaVersion": 2018,
      "sourceType": "module"
  },
  "plugins": [
      "vue",
      "html"
  ],
  "rules": {
    "vue/no-v-html":0, 
  }
};

And those plugins I guess come from my dev deps (package.json):

  "devDependencies": {
    "babel-eslint": "^10.1.0",
    "babel-plugin-istanbul": "^6.0.0",
    "cross-env": "^7.0.3",
    "eslint": "^7.18.0",
    "eslint-plugin-html": "^6.1.1",
    "eslint-plugin-vue": "^8.5.0",
    "jquery": "^3.5.1",
    "puppeteer": "^5.5.0"
  },

If there's anything else I should post, please let me know in the comments.

vue.jseslintvetur


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions