Use of promisify breaks compatibility with vscode eslint @vue/airbnb

[thomasmichaelwallace]

Version

3.0.0-beta.15

Reproduction link

https://codesandbox.io/s/vue

Steps to reproduce

Create a sample Vue project.
Ensure eslint config includes: { "extends": [
"plugin:vue/recommended",
"@vue/airbnb"
] }
Open project in VS Code with eslint plugin.
Open "Home.vue" file, wait for errors to come.

What is expected?

No error in "Problems" tab.

What is actually happening?

Resolve error: require(...).promisify is not a function (import/no-unresolved)
Resolve error: require(...).promisify is not a function (import/no-extraneous-dependencies)
Resolve error: require(...).promisify is not a function (import/no-duplicates)
Resolve error: require(...).promisify is not a function (import/extensions)
Resolve error: require(...).promisify is not a function (import/no-named-as-default)
Resolve error: require(...).promisify is not a function (import/no-named-as-default-member)
Unable to resolve path to module '@/components/HelloWorld.vue'. (import/no-unresolved)

---

Why This Happens

• VSCode uses electron 1.7.12: (ref: https://github.com/Microsoft/vscode/blob/aaa191d9a2d893a7d42b6e2233430c5fe5064d9e/.yarnrc)
• Which uses node 7.9 (ref: https://electronjs.org/releases#1.8.1)
• util.promisify is not available in Node 7.9 (ref: https://nodejs.org/docs/latest-v7.x/api/util.html)
• But it is used in this line: (

  vue-cli/packages/@vue/cli-shared-utils/index.js

  Line 17 in cd88b47

  exports.cmdShim = require('util').promisify(require('cmd-shim'))

  )
• The above line is imported by the following route:

1. eslintrc imports: @vue/airbnb
2. https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/eslint-config-airbnb/index.js#L8
3. https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-service/webpack.config.js#L7
4. https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-service/lib/Service.js#L11
5. https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-shared-utils/index.js

[thomasmichaelwallace]

n.b. for those hitting this bug, deleting the offending `.promisfy' doesn't seem to cause any adverse effects with an existing project- which allows you to continue linting from within vscode.

[sebj54]

Ensure eslint config includes: { "extends": [
"plugin:vue/recommended",
""
] }

Mine extends 'plugin:vue/essential' and I get the issue too. I also extends '@vue/airbnb'.

[yyx990803]

As I said:

1. I can't reproduce this with the latest VSCode (1.23.1) + VSCode ESLint plugin (1.4.12) + the exact project setup (@vue/airbnb) you described. Everything works as expected for me. Please make sure to update everything to the latest.

2. Your ESLint plugin is linting files that are not even part of your project source code. The files containing util.promisify is inside your dependency, and your ESLint plugin is attempting to lint a dependency which is obviously wrong. This has nothing to do with what version of Node VSCode is using and there's nothing Vue CLI can do about it - this is a problem with your editor/plugin setup. If anything, please report a bug to the VSCode ESLint plugin.

[thomasmichaelwallace]

@yyx990803 it's not trying to lint the dependency- look at the chain I've shown you above- it's that the loading of the webpack configuration causes the promisify to come up.

[thomasmichaelwallace]

It happens with dbaeumer.vscode-eslint 1.4.12 + vscode-insiders 1.24.0 (f67e6397855fb25becbdf33df185f96da7fdd108) +

    "@vue/cli-plugin-babel": "^3.0.0-beta.15",
    "@vue/cli-plugin-e2e-cypress": "^3.0.0-beta.15",
    "@vue/cli-plugin-eslint": "^3.0.0-beta.15",
    "@vue/cli-plugin-unit-mocha": "^3.0.0-beta.15",
    "@vue/cli-service": "^3.0.0-beta.15",
    "@vue/eslint-config-airbnb": "^3.0.0-beta.15",
    "@vue/test-utils": "^1.0.0-beta.16", 

[thomasmichaelwallace]

For the error to occur you must go to a file that includes an import @/ so that the webpack-resolver kicks in.

[yyx990803]

Your description was missing the @/ import bits - this is exactly why we require you to provide an actual reproduction.

[thomasmichaelwallace]

I'm glad that you can now reproduce it and I'm sorry I had not noticed that specific not included in @sebj54's case.

As some feedback though- aggressively closing the issue makes it look like there's no future discussion (hence me raising a second issue), and not having an issue to work against means that instead of putting together a PR to try and resolve this problem I've instead focused all my time trying to get it acknowledged. This isn't the first time I've been put off contributing to this project (#947).

[Akryum]

As some feedback though- aggressively closing the issue makes it look like there's no future discussion (hence me raising a second issue), and not having an issue to work against means that instead of putting together a PR to try and resolve this problem I've instead focused all my time trying to get it acknowledged. This isn't the first time I've been put off contributing to this project (#947).

Maybe next time you could follow the issue requirements (that by the way we clearly indicate) and post a link to an actual runnable reproduction of your problem, and then less time will be wasted. 🐈

[thomasmichaelwallace]

OK. Thanks for the feedback.

[sebj54]

Your description was missing the @/ import bits - this is exactly why we require you to provide an actual reproduction.

WTF? There was an actual case reproduction in my issue. It is clearly written:

Open "Home.vue" file, wait for errors to come.

And actually, there is the @/ import bit in this file...
So please, don't tell there was missing a repro scenario and admit you read our issues too fast. How can we provide a simpler reproduction scenario than creating a demo project and open just a single file in VS Code?

So, @yyx990803, this is exactly why I provided an actual reproduction.