How to get jump-to-definition to use Vetur/vue-language-server results about atom-ide-vue

[Belar]

In this case, it seems like expected behaviour. With Vue 2, setup is a custom property in component options. Unrecognized, it interferes with VLS, requires augmentation of options definition to make it work.

This 2 resources should help:

• Docs entry on types augmentation
• Similar issue reported for Vetur

If option is coming from plug-in (e.g. beforeRouteEnter form "vue-router"), maybe it's something with types of that plug-in.

[Belar]

Hi,
thanks for reaching out.

installed this package, hyperclick, and atom-ide-definitions

Sounds good, I believe that's all you need for the "definition on click" to work.

nearly every symbol will be underlined when I "cmd-hover" over tokens. This means that hyperclick is getting a non-falsy result for each token, when I think the ideal UX is that tokens are only underlined and cmd-clickable if there is a definition target to go for, otherwise you get a bunch of "no definition found" alerts

Yes, it would be great to have symbols underlined ("hyperclick-able") only if definition is available, not sure if it's in the scope of atom-ide-vue tho - will need to investigate.

tried to debug the messages being sent to Vetur via atom-languageclient using atom.config.set('core.debugLSP', true)

That's a correct way. On "go to definition" activity, you should be seeing textDocument/definition RPC messages being exchanged with Vetur (VLS).

support jump-to-definition between the template and script tags inside a Vue SFC

Is it supported in VLS? I tried in VS Code, with Vetur (original Vue extension that VLS originates from), and didn't get the possibility to target component tags, variables in attributes etc. in template tag. Anyway, if there is a way, it would be a nice feature.

Other than the above, the jump-to-definition functionality seems to be working as intended. Could you provide a repo/gist with minimal reproduction of the issue or try on a clean project from Vue CLI? Do other features from VLS work as expected, for example, suggestions (like on the screenshot in readme)?

could use some help understanding how to debug this stuff and how it all works together

Good point. Currently there is no contributing guide, but I will see if I can find some time to put one together.

[jonboiser]

Other than the above, the jump-to-definition functionality seems to be working as intended.

Could you tell me how it's intended to work? What keystrokes or menus do I need to run this command? When I cmd-click symbols or use the the 'hyperclick: confirm cursor' command from the action menu, nothing seems to happen. I've tried this on function names inside the '<script>' tag and in the '<template'>.

[Belar]

Could you tell me how it's intended to work? What keystrokes or menus do I need to run this command?

If you open the context menu on a symbol (RMB click), there should be "Go to Definition" option available, select that and "go to definition" should take an effect.

Context menu option should also have a keybinding info next to it (for atom-ide-go-to-definition:go-to-definition command, from atom-ide-defintions package), which triggers "go to definition" for a symbol that cursor is placed at.

Finally, there is Hyperclick support, which is command+click (Mac) or ctrl+click (Win/Linux) on a symbol, that triggers the "go to definition". I'm not 100% sure about the default, but can be checked and changed in Hyperclick's settings.

Basic example of how "go to definition" should work (based on Vue CLI's hello-world):

// App.Vue
<template>
  <div id="app">
    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import HelloWorld from "./components/HelloWorld.vue";

@Component({
  components: {
    HelloWorld
  }
})
export default class App extends Vue {}
</script>

// components/HelloWorld.vue
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component
export default class HelloWorld extends Vue {
  @Prop() private msg!: string;
}
</script>

inside the '<script>' tag

If you click on HelloWorld at import HelloWorld from "./components/HelloWorld.vue"; that should "automagically" open new tab with HelloWorld.vue, focus that tab, and move your cursor to the start of HelloWorld at export default class HelloWorld extends Vue {.

in the '<template'>.

I looked into it yesterday, there is experimental support for template interpolation in VLS.

In atom-ide-vue@>=1.2.0, if you enable "Template interpolation service" in settings (in "Experimental" category), it should be possible to "go to definition" on msg at <h1>{{ msg }}</h1>, and it would move cursor to the begging of the msg at @Prop() private msg!: string;.

[jonboiser]

Cool, thanks for those details. It seems to be working great for simple Vue options, like in HelloWorld.vue, but it's not working for files in my project. The issue seems to be when you have Vue plugin-based options like a beforeRouteEnter hook from Vue Router inside of the Vue options object. I'm guessing this is an issue with Vetur? Do you think there is a configuration option for this?

[Belar]

[...] it's not working for files in my project. The issue seems to be when you have Vue plugin-based options like a beforeRouteEnter hook from Vue Router inside of the Vue options object.

Could you post an example code, with expected behaviour?

I'm guessing this is an issue with Vetur? Do you think there is a configuration option for this?

Can be a case of VLS's limits. With an example, could take a look and see if it's a matter of settings.

[jonboiser]

Here's a video, where Jump-To-Definition works without the setup hook (future Vue 3 feature), but when I un-comment it, it no longer works. I don't think it matters that it's setup I used. It seems like if you use any option that is not part of core Vue, this will happen (my last example was from new options added by Vue Router).

<template>

  <div>{{ hello }}</div>

</template>

<script>
export default {
  name: 'HelloWorld',
  setup() {
    console.log('yo')
  },
  computed: {
    hello() {
      return '';
    }
  }
}
</script>

<style>

</style>

[jonboiser]

This worked for me. I added a vue.d.ts file at the root of my project that imports the typings for all of the various plugins I use

import Vue from 'vue'
import Vue from 'vue-router';
import Vue from 'vue-meta';


declare module 'vue/types/options' {
  interface ComponentOptions<V extends Vue> {
	// can add options for other plugins that don't have Typings
  }
}

The docs you pointed to seem to be intended for other plugin authors. It's weird to me that you would need to add an extra file like this to your project just to get Vetur to work correctly.

[Belar]

It's weird to me that you would need to add an extra file like this to your project just to get Vetur to work correctly.

That should be only necessary in case of project's custom methods. Usually, types come from plug-in's package or a dedicated types package (e.g. one of DefinitelyTyped). Vue Router includes types and they should be picked up automatically. It may require troubleshooting outside atom-ide-vue though.