Issue while upgrading @vue/eslint-config-typescript v3.0.0 to v4.0.0

[Kocal]

Version

3.4.1

Environment info

Environment Info:

  System:
    OS: Linux 4.9 Debian GNU/Linux 9 (stretch) 9 (stretch)
    CPU: (12) x64 Intel(R) Core(TM) i7-7800X CPU @ 3.50GHz
  Binaries:
    Node: 11.5.0 - ~/.nvm/versions/node/v11.5.0/bin/node
    Yarn: 1.12.3 - ~/.nvm/versions/node/v11.5.0/bin/yarn
    npm: 6.4.1 - ~/.nvm/versions/node/v11.5.0/bin/npm
  Browsers:
    Chrome: 72.0.3626.109
    Firefox: 60.5.1
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0-beta.2 
    @vue/babel-plugin-transform-vue-jsx:  1.0.0-beta.2 
    @vue/babel-preset-app:  3.4.1 
    @vue/babel-preset-jsx:  1.0.0-beta.2 
    @vue/babel-sugar-functional-vue:  1.0.0-beta.2 
    @vue/babel-sugar-inject-h:  1.0.0-beta.2 
    @vue/babel-sugar-v-model:  1.0.0-beta.2 
    @vue/babel-sugar-v-on:  1.0.0-beta.2 
    @vue/cli-overlay:  3.4.1 
    @vue/cli-plugin-babel: ^3.4.1 => 3.4.1 
    @vue/cli-plugin-eslint: ^3.4.1 => 3.4.1 
    @vue/cli-plugin-pwa: ^3.4.1 => 3.4.1 
    @vue/cli-plugin-typescript: ^3.4.1 => 3.4.1 
    @vue/cli-plugin-unit-jest: ^3.4.1 => 3.4.1 
    @vue/cli-service: ^3.4.1 => 3.4.1 
    @vue/cli-shared-utils:  3.4.1 
    @vue/component-compiler-utils:  2.5.2 
    @vue/eslint-config-airbnb: ^4.0.0 => 4.0.0 
    @vue/eslint-config-prettier: ^4.0.1 => 4.0.1 
    @vue/eslint-config-typescript: ^3.0.0 => 3.0.0 
    @vue/preload-webpack-plugin:  1.1.0 
    @vue/test-utils: ^1.0.0-beta.20 => 1.0.0-beta.20 
    @vue/web-component-wrapper:  1.2.0 
    eslint-plugin-vue:  4.7.1 
    jest-serializer-vue:  2.0.2 
    typescript: ^3.0.1 => 3.0.1 
    vue: ^2.5.16 => 2.5.16 
    vue-apollo: ^3.0.0-beta.5 => 3.0.0-beta.19 
    vue-chartjs: ^3.3.1 => 3.3.2 
    vue-cli-plugin-apollo: ^0.15.0 => 0.15.0 
    vue-eslint-parser:  2.0.3 
    vue-hot-reload-api:  2.3.0 
    vue-i18n: ^7.6.0 => 7.8.1 
    vue-jest:  3.0.3 
    vue-loader:  15.6.4 
    vue-meta: ^1.5.0 => 1.5.2 
    vue-numerals: ^0.0.2 => 0.0.2 
    vue-router: ^3.0.1 => 3.0.1 
    vue-style-loader:  4.1.0 
    vue-template-compiler: ^2.5.16 => 2.5.16 
    vue-template-es2015-compiler:  1.6.0 
    vue2-google-maps: ^0.9.7 => 0.9.8 
    vuedraggable: ^2.16.0 => 2.16.0 
    vuetify: ^1.3.0 => 1.3.0 
    vuetify-algolia-places: ^1.0.0-alpha.5 => 1.0.0-alpha.5 
    vuetify-loader: ^1.0.5 => 1.0.5 
    vuex: ^3.0.1 => 3.0.1 
  npmGlobalPackages:
    @vue/cli: 3.4.1

Steps to reproduce

Run vue-cli-service serve or vue-cli-service lint

What is expected?

ESLint should work.

What is actually happening?

ESLint cannot find the module "eslint-plugin-@typescript-eslint":

yarn run v1.12.3
$ vue-cli-service lint
 ERROR  Error: Failed to load plugin @typescript-eslint: Cannot find module 'eslint-plugin-@typescript-eslint'
Referenced from: /home/hugo/workspace/ALP/.eslintrc.js
Error: Failed to load plugin @typescript-eslint: Cannot find module 'eslint-plugin-@typescript-eslint'
Referenced from: /home/hugo/workspace/ALP/.eslintrc.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:603:15)
    at Function.resolve (internal/modules/cjs/helpers.js:30:19)
    at Plugins.load (/home/hugo/workspace/ALP/node_modules/eslint/lib/config/plugins.js:106:29)
    at Array.forEach (<anonymous>)
    at Plugins.loadAll (/home/hugo/workspace/ALP/node_modules/eslint/lib/config/plugins.js:166:21)
    at loadFromDisk (/home/hugo/workspace/ALP/node_modules/eslint/lib/config/config-file.js:501:35)
    at load (/home/hugo/workspace/ALP/node_modules/eslint/lib/config/config-file.js:559:20)
    at configExtends.reduceRight (/home/hugo/workspace/ALP/node_modules/eslint/lib/config/config-file.js:425:36)
    at Array.reduceRight (<anonymous>)
    at applyExtends (/home/hugo/workspace/ALP/node_modules/eslint/lib/config/config-file.js:403:26)
error Command failed with exit code 1.

---

This is related to #3359. That's because using "plugins": ["@typescript-eslint"] seems to be the good way to do it.

Also, I'm using ESLint 4.19.1 (packaged from @vue/cli-plugin-eslint).
I tried to manually update it to v5.14.1, but just after I have the ESLint issue "Error: Cannot find module 'eslint-plugin-vue'".

My ESLint config looks like this:

// .eslintrc.js
module.exports = {
  root: true,
  env: {
    node: true
  },
  'extends': [
    'plugin:vue/recommended',
    '@vue/prettier',
    '@vue/typescript',
  ],
  rules: {
    // some rules
  }
}

[Kocal]

Well, I tried to create a fresh app with ESLint/TypeScript support, and I found that:

• I should manually install:
  • eslint@^5.8.0
  • eslint-plugin-vue@^5.0.0
  • and update TypeScript to ~3.2.2
• and add the following lines in the .eslintrc.js:

  parserOptions: {
    parser: '@typescript-eslint/parser',
  },

and it's working.

That's a bit sad we should do that. Also there is nothing in the changelog (or in an UPGRADE.md file) telling us what should we do to upgrade from version X to Y. 😕

I hope this issue will help some people.

[hellomrbigshot]

Same question to me! I think this issue is needed!

[Kocal]

Maybe let's re-open this issue

[Zonciu]

vue/xxxxx rules conflict with prettier/prettier, for example: vue/html-indent conflicts with prettier/prettier tabWidth

[haoqunjiang]

Should have been fixed by #5085