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>
Related
Currently I am using prettier and Vetur but neither one will highlight components unless I code them as which is not the practice of the company I am working for. Anyone have any idea how to get syntax highlighting on vue components when they are written ?
I am completely new to Vue and Tailwind. I was just looking at https://tailwindui.com/components/marketing/elements/headers and saw the Requires JS tag. When I copy-paste the code to my project, it gives a blank page. Where do I configure this part to include the JS?
Nvm, I just had to read the documentation. https://tailwindui.com/documentation#using-vue
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
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.