New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[feature request] lint file with extension other than *.js #42

Closed
txchen opened this Issue Mar 3, 2016 · 31 comments

Comments

Projects
None yet
@txchen

txchen commented Mar 3, 2016

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:

image

@gheoan

This comment has been minimized.

gheoan commented Mar 4, 2016

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

@txchen

This comment has been minimized.

txchen commented Mar 4, 2016

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

@dbaeumer dbaeumer added this to the Backlog milestone Mar 9, 2016

@mrmckeb

This comment has been minimized.

mrmckeb commented May 7, 2016

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

This comment has been minimized.

CalebKester commented Nov 22, 2016

Would love to have this in .vue files

@dbaeumer

This comment has been minimized.

Member

dbaeumer commented Dec 5, 2016

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

This comment has been minimized.

Member

dbaeumer commented Dec 5, 2016

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

@dbaeumer

This comment has been minimized.

Member

dbaeumer commented Dec 5, 2016

Actually dups #21.

@er1x

This comment has been minimized.

er1x commented Dec 5, 2016

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

This comment has been minimized.

sebastiandedeyne commented Dec 6, 2016

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

@MauroJr

This comment has been minimized.

MauroJr commented Dec 8, 2016

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

@kevinongko

This comment has been minimized.

kevinongko commented Dec 9, 2016

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

@sz332

This comment has been minimized.

sz332 commented Dec 11, 2016

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

@sebastiandedeyne

This comment has been minimized.

sebastiandedeyne commented Dec 12, 2016

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)

screen shot 2016-12-12 at 15 25 19

@dbaeumer

This comment has been minimized.

Member

dbaeumer commented Dec 12, 2016

@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

This comment has been minimized.

sebastiandedeyne commented Dec 13, 2016

Running eslint:

13:9  error  Unexpected console statement  no-console

In the editor:

screen shot 2016-12-13 at 13 31 59

@jtmthf

This comment has been minimized.

jtmthf commented Dec 13, 2016

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

This comment has been minimized.

gheoan commented Dec 14, 2016

@sebastiandedeyne That might be a bug in vscode.

@dbaeumer

This comment has been minimized.

Member

dbaeumer commented Dec 15, 2016

@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

This comment has been minimized.

Member

dbaeumer commented Dec 16, 2016

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 Microsoft/vscode#17290.

I apologize for the inconvenience this causes.

@molant

This comment has been minimized.

molant commented Mar 8, 2017

@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

This comment has been minimized.

Member

dbaeumer commented Mar 9, 2017

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

@molant

This comment has been minimized.

molant commented Mar 9, 2017

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

This comment has been minimized.

Member

dbaeumer commented Mar 10, 2017

@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

@dbaeumer dbaeumer closed this Mar 10, 2017

@rohmanhm

This comment has been minimized.

rohmanhm commented Apr 6, 2017

Same issue here, anyone will help?
vuejs/vetur#115

@codeofsumit

This comment has been minimized.

codeofsumit commented Jun 26, 2017

ESlint autofix doesn't seem to work for me.

@KevinNTH

This comment has been minimized.

KevinNTH commented Jul 14, 2017

@codeofsumit Hi,

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

refered here #185

@prograhammer

This comment has been minimized.

prograhammer commented Jul 27, 2017

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

This comment has been minimized.

prograhammer commented Jul 29, 2017

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

This comment has been minimized.

danielo515 commented Aug 12, 2017

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

@Likivik

This comment has been minimized.

Likivik commented Aug 31, 2017

Linting for vue started working for me with setup from the comment above: #42 (comment)
Thanks, @prograhammer.

@xcatliu

This comment has been minimized.

xcatliu commented Sep 10, 2017

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

image

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

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

@vscodebot vscodebot bot locked and limited conversation to collaborators Nov 21, 2017

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.