DEV Community

Nino Filiu
Nino Filiu

Posted on

5 2

How to fix Vetur taking forever to save a file

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}"
            }
        ]
    }
}
Enter fullscreen mode Exit fullscreen mode

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs