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

Question

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

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

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

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

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

加入配置

{
    "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三个字母，就会出现提示，回车就能自动补全这些代码

Answer 1

张轩 2021-12-16 09:41:08

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

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

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

• 提问者 LayLowMay #1

  我用的也是volar，感觉补全没有那么猛啊老师！第二个我去试一下吧！