oysun / vscode-vuehelper

:monkey_face:vscode插件，vue，vue-router和vuex的代码提示

VueHelper

Notes

• 版本更新详情请浏览releases
• 关于文件配置问题,请务必看这里：#1

feature

• （1） may be the best vue code snippets plug-ins in Vscode, not only includes the vue2 all api, also contains vue-router 2 and vuex 2 code

• （2） Each snippet has a detailed description, mainly to facilitate learning, because when learning to forget the use of an api, often to consult the document will be a waste of time, so I will increase the description of each code snippet, description of the basis are derived from official documents

  • vue | vue-router | vuex

snippets

• The code standard style base on JavaScript Standard Style

• In vue and vue-router, vuex general $ are the beginning of the vm api,In the vscode code snippet prepared by the $ is a variable, when you enter $ is no role。So for all "$" please enter vm

• Tips for the way Many plug-ins is to use shorthand，for example, the router object method, enter rtb-> will prompt router.beforeEach(),This is convenient, but need to force you to remember, not friendly.So what I've taken is that when you type router, it lists all the properties and methods of the router object

Vue code snippets

vue-router code snippets

vuex code snippets

Installation

• vscode Extensions Marketplace

ext install VueHelper

Contributing

This is an open source project open to anyone. Contributions are extremely welcome :github

Release Notes

More versions of the information, please click here

vscode-vuehelper's Issues

inline style problem

<template>
   <div>
      <p style="padding-left: 10px;">aaa</p>
   </div>
</template>

类似这样的内联样式，在 vue 模式下会格式混乱，在 html 模式下不会。但在 html 模式下不识别 scss 代码！

我安装了VueHelper，但是vue文件不起作用。

js文件有作用，但是vue文件不起作用。请问怎么设置？谢谢！

Vue文件中报错

...mapGetters这行报错，
'Property assignment expected.'

怎样能去掉这个报错提示？

vertu 和 vuehelper 都有Snippet，如何关闭vertu的snippet，默认使用vuehelper都snippet？

vertu 和 vuehelper 都有Snippet，如何关闭 vertu都snippet？

vscode 1.10.2 版本装了无效果

如题

配置问题

在vscode安装之后没有任何效果，还要在哪个地方配置一下吗

如何配置html,css代码提示和代码格式化

把编辑器从html切换到vue编辑器，html、css的代码提示就没了
代码格式化也没了

关于自动生成的代码的格式问题

建议生成的代码格式符合通用的代码规范. JavaScript Standard Style 或者 airbnb javascript style

比如：

"computed": {
  "prefix": "computed",
  "body": [
     "computed:{\n\t$0\n}"
   ],
   "description": "Computed properties to be mixed into the Vue instance. All getters and setters have their this context automatically bound to the Vue instance."
    }

建议在 ":" 和 "{" 之间加一个空格

"computed": {
  "prefix": "computed",
  "body": [
     "computed: {\n\t$0\n}" // ==> 冒号后面加了一个空格
   ],
   "description": "Computed properties to be mixed into the Vue instance. All getters and setters have their this context automatically bound to the Vue instance."
    }

您好，请问这个插件还有人在维护吗？

我想请教一下如何修改提示优先级？我的ts语法类型定义的提示往往会被vueHelper的一些无关提示给挤占到下面去，导致开发变得更麻烦了，修改vscode的snippet为top并不能解决问题

十分感谢您的插件，期待您的回复

script标签里面不出提示

目前发现在.vue文件里面的script标签，输入代码，不出现提示，除了script标签以外，其他地方都可以提示

希望支持Emmet语法

QAQ VScode似乎已经原生支持HTML文件中使用Emmet语法，用习惯后在.vue下无法使用，很是难受

My Snippet Collection

I have a bunch of snippets you might like for this:

https://gist.github.com/crswll/b7d7b2f7f515a2394a78ac532165be6e

zh

zh

中文说明的没了？

The Vue Language Server server crashed 5 times in the last 3 minutes. The server will not be restarted.

what happen?
Is there anyone else have the same problem?

`
/Users/JzKUO/.vscode/extensions/octref.vetur-0.6.1/client/server/node_modules/typescript/lib/typescript.js:10566
throw new Error("start < 0");
^

Error: start < 0
at createTextSpan (/Users/JzKUO/.vscode/extensions/octref.vetur-0.6.1/client/server/node_modules/typescript/lib/typescript.js:10566:19)
at Object.createTextSpanFromBounds (/Users/JzKUO/.vscode/extensions/octref.vetur-0.6.1/client/server/node_modules/typescript/lib/typescript.js:10575:16)
at getErrorSpanForNode (/Users/JzKUO/.vscode/extensions/octref.vetur-0.6.1/client/server/node_modules/typescript/lib/typescript.js:7075:19)
at createDiagnosticForNodeInSourceFile (/Users/JzKUO/.vscode/extensions/octref.vetur-0.6.1/client/server/node_modules/typescript/lib/typescript.js:6999:20)
at Object.createDiagnosticForNode (/Users/JzKUO/.vscode/extensions/octref.vetur-0.6.1/client/server/node_modules/typescript/lib/typescript.js:6995:16)
at /Users/JzKUO/.vscode/extensions/octref.vetur-0.6.1/client/server/node_modules/typescript/lib/typescript.js:21582:58
at Object.forEach (/Users/JzKUO/.vscode/extensions/octref.vetur-0.6.1/client/server/node_modules/typescript/lib/typescript.js:1423:30)
at declareSymbol (/Users/JzKUO/.vscode/extensions/octref.vetur-0.6.1/client/server/node_modules/typescript/lib/typescript.js:21581:28)
at declareModuleMember (/Users/JzKUO/.vscode/extensions/octref.vetur-0.6.1/client/server/node_modules/typescript/lib/typescript.js:21600:28)
at declareSourceFileMember (/Users/JzKUO/.vscode/extensions/octref.vetur-0.6.1/client/server/node_modules/typescript/lib/typescript.js:22646:19)
[Info - 1:51:00 AM] Connection to server got closed. Server will restart.
/Users/JzKUO/.vscode/extensions/octref.vetur-0.6.1/client/server/node_modules/typescript/lib/typescript.js:10566
throw new Error("start < 0");
^

Error: start < 0
at createTextSpan (/Users/JzKUO/.vscode/extensions/octref.vetur-0.6.1/client/server/node_modules/typescript/lib/typescript.js:10566:19)
at Object.createTextSpanFromBounds (/Users/JzKUO/.vscode/extensions/octref.vetur-0.6.1/client/server/node_modules/typescript/lib/typescript.js:10575:16)
at getErrorSpanForNode (/Users/JzKUO/.vscode/extensions/octref.vetur-0.6.1/client/server/node_modules/typescript/lib/typescript.js:7075:19)
at createDiagnosticForNodeInSourceFile (/Users/JzKUO/.vscode/extensions/octref.vetur-0.6.1/client/server/node_modules/typescript/lib/typescript.js:6999:20)
at Object.createDiagnosticForNode (/Users/JzKUO/.vscode/extensions/octref.vetur-0.6.1/client/server/node_modules/typescript/lib/typescript.js:6995:16)
at /Users/JzKUO/.vscode/extensions/octref.vetur-0.6.1/client/server/node_modules/typescript/lib/typescript.js:21582:58
at Object.forEach (/Users/JzKUO/.vscode/extensions/octref.vetur-0.6.1/client/server/node_modules/typescript/lib/typescript.js:1423:30)
at declareSymbol (/Users/JzKUO/.vscode/extensions/octref.vetur-0.6.1/client/server/node_modules/typescript/lib/typescript.js:21581:28)
at declareModuleMember (/Users/JzKUO/.vscode/extensions/octref.vetur-0.6.1/client/server/node_modules/typescript/lib/typescript.js:21600:28)
at declareSourceFileMember (/Users/JzKUO/.vscode/extensions/octref.vetur-0.6.1/client/server/node_modules/typescript/lib/typescript.js:22646:19)
[Info - 1:51:02 AM] Connection to server got closed. Server will restart.
/Users/JzKUO/.vscode/extensions/octref.vetur-0.6.1/client/server/node_modules/typescript/lib/typescript.js:10566
throw new Error("start < 0");
^

Error: start < 0
at createTextSpan (/Users/JzKUO/.vscode/extensions/octref.vetur-0.6.1/client/server/node_modules/typescript/lib/typescript.js:10566:19)
at Object.createTextSpanFromBounds (/Users/JzKUO/.vscode/extensions/octref.vetur-0.6.1/client/server/node_modules/typescript/lib/typescript.js:10575:16)
at getErrorSpanForNode (/Users/JzKUO/.vscode/extensions/octref.vetur-0.6.1/client/server/node_modules/typescript/lib/typescript.js:7075:19)
at createDiagnosticForNodeInSourceFile (/Users/JzKUO/.vscode/extensions/octref.vetur-0.6.1/client/server/node_modules/typescript/lib/typescript.js:6999:20)
at Object.createDiagnosticForNode (/Users/JzKUO/.vscode/extensions/octref.vetur-0.6.1/client/server/node_modules/typescript/lib/typescript.js:6995:16)
at /Users/JzKUO/.vscode/extensions/octref.vetur-0.6.1/client/server/node_modules/typescript/lib/typescript.js:21582:58
at Object.forEach (/Users/JzKUO/.vscode/extensions/octref.vetur-0.6.1/client/server/node_modules/typescript/lib/typescript.js:1423:30)
at declareSymbol (/Users/JzKUO/.vscode/extensions/octref.vetur-0.6.1/client/server/node_modules/typescript/lib/typescript.js:21581:28)
at declareModuleMember (/Users/JzKUO/.vscode/extensions/octref.vetur-0.6.1/client/server/node_modules/typescript/lib/typescript.js:21600:28)
at declareSourceFileMember (/Users/JzKUO/.vscode/extensions/octref.vetur-0.6.1/client/server/node_modules/typescript/lib/typescript.js:22646:19)
[Info - 1:51:03 AM] Connection to server got closed. Server will restart.
/Users/JzKUO/.vscode/extensions/octref.vetur-0.6.1/client/server/node_modules/typescript/lib/typescript.js:10566
throw new Error("start < 0");
^

Error: start < 0
at createTextSpan (/Users/JzKUO/.vscode/extensions/octref.vetur-0.6.1/client/server/node_modules/typescript/lib/typescript.js:10566:19)
at Object.createTextSpanFromBounds (/Users/JzKUO/.vscode/extensions/octref.vetur-0.6.1/client/server/node_modules/typescript/lib/typescript.js:10575:16)
at getErrorSpanForNode (/Users/JzKUO/.vscode/extensions/octref.vetur-0.6.1/client/server/node_modules/typescript/lib/typescript.js:7075:19)
at createDiagnosticForNodeInSourceFile (/Users/JzKUO/.vscode/extensions/octref.vetur-0.6.1/client/server/node_modules/typescript/lib/typescript.js:6999:20)
at Object.createDiagnosticForNode (/Users/JzKUO/.vscode/extensions/octref.vetur-0.6.1/client/server/node_modules/typescript/lib/typescript.js:6995:16)
at /Users/JzKUO/.vscode/extensions/octref.vetur-0.6.1/client/server/node_modules/typescript/lib/typescript.js:21582:58
at Object.forEach (/Users/JzKUO/.vscode/extensions/octref.vetur-0.6.1/client/server/node_modules/typescript/lib/typescript.js:1423:30)
at declareSymbol (/Users/JzKUO/.vscode/extensions/octref.vetur-0.6.1/client/server/node_modules/typescript/lib/typescript.js:21581:28)
at declareModuleMember (/Users/JzKUO/.vscode/extensions/octref.vetur-0.6.1/client/server/node_modules/typescript/lib/typescript.js:21600:28)
at declareSourceFileMember (/Users/JzKUO/.vscode/extensions/octref.vetur-0.6.1/client/server/node_modules/typescript/lib/typescript.js:22646:19)
[Info - 1:51:05 AM] Connection to server got closed. Server will restart.
/Users/JzKUO/.vscode/extensions/octref.vetur-0.6.1/client/server/node_modules/typescript/lib/typescript.js:10566
throw new Error("start < 0");
^

Error: start < 0
at createTextSpan (/Users/JzKUO/.vscode/extensions/octref.vetur-0.6.1/client/server/node_modules/typescript/lib/typescript.js:10566:19)
at Object.createTextSpanFromBounds (/Users/JzKUO/.vscode/extensions/octref.vetur-0.6.1/client/server/node_modules/typescript/lib/typescript.js:10575:16)
at getErrorSpanForNode (/Users/JzKUO/.vscode/extensions/octref.vetur-0.6.1/client/server/node_modules/typescript/lib/typescript.js:7075:19)
at createDiagnosticForNodeInSourceFile (/Users/JzKUO/.vscode/extensions/octref.vetur-0.6.1/client/server/node_modules/typescript/lib/typescript.js:6999:20)
at Object.createDiagnosticForNode (/Users/JzKUO/.vscode/extensions/octref.vetur-0.6.1/client/server/node_modules/typescript/lib/typescript.js:6995:16)
at /Users/JzKUO/.vscode/extensions/octref.vetur-0.6.1/client/server/node_modules/typescript/lib/typescript.js:21582:58
at Object.forEach (/Users/JzKUO/.vscode/extensions/octref.vetur-0.6.1/client/server/node_modules/typescript/lib/typescript.js:1423:30)
at declareSymbol (/Users/JzKUO/.vscode/extensions/octref.vetur-0.6.1/client/server/node_modules/typescript/lib/typescript.js:21581:28)
at declareModuleMember (/Users/JzKUO/.vscode/extensions/octref.vetur-0.6.1/client/server/node_modules/typescript/lib/typescript.js:21600:28)
at declareSourceFileMember (/Users/JzKUO/.vscode/extensions/octref.vetur-0.6.1/client/server/node_modules/typescript/lib/typescript.js:22646:19)
[Error - 1:51:07 AM] Connection to server got closed. Server will not be restarted.
`

0.0.9更新之后，代码高亮和代码提示都没有了

vscode 1.91
vueHelper 0.0.9
vetur 0.3.6
macOS 10.12.2

代码片段

<template lang="pug">
  section#driver-team
    z-nav(title="当前隶属车队")
      router-link.button.button-fill.button-form(:to="{ name: 'DriverCar' }") 下一步
</template>

<style lang="stylus">
#driver-team
  .top
    background #fff
    select
      float right

</style>

<script lang="babel">
import Driver from '../services/Driver.js'
export default {
  name: 'driver-team',
  data() {
    return {
      driver: new Driver(),
      teams: [
         {companyName:'', companyAddress:'', contactMobile:'', contactName:'', id:''}
      ]
    }
  },

</script>

更新前0.0.9之前<script>部分有高亮和提示，'template'部分有提示和高亮，<style>部分有高亮无提示
更新后，所有部分均失去了提示功能，<script>连高亮都没了

已将vueHelper 、vetur重新卸载并安装。依然没有变化
setting中的配置存在或删除均没有用，之前一直开着这个设置，有高亮有提示

  "files.associations": {
    "*.vue": "vue"
  }

新版本下
即使开着js，<script>和'template' 部分均没有提示，之前不开js也是有提示的。

建议在配置中加入提示文字语言的设置

英文读起来还是有点费劲的，要是中文可以大大节省时间，对于初学者也是很好的帮助。
VueHelper-zh分支怎么找不到？

关于vscode文件配置

是否需要在setting.json中如下配置：

 "files.associations": {
        "*.vue": "vue"
     }

看到很多vue插件都需要这样配置，不知道该插件需要这么配置么？

关于组件内导航钩子的语法错误

输入beforeRouteEnter和beforeRouteLeave，得出
beforeRouteEnter((to, from, next) => {
//does NOT have access to this component instance

})，语法报错，应该改成
beforeRouteEnter(to, from, next) {
//does NOT have access to this component instance

}这样才对

这个插件在webstrom里面怎么使用，直接在命令行里npm install vuehelper吗

这个插件在webstrom里面怎么使用，直接在命令行里npm install vuehelper吗，如果有，请说详细一点

Don't get any suggestion

Hello,

I have the latest version installed on vscode 1.10.2
However, when I edit a .vue file I don't get any suggestion. For example, I expect this to provide a compilled description

<script>

export default {
    
    comp
}

</script>

But instead I get nothing.
May this be a collision with any other plugin?

直接在.vue文件中 scss直接内嵌 没有提示？

大神你好啊，我vscode安装的包总是typescript的文件，能改成js的文件吗

关于"$"打头api的提示问题

当我在vue组件想输入this.$set()，输入this.vm后，并没出现提示

如何给出中文解释的提示, 并在选择后自动注释出某个函数的功能介绍,

您好, 如何在将提示中的解释文字更改为中文呢, 并在选择某行提示后, 自动给出注释那个函数的作用. 我看到您之前的一个演示动态图, 是这样实现的.

template里面的html代码高亮问题

Drop syntax definition and split snippets for each languages

Hello, I'm working on vetur, and in 0.3.3 I tweaked embedded snippet support.

For the following code, vetur now will mark each region correctly with its embedded language, like this:

<template>          // vue
                    // html
</template>         // vue
                    // vue
<style>             // vue
div .test {         // css
  list-style: none; // css
}                   // css
</style>            // vue

And snippets will work this way:

• In vue region, vue snippet will be available
• In html region, html snippet will be available
• In css region, css snippet will be available

This applies to all other languages, like scss, stylus, js, ts, etc.

Would you mind

• Suggest users to install vetur and drop the syntax definition in VueHelper. Currently the outdated syntax definition will override vetur's, and it doesn't mark regions and embedded languages correctly. Also I don't want the old syntax definition to be floating around.
• Split snippets into each languages. Now I see you are putting main.json into all languages. For example, vue$on only applies to js or ts, but not css or scss. Once you put that snippet to a separate file, and only define it as a js snippet, it'll only popup in the <script> region in vue SFC.

Thanks!

设置vscode以vue文件解析，VueHelper失效。

"files.associations": {
// ".vue": "html"
".vue": "vue"
}

设置为vue进行解析，vuehelper失效。

11