Can't use eslint-loader with vue-loader

[dannyfritz]

I think I either need access to the js portion's preloader or else I think eslint clobbers the stream and babel doesn't know what to do with it.

eslint-loader usage

webpack.config.js:

var path = require('path')

module.exports = {
    name: 'client',
    target: 'web',
    entry: {
      'bundle': './src/client/scripts/app.js',
    },
    output: {
      path: path.resolve('dist'),
      filename: '[name].js'
    },
    module: {
      preLoaders: [
        {
          test: /\.jsx?$/,
          exclude: /node_modules/,
          loader: 'eslint',
        },
      ],
      loaders: [
        {
          test: /\.jsx?$/,
          exclude: /node_modules/,
          loader: 'babel'
        },
        {
          test: /\.vue$/,
          loader: 'vue'
        }
      ]
    },
    eslint: {
      configFile: './.eslint'
    },
    vue: {
      loaders: {
        js: 'babel!eslint?{rules:{eol-last:0}}'
      }
    },
    devtool: '#source-map'
  }

App.vue:

<template>
  <h1 class="red">{{msg}}</h1>
</template>

<script>
export default {
  props: [
    'msg'
  ]
}
</script>

<style>
  .red {
    color: #f00;
  }
</style>

output:

ERROR in ./~/babel-loader!./~/eslint-loader?{rules:{eol-last:0}}!./~/vue-loader/lib/selector.js?type=script&index=0!./src/client/scripts/components/App.vue
Module build failed: SyntaxError: Expected ':' instead of '-'
    at JSON5.parse.error (C:\Users\Danny\Dev\gland\node_modules\eslint-loader\node_modules\loader-utils\node_modules\json5\lib\json5.js:50:25)
    at JSON5.parse.next (C:\Users\Danny\Dev\gland\node_modules\eslint-loader\node_modules\loader-utils\node_modules\json5\lib\json5.js:62:17)
    at JSON5.parse.object (C:\Users\Danny\Dev\gland\node_modules\eslint-loader\node_modules\loader-utils\node_modules\json5\lib\json5.js:443:21)
    at JSON5.parse.value (C:\Users\Danny\Dev\gland\node_modules\eslint-loader\node_modules\loader-utils\node_modules\json5\lib\json5.js:467:20)
    at JSON5.parse.object (C:\Users\Danny\Dev\gland\node_modules\eslint-loader\node_modules\loader-utils\node_modules\json5\lib\json5.js:444:35)
    at JSON5.parse.value (C:\Users\Danny\Dev\gland\node_modules\eslint-loader\node_modules\loader-utils\node_modules\json5\lib\json5.js:467:20)
    at Object.parse (C:\Users\Danny\Dev\gland\node_modules\eslint-loader\node_modules\loader-utils\node_modules\json5\lib\json5.js:491:18)
    at Object.parseQuery (C:\Users\Danny\Dev\gland\node_modules\eslint-loader\node_modules\loader-utils\index.js:54:16)
    at Object.module.exports (C:\Users\Danny\Dev\gland\node_modules\eslint-loader\index.js:111:17)

 @ ./src/client/scripts/components/App.vue 2:17-147

[yyx990803]

In the vue section you need to put eslint-loader before babel-loader.

[dannyfritz]

I think that runs a linter on babel's transpiled output. I'm not sure that is what I want. I'm testing that and that seems to be what it does.

[yyx990803]

@dannyfritz oops my bad, yeah the loader order is right to left. Not yet sure what's the real issue, will take a look tomorrow.

[yyx990803]

Okay, instead of {rules:{eol-last:0} it should be ``{rules:{'eol-last':0}`...

[dannyfritz]

Oh my gosh. Many thanks. 👍