Vscode: Add new support for vue components

[jianzhou520]

It's really good for developers to support vue component in vscode ^..^

[chrmarti]

Could you be more specific what that support would look like?

If you're looking for IntelliSense support, you should get that by adding the corresponding type definitions to your workspace. E.g., DefinitelyTyped has one: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/vue/vue.d.ts

[jianzhou520]

In atom, it has the same language support pageckage. Looks like image bellow.

It's created for vue.js framework

[chrmarti]

You might be looking for code snippets then. These can be contributed by an extension. See: https://code.visualstudio.com/docs/customization/userdefinedsnippets

Someone already published an extension that might help: https://marketplace.visualstudio.com/items?itemName=liuji-jim.vue

[ErickPetru]

Vue Single-File Components are files with .vue extension, containing a sintax similar to HTML, bug with three root tags (<script>, <template> and <style>). Inside <script> we commonly use ECMAScript 2015+. The other two tags also support preprocessors, like <template lang="pug"> (formely _jade_) and <style lang="sass"> (or _less_, _stylus_, _postcss_...).

As stated by @liuji-jim, creator of the Syntax Highlight for Vue.js extension:

When using embeded <script> JavaScript code can not trigger VSC's JavaScript language support. That means Intellisense won't work with embeded <script> tags.

So, I think VSCode must solve this problem of third party extensions not being able to activate external highlighters inside parts of the same file.

[seanwash]

@ErickPetru I think you're right - I've also made a plugin for .vue files (https://github.com/seanwash/vscode-vue-components) and Im having trouble with intellisense as mentioned above.

[jianzhou520]

Yeah. this is the key point! @seanwash, thanks for you contribution!

[jianzhou520]

Yeah. this is the key point! @seanwash, thanks for you contribution!

[ErickPetru]

@chrmarti, please give us some feedback about it. Will this issue be reopened to address the needed VSCode fix or are there any other issue regarding the intellisense and highlight troubles for files with multiple languages like .vue?

[chrmarti]

Makes sense. @aeschli Is there an issue tracking support for nested languages in general?

[aeschli]

@chrmarti There are some bugs that want us to come up with a general solution for embedded content, but I think that we won't succeed in that. There are subtle differences in every case where we think it's better to have specific implementation of every host language for the best user experience.
In the case of vue, I'd recommend to have a look at the implementation of the HTML language extension and to implement an Vue language server that follows the same pattern and also reuses parts of the HTML language service.
The html server (found here) takes all intellisense/hover requests, but handles requests for style/script by

• creating a virtual document that only contains css/js
• runs a intellisense/hover request on that virtual document, handled by the installed CSS/JS extension
• maps the results back to the original html document and returns them as the result.

As said, have a look at the HTML extension, I'm happy to help futher.

[octref]

For those concerned, I just released 0.2 version of my Vue extension, vetur.

It includes a language server based on @aeschli's work on VSCode's html extension. In addition to html/css/js intelliSense, I've enabled intelliSense for scss/less:

I'm planning to enable more language features for Vue files. You can open issues for bugs/features or contribute at https://github.com/octref/vetur.

[seanwash]

@octref this is awesome. I'll deprecate my plugin in favor of yours.

[fritx]

Hi @octref , vetur seems not work with comments in scss, does it?

[octref]

If you have specific bug report / questions, you can open an issue at https://github.com/octref/vetur with more information.

[mjbvz]

Install the Vetur extension for working with Vue: https://github.com/octref/vetur

When you open a .vue file, we should even automatically recommend this: