使用vscode编写vue简单配置

作者: markdown | 来源:发表于2016-09-29 18:54 被阅读23607次

    PS:现在推荐使用vetur插件
    win10崩溃,重装win7,结果sublime text插件无法安装,各种心塞,于是决定转战vscode。

    与sublime text相比,vscode有不少优点:

    1. 中文输入法支持更好。在windows平台下,需要st支持中文输入需要安装各种插件,而且效果也是差强人意。
    2. 基础功能更全面。vscode自带插件管理、git、sidebar、集成终端、emmet等功能,st每次都需要自己安装,浪费时间。

    但是st插件更丰富,vscode插件相对较少,vue相关插件vscode更是只有一个,而且使用起来有不少问题,并且作者已经很久没有更新了,折腾了一下午,最终可以用来编写vue项目了。
    vscode关于vue插件现在只有vscode-vue一个,安装完成代码提示并没有生效,这是因为vue文件的语言模式默认为html,需要在setting.json中设置:

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

    但是此时编写样式emmet插件不能正确识别,所以我后来也放弃了这种方式。

    仔细思考,编写vue项目主要需要:

    1. 代码补全&代码片段
    2. emmet正确生成html标签
    3. emmet正确生成css、scss
    4. 代码高亮

    其中2、3、4点,在html中都是可以做到的,而vue的代码补全与代码片段只需要自己编写就可以了,于是我将vue文件的语言模式还原为默认的html,在用户代码片段中加入vue文件需要的代码片段(文件-首选项-用户代码片段-html),最终效果还可以。

    添加的代码片段(持续更新):

    {
        // Place your snippets for HTML here. Each snippet is defined under a snippet name and has a prefix, body and 
        // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
        // $1, $2 for tab stops, ${id} and ${id:label} and ${1:label} for variables. Variables with the same id are connected.
        // Example:
        "Print to console": {
            "prefix": "log",
            "body": [
                "console.log('$1');",
                "$2"
            ],
            "description": "Log output to console"
        },
        "Create vue template": {
            "prefix": "vuec",
            "body": [
                "<template>",
                "</template>",
                "<script>",
                "export default {",
                "  name: \"${1:component_name}\",",
                "  data () {",
                "    return {",
                "    };",
                "  }",
                "}",
                "</script>",
                "<style lang=\"${2:css}\" scoped>",
                "</style>"
            ],
            "description": "Create vue template"
        }
    }
    

    相关文章

      网友评论

      • ff182cf48457:朋友,你好,在vscode里编辑vue,不能智能提示,有什么方法解决 啊?
      • 到海边看花儿:今天告别sublime, 转战vscode
      • GLSTG:博主你好,我修改了json设置,新建.vue的时候模板没有出来啊0.0
        markdown:现在vue文件有对应的语言模式了,如果你没有设置默认的模式就为vue,现在你设置代码片段应该在vue或vue-html中设置。另外如果你的文件没有设置语言模式代码片段也不会出来,新建文件时,没有保存后缀时,会发生这种情况。语言模式查看右下角,另外现在可以使用插件vetur,这个插件对vue支持很好,基本满足要求,除了没有代码片段。
      • EDiaos:最近再用Atom感觉也挺好的
        hzieept: @EDiaos 内存会泄露的
        markdown:@EDiaos atom\sublime\vscode其实都不错,看哪个用的顺手吧!

      本文标题:使用vscode编写vue简单配置

      本文链接:https://www.haomeiwen.com/subject/ptclyttx.html