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}/"
}
...
}就能获得以下补全提示,列出输出路径下的所有文件


第二个是对于新建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三个字母,就会出现提示,回车就能自动补全这些代码



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 这里面有一系列写好的代码片段,很好用,可以安装试试看。
012021-12-16
相似问题
回答 1
回答 1