There is a known bug in Vetur, the Vue VSCode extension, where it takes forever (sometimes several minutes!) to lint Vue files on save.
This made people very angry because linting a file on save is cool but, uh, you know, nobody wants to wait ages for that.
Luckily there is a very easy workaround where, instead of asking Vetur to use Eslint to lint the file on save, we could do it ourself using the RunOnSave VSCode extension.
It depends on your local VSCode settings what might work for you exactly but here's what worked for me:
{
// use eslint to lint files on save...
"eslint.codeActionsOnSave.mode": "all",
"editor.codeActionsOnSave": {
"source.fixAll": true
},
// ...except for vue files, where we don't want Vetur + Eslint
// taking control of the lint (and failing at it)
"[vue]": {
"editor.codeActionsOnSave": {
"source.fixAll": false
}
},
// instead, run Eslint directly
"emeraldwalk.runonsave": {
"commands": [
{
"match": "\\.vue$",
"cmd": "npx eslint --fix ${file}"
}
]
}
}