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