vscode中 vue3+ts 项目的提示失效,volar插件失效问题解决方案

这篇具有很好参考价值的文章主要介绍了vscode中 vue3+ts 项目的提示失效,volar插件失效问题解决方案。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前情提要

volar有没有类似@ts-ignore,TypeScript,vscode,ide,编辑器
说起来很耻辱,从mac环境换到window环境,vscode的配置都是云端更新过来的,应该是一切正常才对,奇怪的是我的项目环境出现问题了,关于组件的ts和追踪都没有效果,再经过一上午的排查和试错后,终于被我解决,问题的原因是volar和ts环境之间的版本不匹配,下面来看下我的解决过程和问题复现。


bug回顾

大家的插件库里应该都有一个这样的插件
volar有没有类似@ts-ignore,TypeScript,vscode,ide,编辑器
这是一个增强我们ts开发体验的插件,有了它之后我们的开发会很有乐趣,比如,我们自定义了一个组件,那么它里面有哪些参数,该插件就会帮我们提示,例子如下:
volar有没有类似@ts-ignore,TypeScript,vscode,ide,编辑器
尤其是使用一些三方组件的时候,很多属性是未知的,所以这样的提示必不可少。那么我的问题就是没有这些提示和组件高亮追踪了,如下所示:

volar有没有类似@ts-ignore,TypeScript,vscode,ide,编辑器
可以看到标签高亮也没有,属性提示更是不存在


解决方案

前面提到,我调研到是Volar和TS的版本问题,所以,我们要切换Volar插件的Ts版本

ctrl+shift+p 出现命令板,输入如下命令并点击:>Volar:select Type

volar有没有类似@ts-ignore,TypeScript,vscode,ide,编辑器
出现下面这个选项后,可以看到,当前vscodes的 ts 版本是5.4,而项目依赖的是4.82,所以切到项目依赖的版本上去,我们的Volar就可以重新使用了。
volar有没有类似@ts-ignore,TypeScript,vscode,ide,编辑器


最后

📚 Typescript
☃️ 个人简介:一个喜爱技术的人。
🌞 励志格言: 脚踏实地,虚心学习。
❗如果文章还可以,记得用你可爱的小手点赞👍关注✅,我会在第一时间回、回访,欢迎进一步交流。文章来源地址https://www.toymoban.com/news/detail-768244.html

到了这里,关于vscode中 vue3+ts 项目的提示失效,volar插件失效问题解决方案的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3+vite+ts项目搭建之后,vscode文件夹下红色波浪线问题

            搭建完vue3+vite+ts项目之后,用vscode打开项目,发现 .vue 文件和 main.ts 文件夹下都有红色破浪线(如下图所示)。几番周折终于解决了这个问题。 1. 解决.ts文件报错 报错原因:ts不识别.vue后缀的文件。 解决方式:创建脚手架的时候,项目的根目录下会生成一个en

    2024年02月04日
    浏览(20)
  • Vue3 + Vite + Ts 开发必备的 VSCode 插件

    Vetur:Vue 语法高亮和语法检查插件。 Vue Peek:快速定位 Vue 组件和模板。 Vue 3 Snippets:快速生成 Vue3 相关代码的代码片段。 Vue VSCode Extension Pack:包含了一系列优秀的 Vue 相关插件,如 Vetur、Vue Peek、ESLint 等。 Vite:Vue 官方提供的快速开发工具,可以快速构建和启动项目,同时

    2024年02月05日
    浏览(37)
  • vscode vue2 + volar 全局代码提示

    这几天更新vscode vetur的后  项目一直转loading加载不出来了,索性就直接换volar了。 一、基础配置 但是volar的配置在vue3和vue2里是不太一样的   需要一些额外的配置。记录一下踩坑。 首先vscode安装扩展 Vue Language Features (Volar) 、 TypeScript Vue Plugin (Volar)  并且卸载或者禁用掉原

    2024年02月16日
    浏览(20)
  • Vue项目VScode提示失效(一直在加载中、ctrl+鼠标左键失效)

    最近打开前端项目发现一些奇怪的现象: 代码提示没了 ctrl+鼠标左键失效 鼠标放错误代码一直显示“正在加载” vscode下方一直显示“load project xxx” style中 颜色预览小方块不见了 解决方法: 这个问题其实是插件冲突问题,是Vetur和Eslint冲突,打开插件管理,安装另一个版本

    2024年02月15日
    浏览(15)
  • vscode配置Volar对vue3的格式化支持

    在浏览vue的官方文档时,看到了一句Volar VSCode 插件为 Vue SFC 提供了开箱即用的格式化功能,官方推荐的,立马试试 在vscode中启用volar时,鼠标右键会显示使用…进行格式化 选择volar 通过项目vscode编辑器配置来保存时自动进行格式化 在项目根目录下创建以下文件并配置 .vsco

    2024年02月13日
    浏览(22)
  • vite+vue3+ts项目中提示无法找到模块

    今天在开发过程中碰到了导入模块时提示无法找到模块这个问题,分享一下我的解决思路 首先产生这个错误是: 无法找到模块XXX,并且提示\\\'XXX\\\' is declared but its value is never read 产生这个问题的原因是我们使用了ts语法,他只能识别.ts文件,并不能识别.vue文件,所以在引入组件

    2024年02月11日
    浏览(20)
  • 解决vue3 + vite + ts 中require失效的问题(require is not defind)

    require is not defind  因为 require 是属于 Webpack 的方法,vite中找不到这个方法肯定报错 解决方法:创建一个工具文件getImge.ts 使用工具文件: html中

    2024年02月16日
    浏览(22)
  • 【必备】用VSCode开发Vue程序必备插件之一Vue Language Features (Volar)

    通过安装该插件 才能通过赚到编辑器中的符号 Vue Language Features 是为 Vue、Vitepress 和 petite-vue 构建的语言支持扩展。这是基于@vue/reactivity按需计算一切,实现原生 TypeScript 语言服务级别性能。 [温馨提示] 创建 vue 维特斯 娇小的 vue3-eslint-stylelint-demo(Volar + ESLint + stylelint + husk

    2024年02月05日
    浏览(22)
  • vue3+ts项目在vscode中爆红提示修复

    问题描述: 新搭建的vue3+ts项目,在vscode中打开,已经安装的的依赖文件也会提示红线 如下图: 在vscode中的tsconfig.json修改配置如下: 代码如下:

    2024年01月25日
    浏览(28)
  • 新建vite+vue3+ts项目,以及解决过程中遇到的问题

    目录 一、新建vite+vue3+ts项目 二、解决过程中遇到的问题 解决报错:Module ‘“xx.vue“‘ has no default export. 解决报错:Error [ERR_MODULE_NOT_FOUND]: Cannot find package ‘uuid’ imported from xxx的解决 解决报错:[plugin:vite:css] Preprocessor dependency \\\"less\\\" not found. Did you install it? 此处我使用npm做一下

    2024年02月06日
    浏览(95)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包