Webpack: ESLint not working in .vue files

[zigomir]

I can use double quoted strings in .vue files inside script tag but npm run lint nor webpack dev server won't warn me like it does when you screw up .js file. All my packages are latest at this point in time.

I'm using standard eslint config. I have these preLoaders inside webpack.base.conf.js file.

I'm reporting issue without PR because I'm not a webpack expert. :(

[chrisvfritz]

Hmm, I can't reproduce this personally (on OS X 10.11.4, node 5.11.1). What's your OS and node version?

[zigomir]

Huh, I see where the problem is now. I'm using <script type="text/ecmascript-6"> to get proper ES6 for WebStorm and this breaks ESLint. Will dig deeper.

[chrisvfritz]

Ah, would updating to type="text/babel" fix it? I _think_ that also works with Webstorm.

[zigomir]

That was it. With type="text/babel" eslint will work inside .vue files and WebStorm will work with ES6 syntax. Thank you @chrisvfritz ! :)

[sergeymorkovkin]

With PhpStorm it doesn't seem to work...

[zigomir]

It works through webpack and you can se errors in browser + terminal. But inside editor yep. But I think two places are enough :)

[sergeymorkovkin]

Php/WebStorm use stdin to pass source code. And (what in more interesting) some tricky algorithms to detect which files should lint, and which should not.

[rebers]

Sorry to dig this up - but I also have this issue. Using Atom, normal JS files show inline errors and warnings like this. However, in .vue files this is not the case. I do see the errors in the console and browser, but not inline.

Any tips? Or is this intended due to limitations?

[chrisvfritz]

@devboxr In the settings for Atom's ESLint package, you have to check a box to enable Linting within HTML files.

[rebers]

@chrisvfritz Thanks! That did indeed do something, but is being followed by this:

TypeError: Cannot read property 'map' of undefined
    at /Users/robin/Development/skappbar.dev/node_modules/eslint-plugin-html/src/index.js:86:39
    at Array.forEach (native)
    at Object.postprocess (/Users/robin/Development/skappbar.dev/node_modules/eslint-plugin-html/src/index.js:85:19)
    at processText (/Users/robin/Development/skappbar.dev/node_modules/eslint/lib/cli-engine.js:252:30)
    at CLIEngine.executeOnText (/Users/robin/Development/skappbar.dev/node_modules/eslint/lib/cli-engine.js:761:26)
    at Object.cli.execute (/Users/robin/Development/skappbar.dev/node_modules/eslint/lib/cli.js:181:36)
    at lintJob (/Users/robin/.atom/packages/linter-eslint/lib/worker.js:35:10)
    at /Users/robin/.atom/packages/linter-eslint/lib/worker.js:69:20
    at Emitter.emit (/Users/robin/.atom/packages/linter-eslint/node_modules/process-communication/node_modules/sb-event-kit/lib/emitter.js:70:19)
    at /Users/robin/.atom/packages/linter-eslint/node_modules/process-communication/node_modules/sb-communication/lib/main.js:22:23

I'm using a fresh npm installation, all files being the default.

$ node -v
v6.3.1

$ npm -v
[email protected] /usr/local/lib/node_modules/npm

Any idea?

// UPDATE: Restarting Atom actually did the trick. No idea why that worked and no idea why I haven't tried this before. Nevermind and thanks a lot!

[yisibl]

https://github.com/lkiarest/eslint-plugin-vuefix

[jbreuer95]

+1