vscode对于import,和新建模板的自动补全的自动补全

来源:3-3 使用 vue-cli 配置 vue3 开发环境

LayLowMay

2021-12-15

老师我又来和您交流了,这次遇到的情况是以下两个,我找到了自己的解决方法,您看看是否符合正常的开发习惯?


第一个是对于import的自动补全。无论是在vue文件还是在ts文件我们都有可能需要导入一些东西,但vscode好像对于import的自动补全没有很好的支持,于是我的方法是自己下载了vscode插件插件Path Intellisense,并在vscode的settings.json进行了配置

{
    ...
    "path-intellisense.mappings": {
       "@": "${workspaceRoot}/src",
       "/": "${workspaceRoot}/"
     }
    ...
}

就能获得以下补全提示,列出输出路径下的所有文件

http://img.mukewang.com/szimg/61b9d81609f530d307840653.jpg

http://img.mukewang.com/szimg/61b9dc000964dd3410020318.jpg


第二个是对于新建vue文件后,需要写一些基本的代码片段十分麻烦,于是我在vscode的【文件-->首选项-->用户片段】,选到vue.json

http://img.mukewang.com/szimg/61b9d9de095aa55d09030646.jpg

加入配置

{
    "vue-ts": {//模板名称
        "prefix": "vts",//触发条件
        "body": [//内容
            "<template>",
            "</template>",
            "<script lang=\"ts\">",
            "import { defineComponent } from 'vue'",
            "",
            "export default defineComponent({",
            "})",
            "</script>",
            "<style scoped>",
            "</style>\n"
         ],
         "description": "vue-ts template"//描述    
      },
}

然后在vue文件打赏vts三个字母,就会出现提示,回车就能自动补全这些代码

http://img.mukewang.com/szimg/61b9db2f098660ff10530241.jpg


http://img.mukewang.com/szimg/61b9daf309dab11a11070442.jpg

http://img.mukewang.com/szimg/61b9db670949d56f10200366.jpg

写回答

1回答

张轩

2021-12-16

同学你好 非常喜欢你的探索精神 很棒

第一个问题,我建议你直接抛弃 vetur 直接使用 volar,它目前是 vue 主推的 vscode 插件,比 vetur 好用很多。地址 https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar 我使用的过程中,可以很好的解决第一个问题,不需要另外的插件。

第二个问题,这种代码片段叫 snippets,除了你可以自己新建,还可以使用插件,比如 https://marketplace.visualstudio.com/items?itemName=hollowtree.vue-snippets  这里面有一系列写好的代码片段,很好用,可以安装试试看。

0
1
LayLowMay
我用的也是volar,感觉补全没有那么猛啊老师!第二个我去试一下吧!
2021-12-16
共1条回复

Vue3 + TS 仿知乎专栏企业级项目

带你完成前后端分离复杂项目,率先掌握 vue3 造轮子技能

3142 学习 · 2313 问题

查看课程