Vue+Ts开发过程中，vscode使用&遇到的问题

Nayana
885 阅读2分钟
使用vscode开发Vue3项目注意事项

1.基本约定的格式配置和团队保持一致，详情见清哥笔记

地址奉上 juejin.cn/post/696158…

2.vetur不兼容vue3.2版本，引入的comsiption API方法时报错“Module无法找到”

解决办法：卸载vetur或者在setting中添加配置

  "vetur.experimental.templateInterpolationService": false,
  "vetur.validation.template": false,
  "vetur.validation.style": false,
  "vetur.validation.script": false,

3.卸载vetur之后安装 Volar 用来高亮、语法提示

vcode安装插件提高效率
vcode常用插件
Auto Close Tag自动合并html标签
Auto Rename Tag自动合并重新修改的html标签
color Highlightcss 颜色高亮
css peek调试css样式的必备插件 鼠标放在类名，id上的时候，显示css定义所在文件位置
HTML CSS Support （与css peek 合用）显示出此类型下的css样式，并可以直接跳转到css文件
Git history Diff等git插件自动合并html标签
HTML CSS Support让 html 标签上写 class 时，智能提示当前项目所支持的样式
HTML SnippetsHTML 代码片段以及提示
Image preview引入图片预览
JavaScrpit(ES6) Snippetses6代码片段提示
File Peek快速定位打开文件
KororFileHeader文件注释或方法注释
Path Intellisense文件路径提示
npm验证pakage.Josn 的插件是否安装
open in brower在浏览器打开
prettier文件格式化插件
Bracket Pair Colorizer标注括号，避免括号不闭合
Error Length提示语句错误的插件
chinese汉化插件
开发项目可能遇到的问题
  • 1.Vscode编辑器中插件标签提示可能会失效，Auto Close Tag, Auto Rename Tag会失效

因为文件的模式被设置为了vue文件，改回HTML的话，ts语句会报错 解决办法

//回车补全标签
 "emmet.triggerExpansionOnTab": true,
 
 ### 开启emmet提示在vue文件中提示html片段
"emmet.includeLanguages": {
        "vue": "html"
    }

开发Vue2时Auto Close Tag, Auto Rename Tag任然失效的解决方式如下：

VSCode>>设置(搜索prevent)>>取消下图勾选

内网通截图20220601095811.png blog.csdn.net/qq_37162688…

一般设置好提示功能就修复了，若还未修复则查看 vscode对当前文件的解析可能还是（Vue类型） 内网通截图20220601100011.png 因此手动修改 内网通截图20220601095844.png

  1. HTML Snippets提示无效和上一问题同理，文件.vue文件无法提示需要把 .vue文件关联解析成.html类型只是用于不使用TS的项目，不然会报错，错误大致内容提示：类型校验只能出现在ts文件中。 解决办法： 在setting.json中加入


     ### 开启emmet提示在vue文件中提示html片段
"emmet.includeLanguages": {
        "vue": "html"
    }

在vue2开发时如果遇到这个问题解决办法参照同类问题1的解决方式

avatar
文章
阅读
粉丝