vuejs / vetur Goto Github PK
View Code? Open in Web Editor NEWVue tooling for VS Code.
Home Page: https://vuejs.github.io/vetur/
License: MIT License
Vue tooling for VS Code.
Home Page: https://vuejs.github.io/vetur/
License: MIT License
Or look into just using VSCode's html.
Visual Studio Code version - 1.8.1
Platform - Windows 8
Vetur version - 0.2.0
Pug beautify version - 1.0.2
Format document option works fine for plain HTML but if I am trying to use lang="pug"
for template, it garbles the template.
Before:
<template lang="pug">
.hello
h1 {{ msg }}
h2 Essential Links
ul
li: a(href='https://vuejs.org', target='_blank') Core Docs
li: a(href='https://forum.vuejs.org', target='_blank') Forum
li: a(href='https://gitter.im/vuejs/vue', target='_blank') Gitter Chat
li: a(href='https://twitter.com/vuejs', target='_blank') Twitter
br
li: a(href='http://vuejs-templates.github.io/webpack/', target='_blank') Docs for This Template
h2 Ecosystem
ul
li: a(href='http://router.vuejs.org/', target='_blank') vue-router
li: a(href='http://vuex.vuejs.org/', target='_blank') vuex
li: a(href='http://vue-loader.vuejs.org/', target='_blank') vue-loader
li: a(href='https://github.com/vuejs/awesome-vue', target='_blank') awesome-vue
</template>
After:
<template lang="pug">
.hello h1 {{ msg }} h2 Essential Links ul li: a(href='https://vuejs.org', target='_blank') Core Docs li: a(href='https://forum.vuejs.org',
target='_blank') Forum li: a(href='https://gitter.im/vuejs/vue', target='_blank') Gitter Chat li: a(href='https://twitter.com/vuejs',
target='_blank') Twitter br li: a(href='http://vuejs-templates.github.io/webpack/', target='_blank') Docs for This Template
h2 Ecosystem ul li: a(href='http://router.vuejs.org/', target='_blank') vue-router li: a(href='http://vuex.vuejs.org/',
target='_blank') vuex li: a(href='http://vue-loader.vuejs.org/', target='_blank') vue-loader li: a(href='https://github.com/vuejs/awesome-vue',
target='_blank') awesome-vue
</template>
I have installed pugbeautify but am not able to figure out how to delegate the document format to pugbeautify from .vue files.
How can I get code IntelliSense for typescript in vue file?
I used ctrl+/ want to annotation that is wrong for template and I key like col-md-3 when key - intellisense hide and scss is the same.
can you fix that.
thank you.
I want to support typescript
<template>
</template>
<script>
// content
</script>
<style lang="scss">
@import '~styles/main.scss';
section[role='alert'] {
@extend .alert;
@extend .alert-dismissible;
border-radius: 0;
margin-bottom: 0;
background: darken(white, 2);
border: 0;
z-index: 1;
> div {
@extend .container;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-content: stretch;
align-items: flex-start;
div {
order: 0;
flex: 1 1 auto;
align-self: auto;
}
}
P:last-of-type {
@extend .mb-0;
}
}
</style>
Format it with shortcut shift+alt+f
, scss
are not formatted
Seems ternary operator in vue-directive works with latest insider.
I have .html files set up to use the vue-html language by default. I have my templates in separate .html files. Up until the latest version it worked great. For some reason with latest version (0.3.5) it's not showing any highlighting anymore. I don't have any template tags or anything around the content since it's just straight up .html files.
TS^2.0.3
/extensions/html
to node exampleI'm using VS Code built in Handlebars association for .vue
files. It's working pretty well (Intellisense and autocomplete included), but comments. I guess would be much simpler use this as a starter point.
This plugin is the best in the vue plugin.
Whether emmet can support css/sass/scss/less/stylus.
<template>
<element :statechanged="(a == b) ? x : y"></element>
<span :class="{'thing': true}"></span>
</template>
produces this output
Removing the ? from the expression immediately fixes the highlighting after it.
I no longer get autocompletions of tags in vue-html language mode.
Easy test case: type in <ul></
it won't show the auto-close for the ul anymore.
Emmet seems to no longer work either. Typing div.test
and pressing tab just inserts a tab.
This should be provided by another extension.
I've created my own snippet for Vue files, but using this plugin it doesn't load any suggestion. For example, adding this snippet configuration:
"Vue Template": {
"prefix": "full",
"body": [
"<template>\n",
"</template>\n",
"<script>",
"export default {\n\tname: \"$TM_FILENAME\"\n}",
"</script>\n",
"<style lang=\"scss\">\n",
"</style>"
],
"description": "Vue Template"
}
Indeed, it doesn't show any snippet at all. Only when I manually add the <template>
, <script>
or <style>
tags.
VSCode's html does have this capability, like marking errors for CSS in <style>
.
Look into how to restore that and extend to SCSS/LESS regions.
lang="jade'
is still valid in the current vue.yaml grammar.
@stealthybox if you still want to give it a try.
allow the use of <template lang="pug">
too
https://code.visualstudio.com/updates#_javascript-language-support-in-html
Vscode gets full JavaScript language support in HTML files. So this feature may help
Is it possible to add syntax highlighting support to template literals when not using .vue files.
{
template: `
<div :class="['loading', {'loading-dark': dark, 'loading-small': small}]">
<i class="fa fa-spinner fa-pulse"></i>
</div>
`,
props: {
dark: {
type: Boolean,
default: false
},
small: {
type: Boolean,
default: false
}
}
};
Low hanging fruit.
The new grammar doesn't handle a few cases for SFC yet.
https://vue-loader.vuejs.org/en/start/spec.html
Especially important are scoped/module style block, src import, postcss, and comment.
Its syntax is much easier for editing and reading.
Can you please use html syntactic annotation in the Vue <template> tag?
Now we used ctrl+/ in Vue <template> tag it show "//".
Hi,
I notice that word based suggestion not enable in .vue file. Really hope it can be done by you as your work is really awesome!
如标题所说,之前版本是好着的,更新到0.3.3版本后<style scoped><style>这种带有scoped标识的样式高亮失效。
I noticed that in HTML, vetur provides nice Javascript syntax highlighting inside Vue directives and inside {{ }}, etc. in the template. Is there any way to make that also work when using Jade/Pug?
the text will be blood red.
I hope can get typings like @types/jquery in the vue file.I can get this feature in the js file.but I can't trigger intellisense in the vue file.Will you support this?thank you and best regard
is there a way , i can use emmet css and emmet html
hand in hand in vue files
if i enable it...
if i try to use emmet for html
i cant get it to work
"emmet.syntaxProfiles": {
"blade": "html",
// Activate this if you will Heavily Style
"vue": "css"
},
doing something like this
pb!
padding-bottom: !important;
when i do div.row
display: .row;
so is there a way i can use both emmet css and html
without having conflict?
lets say make the scope only apply to style tag for css
and template tag for html?
The current CompletionProvider
based VSCode's html extension needs improvement.
This is to write a new CompletionProvider
to satisfy the following goals:
<span v-text="|"></span>
here it should suggest all possible values (props, computed props) for the current component.FooBar.vue
-> <foo-bar>
.SnippetString
in CompletionItem
to provide Vue API
Things need to look into:
SnippetString
for ISvscode-textmate
for getting scope infoWhile doing it, maybe also add a custom Diagnostics that shows error, such as v-if
using non-existing prop.
I've noticed that the syntax highlighter doesn't support cascading <template>
tags. If I try to do this inside of a component the highlighting breaks.
The highlighting doesn't work for SCSS for the following sample:
<style lang="scss">
@import "scss/bootstrap/mixins/_buttons.scss";
$brand-primary: #3c763d !default;
$btn-primary-color: #fff !default;
$btn-primary-bg: $brand-primary !default;
$btn-primary-border: darken($btn-primary-bg, 5%) !default;
.btn-primary {
@include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
}
</style>
All shows formatted when in a .scss file
Is there a way to get a autocomplete html attributes, css/stylus attributes, js?
In template tag, Emmet syntax is not available.sucks!
Hi,
Please add the following to the readme, as it affects users installing this extension who also uses ESLint.
After installing vetur, your .vue files will be mapped to 'vue' type in VSCode, which will break the eslint validation that you may already have for HTML files.
To fix that, add "vue" to the list of types to validate in your settings.json file:
"eslint.validate": [
"javascript",
"javascriptreact",
"html",
"vue"
],
Thanks
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.