Synchronising VSCode linting with vue-cli linting

Question

I've created a new project with the Vue CLI with options like Typescript and Airbnb linter enabled, which works fine itself, but now I want this linting to show in the VSCode editor, not just as execution errors when the project is served. This seems to have got me down a rabbit hole of installing different extension that all have different config files, that all have their own particularities, up to the point where I can't satisfy the linter because of problems like single quotes or double quotes that it wants to bounce back and forth between using.

I'm under the impression that there isn't a good way to get the rules of the linter for the Vue server concurrent (from the same ruleset) with the ones that the extensions for VSCode use. I'm trying to use the Airbnb linting rules and even if I independently install the ruleset for VSCode and via NPM separately, they still don't align.

Any advice on remedying this/getting VSCode to replicate the serve linter's ruleset?

Answer 1

Turns out that all of my VSCode extensions apart from ESLint needed to be uninstalled (Despite me trying to use Typescript [which has TSLint] and Vue components [which have their own, yet again separate linter])

Just needed this user/workspace config:

"eslint.validate": [
    {
        "language": "vue",
        "autoFix": true
    },
    {
        "language": "html",
        "autoFix": true
    },
    {
        "language": "javascript",
        "autoFix": true
    },
    {
        "language": "typescript",
        "autoFix": true
    }
]