Vetur: CompletionProvider / IntelliSense

[octref]

The current CompletionProvider based VSCode's html extension needs improvement.
This is to write a new CompletionProvider to satisfy the following goals:

• Scope based IntelliSense:
  Region-based IS is already there (css using css IS, js using js IS). Scope not yet. For example:
  <span v-text="|"></span> here it should suggest all possible values (props, computed props) for the current component.
• Correct import / export
  
  
  
  • Importing js libs like lodash should add those methods to js region IS.
  
  
  • Importing vue files should add component to template, like FooBar.vue -> <foo-bar>.
  
  
• Use SnippetString in CompletionItem to provide Vue API
  
  
  
  • https://github.com/Microsoft/vscode/blob/master/src/vs/editor/contrib/snippet/common/snippet.md
  
  
  • For both template region (directives) and js region.
  
  
  • Possibly also add vuex / vue-router API
  
  

Things need to look into:

• Limitations of SnippetString for IS
• vscode-textmate for getting scope info
• How to utilize salsa

While doing it, maybe also add a custom Diagnostics that shows error, such as v-if using non-existing prop.

[mickdekkers]

Will this also allow for ctrl+clicking to go to definition to work? I noticed that this works in .js files but not .vue files (with vetur v0.3.0)

[octref]

@SoullessWaffle Not yet. Will do that after this one.

[sebastiandedeyne]

While doing it, maybe also add a custom Diagnostics that shows error, such as v-if using non-existing prop.

Wouldn't this be impossible since you won't always be able to infer props from external sources like mixins?

[octref]

@sebastiandedeyne Good question. That's doable if you find where the mixin is defined, evaluate(or interpret) it, and use that to do the diagnostics.

However, after looking into the problem, I feel that would take much effort for something not many people want. I'll just do IntelliSense first and look into this later.

A similar scenario would be vuex. I'll look into how you can suggest getters and actions when writing this.$store in SFC.

[octref]

Suggesting directives:

Suggesting nothing, even v- is typed:

Will polish it a bit and make a release this weekend.

[octref]

An update:

• v-* directives and slot, key, and ref IntelliSense are now supported. Upgrade to 0.5.0 to try it out.
• Correct import / export is not done yet, but should involve just tweaking TypeScript's compiler options https://github.com/octref/vetur/blob/master/server/src/modes/javascriptMode.ts#L18. I probably won't have time until next weekend, so I'm pushing out 0.5.0 with directives IntelliSense first.
• Next version of TS adds a feature called contextual this, which will be very useful for providing correct IntelliSense and even type check for vue component. @sandersn from TS team is working on a plugin to provide better IntelliSense for vue (see #75), and I'll work with him to bring it to vetur.

[octref]

Thanks to @sandersn's PR https://github.com/octref/vetur/pull/94, module resolution works now.

I'm planning to find a way to get props / data / computed / methods information from the exported component and use it to power IntelliSense (for both html template and js), and release 0.6 around this weekend.

[colebrusco]

When version 0.6 will be release? I'm so exciting to use. Congratulations for this extension.

[TonyPythoneer]

I expect that it will be release. Would you release 0.5.x and let users use the latest feature? :smile:

[oswaldofreitas]

What is the current status? Do you have a roadmap?

[octref]

Would rather have stable features before publishing. This way it's better for users and I have less bugs to deal with. A list of things coming with 0.6:

• Improved Completion for this
• Consolidated formatter options
• Type-checking is js/ts

[oswaldofreitas]

what's the expected release date? I'm sure lots of people waiting for this :)

[octref]

0.6 is released with module resolution (not working perfectly for import/export Vue SFC, but works great for node modules and loading js/ts files).

Also better IntelliSense:

Next step is to improve module resolution for Vue files and IntelliSense in template, but I'll track them in other issues.