Vscode-eslint: Not working on .vue files

[jonjbar]

When using vue.js, the following plugin is installed and enabled: https://www.npmjs.com/package/eslint-plugin-vue
eslint from the command line can retrieve problems from .vue files but vscode-eslint can't.
Is there some configuration I've missed in vscode-eslint ?
Thanks.

[kaleb]

How do you run eslint from the commandline, and have you set the extensions key in your .vscode/settings.json?

{
    "eslint.options": {
        "extensions": [".js", ".vue"]
    }
}

[er1x]

Same issue here. It looks like eslint options in settings.json are not being processed.

I have:

{
    "editor.tabSize": 2,
    "eslint.options": {
        "extensions": [".js", ".vue"]
    }
}

Tab size options work, while the other one doesn't.
Using _eslint src/ --ext vue_ from console works, though.

[Wenzil]

Same problem here

[luchsamapparat]

It seems I have the same issue when trying to lint TypeScript files:

{
    "eslint.options": {
        "extensions": [
            ".js",
            ".ts"
        ]
    }
}

Removing ".js" also has no effect. Other options however, like useEslintrc, have an immediate effect.

[wszgxa]

same problem

[xmoki]

same problem

[franky47]

Same problem here, starting from the vue-cli webpack template.

[franky47]

From https://github.com/Microsoft/vscode-eslint/blob/4e19c91826a9cae663d9f09a250863291eec11da/eslint/extension.ts#L141

let clientOptions: LanguageClientOptions = {
  documentSelector: ['javascript', 'javascriptreact'],
  ...

It appears that this line causes the extension to be working only on files loaded with a language mode of Javascript or Javascript React. Vue files have their own language mode, or sometimes fall back to HTML.

Even if the eslintrc config file or config options in settings.json contain the vue or html ESLint plugins, they won't fire because the extension is not active by default on Vue files.

[aximario]

same here

[dbaeumer]

@Franky47 your analysis is 100% correct and the problem is not easy to fix since it is somehow a chicken egg problem. I don't want to activate the extension to eagerly on the other side on the extension could know on which file types it can work. I will think about what we can do to make this smarter. I will require some work on the language client / server library as well to make this work.

[jdillworth]

I'm having this same issue.

I understand that you don't want to activate the extension too eagerly.

What about a new option like this?:

"eslint.documentTypes":["vue", "typescript"]

Then we could solve our problem and it would be an "opt-in" situation. The plugin will behave the same as it does today in the absence of the above option.

[yxqme]

same problem

[dbaeumer]

Agree, but this needs to get more dynamic since you could change the settings and want eslint to respect this. This is currently not possible with the LSP protocol I use. I am working there to enable this.

[charlzyx]

same proble

[sz332]

I have quite similar problem with html files and eslint. I installed eslint-plugin-html, and from command line, the problems are displayed. However, from Visual Studio Code, even with enabled file extensions:

"eslint.options": {"extensions":[".js", ".html"]}

No error is displayed.

[dbaeumer]

Closing as a dup of #21 #42.

I am looking for volunteers to test this since it was a bigger code changes. See steps in #42 on how to install the latest version and on how to provide feedback.

[JzKUO]

format code not working on .vue files !

[dbaeumer]

@JzKUO what do you mean by format code ? Format vue files? The eslint extension doesn't provide any formatting support at all.

[lekhnath]

I was trying to lint typescript files using this extension and typesciprt-eslint-parser but cannot get to work with .ts files

[lekhnath]

Solution found #42