Add support for inlay hints

[zanmato]

Closes zed-industries/zed#7086

This adds support for inlay hints by responding to the workspace/configuration request.

{
  "lsp": {
    "vue": {
      "settings": {
        "vue.inlayHints.inlineHandlerLeading": true,
        "vue.inlayHints.missingProps": true,
        "vue.inlayHints.optionsWrapper": true,
        "vue.inlayHints.vBindShorthand": true
      }
    }
  }
}

[zanmato]

There is quite some work needed to support 3.x.x. This just adds it for the old 2.2.8 version

[MrSubidubi]

Thanks for this!

I wanted to quickly test this, but was unfortunately unable to make it work. Could you add a quick video showcasing this and/or provide a reproduction case? Thanks!

[MrSubidubi]

This key does not exist, so we can remove it

[zanmato]

Sorry, I found it in some other zed extension while I was debugging this. I've removed it

[zanmato]

Sure, here are the steps to test it,

• Create a vue typescript project

$ npx create-vue@latest zed-vue-test
Need to install the following packages:
[email protected]
Ok to proceed? (y) y

┌  Vue.js - The Progressive JavaScript Framework
│
◇  Select features to include in your project: (↑/↓ to navigate, space to select, a to toggle all, enter to confirm)
│  TypeScript
│
◇  Select experimental features to include in your project: (↑/↓ to navigate, space to select, a to toggle all, enter to confirm)
│  none
│
◇  Skip all example code and start with a blank Vue project?
│  No

Scaffolding project in /mnt/dev/src/zed-vue-test...
│
└  Done. Now run:

   cd zed-vue-test
   npm install
   npm run dev

• Install deps npm i
• Open it in zed
• Open App.vue
• Remove the msg prop from <HelloWorld> (this should give an inlay hint with the missingProps setting enabled)

• Replace the vue extension with this developer extension
• Add the inlay hint config

{
  "lsp": {
    "vue": {
      "settings": {
        "vue.inlayHints.inlineHandlerLeading": true,
        "vue.inlayHints.missingProps": true,
        "vue.inlayHints.optionsWrapper": true,
        "vue.inlayHints.vBindShorthand": true
      }
    }
  }
}

You will now get an inlay hint for the missing msg prop

[MrSubidubi]

Sorry for the delayed response here!

Tried again with exactly your steps, but sadly still does not seem to be working for me at least :/

Given that it visibily works for you, I'd still be happy to merge it for the time being, thank you very much for the detailed follow-up.

However, one final question: Anything against having this enabled by default?

[zanmato]

Strange that it isn't working for you. Not sure what the drawbacks of having it enabled by default are. All I know is that it is disabled by default in vscode

[MrSubidubi]

Generally I'd like inlay hints to be available in Zed by default if they are enabled in the Zed settings. Mind changing it to on by default and perhaps adding a small section on this to the README? If we see that this causes issues down the road, we could always adjust it I guess

[aizigao]

it work well after 0.2.9, I think this should be merged， @smitbarmase can you merge it please

 "lsp": {
    "vue": {
      "settings": {
        "vue.inlayHints.inlineHandlerLeading": true,
        "vue.inlayHints.missingProps": true,
        "vue.inlayHints.optionsWrapper": true,
        "vue.inlayHints.vBindShorthand": true,
        "vue.suggest.propNameCasing": "alwaysCamelCase",
        "vue.suggest.componentNameCasing": "preferPascalCase",
        "vue.autoInsert.dotValue": true
      }
    },

And I think we also need to add some description in the README mentioning that the config items can be found in https://github.com/vuejs/language-tools/blob/master/extensions/vscode/package.json#L248