Vscode-eslint: [feature request] lint file with extension other than *.js

[txchen]

Currently the plugin only watch js files: documentSelector: ['javascript', 'javascriptreact'],

It would be nice if we can lint other file types, like *.html. eslint has many plugins that can support extracting javascript from other format, like html.

Atom's eslint plugin, has this option:

[gheoan]

+1. I would like to use this extension with typescript .ts files now that there is a typescript eslint parser.

[txchen]

webcomponents like vue, riot, or polymer, their comp files all includes javascript. FYI.

[mrmckeb]

I've created a PR that addresses the .ts and .tsx issue, if the approach I provided gets approved, I'll update the PR to support .html too (in the same way). Are there any other formats that are missing?

[CalebKester]

Would love to have this in .vue files

[dbaeumer]

OK. This was quite some work and basically required to change a lot of things in the LSP as well as the implementation of the ESLint extension. So I would like to find volunteers to test this before I publish this in the market place.

Attached a zip that can be installed using vscode command line installer. For example to install the version in VS Code stable download the attached file and rename it to vscode-eslint-1.2.0.vsix (it is currently named zip since github doesn't handle vsix files) and run from a terminal:

code-insiders --install-extension ./vscode-eslint-1.2.0.vsix

to install it in VS Code stable use

code --install-extension ./vscode-eslint-1.2.0.vsix

To control the file types to be validated use the new settings eslint.validate. For example to validate JS and HTML use the following value:

"eslint.validate": [
    "javascript", "javascriptreact", "html"
]

Please note that you need to configure ESLint accordingly as well to make this work. The extension will not automatically install eslint plugins. So you need to have a

    "plugins": [
        "html"
    ]

section in the ESLint configuration file and need to install eslint-plugin-html as well.

vscode-eslint-1.2.0.zip

[dbaeumer]

One additional note: due to https://github.com/BenoitZugmeyer/eslint-plugin-html/issues/38 auto fix is not available for files other than JS.

[dbaeumer]

Actually dups #21.

[er1x]

It works like a charm for me (VS Code 1.7.2, Win10). Using in .vue files, as easy as adding .vue extension to eslint.validate (had eslint-plugin-html installed previously):

    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "html",
        "vue"
    ]

Thank you @dbaeumer ! 😄

[sebastiandedeyne]

Gave it a spin on VSC 1.7.2, OSX Sierra, works like a charm!

[MauroJr]

I tested here on VSC 1.7.2, Linux Debian 64 bits, works perfectly!!! Thanks a lot!!! Great job!!!

[kevinongko]

Tested on VSC 1.7.2 OSX Sierra, works on .vue files 👍

[sz332]

Tested on VSC 1.7.2, Windows 7 64 bit, works on .html files. When can we expect an official plugin update?

[sebastiandedeyne]

Having issues with the no-console rule though, it always highlights the everything before the line that contains the error (this in is a .vue file)

[dbaeumer]

@sz332 in the next days.
@sebastiandedeyne what errors do you get when executing this n the terminal. The ESLint extension simply takes the error range it receives from ESLint and the corresponding plugin.

[sebastiandedeyne]

Running eslint:

13:9  error  Unexpected console statement  no-console

In the editor:

[jtmthf]

Tested on VSC 1.7.2 OSX Sierra, with the graphql plugin and it worked well. Only requirement was that a language service for graphql needed to be installed so that the language id could be picked up.

[gheoan]

@sebastiandedeyne That might be a bug in vscode.

[dbaeumer]

@sebastiandedeyne very strange. Do you have a project / sample you can share. Helps understanding what is going wrong

@sz332 release eslint 1.2.1 today.

[dbaeumer]

For those that helped me testing please uninstall and reinstall the eslint plugin since the plugin will not update itlsef anymore if directly installed from a vsix. For the details see https://github.com/Microsoft/vscode/issues/17290.

I apologize for the inconvenience this causes.

[molant]

@dbaeumer testing on Windows 10 with insider 1.11 and TypeScript and seems to be working fine. What else is needed to have this in the official release?

[dbaeumer]

@molant nothing. I simply forgot to close the issue.

[molant]

It wasn't working with the latest version of the plugin and that's how I end up in this issue. Is it going to be available in the next one or is there something broken with my current configuration?
Thanks!

[dbaeumer]

@molant it should work with the latest version, however you need to configure this. Please see: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

[rohmanhm]

Same issue here, anyone will help?
https://github.com/octref/vetur/issues/115

[codeofsumit]

ESlint autofix doesn't seem to work for me.

[KevinNTH]

@codeofsumit Hi,

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

refered here #185

[prograhammer]

Hey guys,

With the latest version of VS Code, I'm still not able to lint Vue files. If you pull down this simple example here: https://github.com/prograhammer/hello
Then npm install and you'll see linting works perfectly for .js but not for .vue. For example, add some extra spaces after a brace { in doc.js. Works perfectly. Now try the same in app.vue. No error.

Here's my settings.json:

// Place your settings in this file to overwrite the default settings
{
    "[javascript]": {
        "editor.tabSize": 2,
        "editor.insertSpaces": true,
        "eslint.options": {
            "extensions": [".html", ".js", ".vue", ".jsx"]
        },
        "eslint.validate": [
            {
                "language": "html",
                "autoFix": true
            },
            {
                "language": "vue",
                "autoFix": true
            },
            {
                "language": "javascript",
                "autoFix": true
            },
            {
                "language": "javascriptreact",
                "autoFix": true
            }
        ]
    }
}

[prograhammer]

Solved! My settings.json was incorrect. Updated to be like this now:

// Place your settings in this file to overwrite the default settings
{
    "[javascript]": {
        "editor.tabSize": 2,
        "editor.insertSpaces": true
    },
    "[vue]": {
        "editor.tabSize": 2,
        "editor.insertSpaces": true
    },
    "eslint.options": {
        "extensions": [".html", ".js", ".vue", ".jsx"]
    },
    "eslint.validate": [
        {
            "language": "html",
            "autoFix": true
        },
        {
            "language": "vue",
            "autoFix": true
        },
        {
            "language": "javascript",
            "autoFix": true
        },
        {
            "language": "javascriptreact",
            "autoFix": true
        }
    ]
}

Works beautifully!

[danielo515]

I'm still experiencing this problem. Is any official solution?

[Likivik]

Linting for vue started working for me with setup from the comment above: https://github.com/Microsoft/vscode-eslint/issues/42#issuecomment-318859607
Thanks, @prograhammer.

[xcatliu]

Please note that eslint.validate accept all types in vscode, including "typescript" and "typescriptreact"

You can add settings below to support typescript-eslint-parser

    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "html",
        "typescript",
        "typescriptreact"
    ]