@vue/cli-plugin-eslint installs/uses two versions of eslint-plugin-vue

[JaZo]

Version

3.1.1

Reproduction link

https://github.com/JaZo/vue-cli-plugin-eslint-test

Node and OS info

Node 10.13.0 / yarn 1.12.1 / Windows 10

Steps to reproduce

See package.json and yarn.lock in link to minimal reproduction or run vue create vue-cli-plugin-eslint-test, choose for lint/format and extend plugin:vue/recommended in eslint config.

What is expected?

I would expect that @vue/cli-plugin-eslint installs/uses one version for eslint-plugin-vue.

What is actually happening?

Both version 4 and version 5 of eslint-plugin-vue are installed/used. The first as dependency of @vue/cli-plugin-eslint and the second injected in package.json by the generator of @vue/cli-plugin-eslint.

---

Having those two different (major) versions results in conflicts between vue-cli-service serve and vue-cli-service lint.

When having the following line in a component:

<component :is="itemComponent" v-for="item in items" :key="item.id" v-bind="item" />

Running vue-cli-service serve:

error: Attribute "v-for" should go before ":is" (vue/attributes-order)

Running vue-cli-service lint --no-fix:

No lint errors found!

When I reorder :is and v-for, i.e.:

<component v-for="item in items" :is="itemComponent" :key="item.id" v-bind="item" />

Running vue-cli-service serve:

Compiled successfully

Running vue-cli-service lint --no-fix:

error: Attribute ":is" should go before "v-for" (vue/attributes-order)

N.B. This issue is not about this particular bug in the eslint rule. This is about the usage of two different versions.

[JaZo]

Current workaround is to manually roll back to eslint-plugin-vue@^4.7.1 in package.json in the project and settle with the 'vue/attributes-order' bug.

[haoqunjiang]

We intentionally keep two versions of eslint in v3.1, so as to make the plugin compatible with projects generated by v3.0.x, while making eslint v5 as a default option for new users.

The problem here is that we forgot to configure eslint-loader to use a newer version of eslint.

A workaround:

module.exports = {
  chainWebpack: config =>
    config.module
      .rule('eslint')
      .use('eslint-loader')
      .tap(options =>
        Object.assign(options, { eslintPath: require.resolve('eslint') })
      )
}

[JaZo]

@sodatea thanks for your quick answer and the workaround, works like a charm!