关于vscode文件配置 about vscode-vuehelper

[OYsun]

@lili1995 @u3u @nicefan @yoyo930021 @soakit

最近由于忙于毕业论文，另外还有很多项目去做，所以对这个插件的一些问题没有及时修复，本来我和vetur沟通在安装VueHelper安装vetur来解决代码高亮问题，但是这里出现了一些问题（vuejs/vetur#54 ）， 使用vetur在template中没有提示。而且有用户反馈在VueHelper绑定vetur的依赖导致不便，我仔细研究了一下，事实上。vscode把vue文件看作html文件已经是解决了vue代码高亮的问题，html文件中内嵌js，css代码高亮和智能提示已经比较完善了。也就是说，你可以不需要vetur也可以实现vue代码高亮，但是安装了vetur可以解决ass/scss/less/stylus代码报错的问题。所以在0.1.0版本我去掉了vetur的依赖，VueHelper只专注于代码提示功能，对于vue文件问题现在有如下选择
（1）如果不使用vetur这个插件，请不要添加下面设置：

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

vscode会自动将vue文件视为html文件，如果没有效果你可以尝试下面配置

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

这样的话，VueHelper代码提示可以正常使用，vue文件也有高亮，但是使用scss，less，stylus会报语法错误

（2） 如果你使用vetur这个插件，则依照vetur插件的配置，不过，使用了vetur。VueHelper在template中没法提示。这个bug还等待vetur的作者修复（vuejs/vetur#54 ）

（3） VueHelper目前和未来只专注于vue，vue-router，vuex（后续如果有其它官方库的话还会继续添加）代码提示的功能，不会和其它的vue插件冲突，当然代码提示功能不仅仅是简单的用户代码片段，随着自己工作和对vscode加深理解。我会好好研究如何让代码提示更人性化，更智能，提高大家开发vue的效率，一起回馈vue社区。

我对自己考虑不周而改动项目导致用户不便表示深深的歉意！

[nicefan]

我的版本是1.81，如果不加配置，jade,stylus,都不会语法高亮了，而且stylus会报css语法错误

[OYsun]

@lili1995

vscode默认将vue后缀的文件当作html，现在1.8版本支持html中的css和js的代码提示https://www.zhihu.com/question/43918020

起初，之前vue插件这么配置

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

是让vue后缀的文件就当作vue文件格式来解析，vue插件package.json都有

"snippets": [
            {
                "language": "vue",
                "path": "snippets/vue.json"
            }
     ]

这么一段代码，但是这样会出现一些问题，因为如果你有其它snippets的插件，比如 htm5 snippets 和 javascript code snippets 在vue文件中无法作用，因为这些插件没做这项配置，所以，你没法在 template 有html标签提示，在<script>也没有javascript语法的提示，比较蛋疼。当然你觉得写vue组件不需要这些代码提示，认为这样比较清静也是可以的。我对这这插件是这样设置

"snippets": [
            {
                "language": "javascript",
                "path": "./src/snippets/main.json"
            },
            {
                "language": "typescript",
                "path": "./src/snippets/main.json"
            },
            {
                "language": "html",
                "path": "./src/snippets/html.json"
            },
            {
                "language": "vue",
                "path": "./src/snippets/main.json"
            },
            {
                "language": "vue",
                "path": "./src/snippets/html.json"
            }
        ]

所以你加不加那段配置代码都没关系

[Moerj]

如果不写
"files.associations": {
"*.vue": "vue"
}

template中没有代码高亮

如果写了，则script中没有js提示

[dongshimou]

vscode version 1.10.1
安装插件后，需要先打开一个.js文件之后才会给.vue文件进行提示以及自动补全。

[terevor]

目前vscode升级到1.10.2，装了VueHelper后vue文件中没有语法高亮，需要设置"files.associations": {"*.vue": "html"}，但是style里的less、scss、stylus报语法错。

然后装了vetur，发现style还是语法报错，删掉"files.associations": {"*.vue": "html"}后解决。但是VueHelper在template中的snippet又没了。。。orz

最后没招了，利用vs自带用户代码片段功能解决问题：
1、从VueHelper的html.json中，把V-templates和template拷到用户代码片段的的vue.json里，其他拷到vue-html.json里。
2、从VueHelper的javascript.json中，把所有内容拷到用户代码片段的javascript.json中。

[lili1995]

👍 谢谢

[u3u]

语言模式选择 html 是最佳的 不过有一个比较蛋疼的问题 vscode 不支持内联 scss 语法

[yoyo930021]

+1

[soakit]

1.9.1与@nicefan有同样的问题

[nicefan]

vscode升级到最新，装vuter插件，加上vue文件associations配置，已经可以完美语法高亮，代码提示了

[nicefan]

那就奇怪了，我的怎么没问题？我刚核对了一下，vscode1.91，vetur0.3.4，没做其它设置了。 发自我的超级手机 2017年2月21日 21:38于 萌耳君 <[email protected]>写道： @nicefan<https://github.com/nicefan> vscode1.9.1,装了vuter和VueHelper，设置了vue的associations，但是在.vue文件中的script写js没有原始js提示了 ― You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<#1 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/APEH_Smgrx-C8O6avIoaOXQULX1qsIWpks5reui8gaJpZM4LUlvW>.

[OYsun]

@nicefan @u3u @yoyo930021 @soakit @lili1995 主要原因是fork自vetur的vue代码高亮功能没有及时同步，目前在0.0.9已近解决，VueHelper的代码高亮功能不再fork自vetur。而是依赖于vetur，安装VueHelper会同时安装vetur。VueHelper专注于代码提示功能部分。

[Moerj]

@OYsun 已更新0.0.9,在html模式下依然没有代码高亮，切换成vue语法模式有高亮但script中缺少原生js提示

[nicefan]

@Moerj 你单独安装了vetur插件了吗？

[Moerj]

之前单独装过，不行。然后我把vetur和vuehelper都删掉，再重新安装vuehelper，它自动依赖vetuer并安装。测试，还是同样的问题 发自我的 iPhone

…

在 2017年2月22日，12:11，nicefan ***@***.***> 写道： @Moerj 你单独安装了vetur插件了吗？ — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[OYsun]

@Moerj 请看这个#9

[Moerj]

@OYsun #9 看过了的，在html模式下需要先开打一个js文件才会有vuehelper的提示，在vue模式下，vscode就是不认script标签了。其失去了原生JavaScript提示

另外，
"files.associations": {
"*.vue": "vue"
}
我也去掉了的

[huanglong6828]

@OYsun 我今天更新0.0.8后也出现了没有语法提示了 更新0.0.9同样存在 代码高亮都存在 就唯独不提示 但是在.js文件中有提示 .vue文件中就不行 需要一直打开.js文件在.vue中才有提示，关闭后就又没有了

[octref]

Hello I'm working on vetur.

This is VSCode 1.11.1 with vetur 0.5.6 and VueHelper 0.1.0.

[wuxiaolan91]

我装的最新版的VueHelper也没有Vue的代码提示。
我没有装vuetr，以前装过但是现在卸载了。
我的VSCode版本是1.12.2
我看作者你的回到貌似是让我们改你这个插件的package.json?
但是那个对我们使用者是封闭的呀。怎么改呢。

[DawnLck]

目前vscode升级到1.10.2，装了VueHelper后vue文件中没有语法高亮，需要设置"files.associations": {"*.vue": "html"}，但是style里的less、scss、stylus报语法错。

然后装了vetur，发现style还是语法报错，删掉"files.associations": {"*.vue": "html"}后解决。但是VueHelper在template中的snippet又没了。。。orz

最后没招了，利用vs自带用户代码片段功能解决问题：
1、从VueHelper的html.json中，把V-templates和template拷到用户代码片段的的vue.json里，其他拷到vue-html.json里。
2、从VueHelper的javascript.json中，把所有内容拷到用户代码片段的javascript.json中。

我也是这个问题