ESLint validation not working if VUE component script is located in separate file

[erik-sytnyk]

Version

3.0.0-rc.2

Reproduction link

https://codesandbox.io/s/ly7ywz0409

Steps to reproduce

Move script part of vue component into separate JS file (HelloWorld.vue.js)

Reference in main component (HelloWorld.vue: <script src="./HelloWorld.vue.js'></script>)

Add code which violete ESLint rules

What is expected?

To see warning/error report in a console (via vue-cli)

What is actually happening?

Nothing is reported (code is not checked)

[Akryum]

See: https://github.com/vuejs/eslint-plugin-vue#attention

[erik-sytnyk]

@Akryum thanks for pointing out, but putting '// @vue/component' did not change anything

it may be convenient to put JS source file for components in separate files as support for autocomplete and other features in VUE components is not great for all IDEs

and logically it seems that

<template>
  ...code
</template>

and

<template src="./code.js"></template>

should be treated the same way (without adding extra comments)

[Akryum]

You need to put // @vue/component just before the component definition:

// @vue/component
export default {
  props: { ... }
}

[erik-sytnyk]

@Akryum it is not working

here is repo https://bitbucket.org/yegor_sytnyk/vue_cli_eslint_bug/src/master/
(https://[email protected]/yegor_sytnyk/vue_cli_eslint_bug.git)

the same ESLint warning is reported inside vue component but ignored if the code is referenced via src path

[Akryum]

After reproducing this, I think it's an issue with vue-loader 15 (and preLoaders deprecation). Please open an issue there as well.

[yyx990803]

Fixed in vue-loader 15.2.5.