I am starting to learn Vue, using Visual Studio Code. I downloaded an extension that adds Vue code snippets (Vue 2 Snippets by hallowtree).
When I start to type "v" in a Vue template, suggestions are shown (v-on, v-bind, etc.),
but afterward, no suggestions or autocompletions are shown.
In the following example template, v-on is suggested, but afterward, no suggestions for "click" or any other event. Also, nothing is suggested after "#":
<button v-on:click="changeLink">Click to change Link</button>
<button #click="changeLink">Click to change Link</button>
And in this example, v-bind is suggested, but afterward, no suggestions for "href" or any other HTML properties/attributes:
<a v-bind:href="link">Link</a>
<a :href="link">Link</a>
Although it's good for me for practicing, it will become a liability.
Are there any extensions, options, or commands I can set up to improve the developer experience?
Vetur has had experimental template interpolation for autocomplete and "diagnostics / hover / definition / references" within HTML templates since February 2019.
Enable the Vetur › Experimental: Template Interpolation Service option in your VS Code settings to turn on this feature.
add the Vetur extension on visual-studio-code it includes many other nice features besides auto completion vue code
Related
VsCode doesn't recognise "this" keyword in methods (or anywhere in script tag) in my vue file.
Therefore it doesn't help when I hover or click a variable that starts with "this" keyword. On the other hand in template tag there isn't any problem with variables and functions.
You can see in the screenshots, like this;
IntelliSense for "this" keyword in script
IntelliSense in template
I am using VsCode for frontend development with Vue 2. I have Volar extensions, typescript setups. I don't know what exactly this problem is about. Can you help me solve it?
Table.vue contains Row.vue and Form.vue inside.
Wanted behavior:
Row of the table will say the component comes from Row.vue
I was right-clicking the Row and went on "View page source", "inspect" and explored, but I couldn't find the answer.
Any solutions?
Also it would be awesome if there's a tool that helps with what I explained above with visual like this: instead of margin, border and such. It would be like Table.vue, Row.vue, etc...
I'm sorry it's not clear to me what you're trying to achieve, but there is a browser-based tool that might help you with debugging. It is compatible with both v2 and v3 and can be installed on firefox or chromium-based browsers
https://devtools.vuejs.org/
use this icon to target the component
How can I make it so my HTML in my JS file is not just yellow? How can I give it Syntax Highlighting in VSCode?
Install Vue Inline Template in vscode. here
If you separate your code into components and install the following plugin It will give you IntelliSense and syntax highlighting for Vue.
See an example here --> https://codesandbox.io/s/o29j95wx9
Good example of it here from the Vue docs --> https://v2.vuejs.org/v2/guide/single-file-components.html
I think VS code has to see it separated out into blocks below for it to properly do syntax highlighting otherwise it'll just detect what you have declared in the template as strings.
<template></template>
<script></script>
<style></style>
I have a very annoying problem with my sublime snippet about .vue type flie.
Say I want to add a vue snippet in sublime on my own, and I want the vue tabtrigger below works in vue type file only.
I add these codes into my vue.sublime-snippet:
<snippet>
<content><![CDATA[
Some text
]]></content>
<tabTrigger>vue</tabTrigger>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<scope>source.vue</scope>
</snippet>
After saving this file in my sublime folder, I create a test.vue file and type vue and then press Tab.
But nothing happened. What I expected is Some text could appear after tabbing in test.vue file.
Why doesn't my snippet work on vue file?
PS: I changed source.vue into source.js source.php,etc in my snippet and tested in corresponding js, php file, they all work fine. Only vue didn't work out. Is there anything wrong with sublime identifying vue type file? How to solve this problem?
The correct scope selector to use for Vue.js is text.html.vue, which can be seen by creating a new, empty tab in ST, setting the syntax to Vue.js and then going to the Tools menu -> Developer -> Show Scope Name or by checking the syntax definition: https://github.com/vuejs/vue-syntax-highlight/blob/f87459fc1bf26a4b8e50e232757d4682892c971d/vue.tmLanguage#L1465-L1466
I recently faced the same issue and I used source.js as the scope selector.
<snippet>
<content><![CDATA[
your snippet here
]]></content>
<tabTrigger>vue</tabTrigger>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<scope>source.js</scope>
</snippet>
I am using Vue.js for one of my frontend projects.
As you know, Vue comes with special syntax for components - each component can be declared in a single .vue file. That means, that you can define all related stuff in a single file like this:
<tamplate>
...component template goes here...
</template>
<script>
...component code goes here...
</script>
<style>
...component style goes here...
</style>
Of course vue support in various IDEs isn't perfect yet. Vue is relatively young framework, but I think it will be popular very soon. It looks so straightforward and predictable after Angular that I even decide to use it in all upcoming frontend projects, but it is, of course, another story.
Ok, WebStorm doesn't know anything about .vue files, but vue looks like html, so you can solve that problem easely - just add *.vue pattern to list of patterns for HTML file type (settings -> editor -> file types).
After that tweak everything works fine until you try to use non-css styles - for some reasons WebStorm fails to highlight embedded styles with type text/less and so on. I tried to solve it in a different ways:
<style type="text/css></style>
or
<style rel="stylesheet/less"></style>
...but without any success.
Fortunately vue-loader (that I am using with WebPack in order to build my project) supports another syntax of .vue files, which allows to declare template, code and style in a separate files. It is ok, but I think that single file per component is better (at least it's easier to manage). And now I am forced to declare my styles separately because I can't let WebStorm to highlight embedded LESS styles.
I tried to use WebStorm language injections, but without any success too (or I just miss something in my WebStorm configuration).
So, the final question is: how to enable syntax highlighting for embedded LESS styles in WebStorm 11?
Such support is not possible in WebStorm v11/PhpStorm v10 -- only CSS is available as injectable language.
However the next version (WebStorm v12/PhpStorm v11) already supports it -- just use appropriate rel="stylesheet/less" (in case of LESS) attribute on your <style> tag.
If you want to use another attribute or value to identify what language is meant to be used in your <style> tags or enable this for another (already supported by IDE) CSS-preprocessor (e.g. Sass/SCSS/etc) -- create custom injection rule at Settings/Preferences | Editor | Language Injections.
As of 2017.1 version some other improvements/changes were made -- see WEB-20921 : Add support for valid HTML syntax for including LESS/SCSS in <style> tags
ticket for details.