Only four Vue directives suggested by VS Code IntelliSense (+ possibly related issues)

[OptiStrat]

With my setup, only those four Vue directives are suggested by IntelliSense: v-for, v-if, v-else, v-else-if.

Additional observations / issues, possibly related:

1. if a valid Vue directive is added but its argument is invalid, IntelliSense kicks in to complain. For example, <span v-model></span> triggers (JSX attribute) modelValue: undefined v-model is missing expression. vue(41):
   
2. when using v-on:, no event suggestions are made, ever. When using the @ shorthand, no event suggestion is made until one starts typing. For example, typing @cli will suggest @click, @auxclick and @dblclick. Typing v-on:cli leads to no suggestion:
   
3. IntelliSense initially doesn't work inside the argument of a Vue directive, but after placing the cursor outside the double quotes and back in again, IntelliSense works. (See previous screencast.)
4. Intellisense doesn't suggest all the options for the keyup directive. For example, keyup.enter isn't suggested:
   

My setup:

• Fedora 35, kernel 5.15.18-200.fc35.x86_64
• VS Code 1.64.0-1643864066.el7
• no VS extension, or setting changes likely to conflict with Volar
• default Volar settings
• default Vite project setup fpr Vue + TypeScript:

  "dependencies": {
    "vue": "^3.2.25"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^2.0.0",
    "typescript": "^4.4.4",
    "vite": "^2.7.2",
    "vue-tsc": "^0.29.8"
  }

[johnsoncodehk]

Hi @OptiStrat, thanks to report these problems!

With my setup, only those four Vue directives are suggested by IntelliSense: v-for, v-if, v-else, v-else-if.

See #497.

1. if a valid Vue directive is added but its argument is invalid, IntelliSense kicks in to complain. For example, <span v-model></span> triggers (JSX attribute) modelValue: undefined v-model is missing expression. vue(41):

This is expected error from vue template compiler.

2. when using v-on:, no event suggestions are made, ever. When using the @ shorthand, no event suggestion is made until one starts typing. For example, typing @cli will suggest @click, @auxclick and @dblclick. Typing v-on:cli leads to no suggestion:

Fixed in 4430901 and 67251c5.

3. IntelliSense initially doesn't work inside the argument of a Vue directive, but after placing the cursor outside the double quotes and back in again, IntelliSense works. (See previous screencast.)

This is vscode-html-languageservice / vscode behavior.

vscode-html-languageservice responded @click="$1" completion text for @click, and $1 mean code snippet position and it eliminate next completion trigger character in vscode.

4. Intellisense doesn't suggest all the options for the keyup directive. For example, keyup.enter isn't suggested:

The modifiers list is capture from https://vuejs.org/api/built-in-directives.html#v-on (It don't have enter), and hardcode in https://github.com/johnsoncodehk/volar/blob/67251c530119c97c6a0bd0cf727789b8998dde2a/packages/vscode-vue-languageservice/src/services/completion.ts#L84-L93

Please feel free to send a PR to improve.