vue3语法中使用vscode打开，满屏红线报错，解决方法

已于 2024-04-07 14:44:18 修改
阅读量1w 收藏 20
点赞数 5
分类专栏： 菜鸟的踩坑之旅 文章标签： vscode ide 编辑器
于 2022-12-28 11:09:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jieyucx/article/details/128465555
版权

vue3语法中使用vscode打开，满屏红线报错，解决方法

这是应为Vuter是检测vue2语法导致的，我们只需要禁用掉然后再安装两个vue3的插件就好了
在这里插入图片描述
把这个禁用掉然后再安装以下两个

TypeScript Vue Plugin
Vue Language Features

在这里插入图片描述
在这里插入图片描述
在安装Vue Language Features时有可能会出现安装失败的情况，这时需要我们手动安装visx具体步骤如下

安装失败时右下角会提示手动下载，我们点击一下就行了，下载下来
在这里插入图片描述
打开压缩包，找到package.json文件
在这里插入图片描述
在这里插入图片描述
复制出来用记事本打开，找到vscode版本信息，修改为与你当前使用的vscode版本一致，然后重新压缩。
在这里插入图片描述
自己的vscode版本可以在帮助->发行说明中查看
在这里插入图片描述
在这里插入图片描述
将修改后的visx文件以从visx安装方式安装就好了
在这里插入图片描述
在这里插入图片描述
点击安装就好啦

补充更新

以上解决方案是我2022年遇到的，并且用以上方法解决了，结果在2024年重新用上vue3的时候，这个方法不行了，Volar已经弃用了，vue推荐用名称: Vue - Official

ID: Vue.volar
说明: Language Support for Vue
版本: 2.0.10
发布者: Vue
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=Vue.volar

我按照提示改安装了这个最新版的插件但是报红还是存在，最后没办法直接在设置里将ts校验去掉了，就不报红了
在这里插入图片描述

jieyucx
关注
  • 5
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
vue3+ts项目在vscode中爆红提示修复
不疲不倦的博客
05-29 7244
新搭建的vue3+ts项目，在vscode中打开，已经安装的的依赖文件也会提示红线
Vscode的vue项目中下滑红线报错问题
weixin_47002584的博客
03-18 3023
代码存在语法错误（错误并不影响项目的编译运行），并且校验功能是开启状态就会出现下滑红线的报错。1）关闭校验2） 逐个解决语法错误类型“xxx”不存在“xxx”属性解决思路：对对应类型进行声明时增加一个any属性 具体例子：类型"res"不存在"data"属性 解决方法：将原本的let res ->let res:any已声明"xxx"，但从未读取其值解决思路：删除或注释掉报错变量（该变量未被使用）类型"xxx"的参数不能赋值给类型"xxx"参数
vue3项目运行正常但vscode红色波浪线报错
sjp991012的博客
04-02 3762
以下解决办法如不生效，可尝试重启vscode。
vscode导入vue项目各种报错以及解决方式
2401_83196638的博客
06-02 604
运行vue各种报错
vue3语法糖setup中使用vscode打开，满屏红线报错，‘xxx‘ is declared but its value is never read. Vetur(6133)，解决方法
qq_18798149的博客
09-28 6281
编写vue3代码的时候，引入的组件和定义的变量，在vscode中会出现红色波浪线，虽然不影响运行，但是看着很别扭，应该怎么处理那
创建vue3项目安装vite框架后，vscode中打开项目出现报错解决方法
qq_39111074的博客
09-07 1099
创建vue3项目安装vite框架后，vscode中打开项目出现报错解决方法
第一次使用VSCode创建vue项目（报错大全）
bu_xiang_tutou的博客
11-01 3630
在VSCode中创建一个vue项目，各种报错大全，十分细致
VSCode中开发Vue语法格式报错
weixin_51293134的博客
02-27 948
vsvode中开发vue编译出现很多语法格式错误，编译出错
解决在vscode里vue3+js代码报ts的语法错误
Davoid的博客
12-07 1060
项目根目录创建jsconfig.json。
vscode中vue项目报错
weixin_53221528的博客
12-22 862
vue项目报错
webstorm和.vue中es6语法报错的解决方法
08-27
WebStorm 和 Vue 中 ES6 语法报错的解决方法 ES6 语法报错是 WebStorm 和 Vue 开发中常见的问题，本文将总结 WebStorm 和 Vue 中 ES6 语法报错的解决方法，以便开发者避免采坑。 WebStorm 中 ES6 语法报错的解决...
vscode下vue项目中eslint的使用方法
01-21
在vscode的vue项目中，关于代码检查和格式化，遇到各种各样的问题，比如： 不清楚安装的拓展的功能，导致安装了重复功能的拓展 右键格式化文档的时候，不是按eslint的规则来格式化，导致需要我再次手动调整 保存...
vue.js 中使用（…）运算符报错的解决方法
12-10
本篇文章将详细讲解如何解决Vue.js项目中使用扩展运算符报错的问题。 首先，报错的原因在于Vue.js项目可能没有正确地配置Babel，Babel是一个JavaScript编译器，它可以将ES6+的代码转换为当前浏览器能理解的ES5语法...
vue项目中使用vue-i18n报错的解决方法
12-09
然而最近在vue项目中使用vue-i18n的时候，居然报错了，通过查找相关的资料终于找到了解决的方法，下面话不多说了，来一起看看详细的介绍吧 发现问题 iview-admin框架克隆到本地，添加路由的时候，稍不注意就会遇到...
vscode-CodeGeeX AI在vscode运用
2301_76671906的博客
07-24 364
CodeGeeX AI在vscode运用
VScode 批量操作
最新发布
sinat_41053216的博客
07-24 321
按照1的方法多选光标之后，ctrl + alt+ i 即可。按住 alt/option 键， 选择需要批量操作的位置。如果是多行，则按住 alt+shift 键。VScode 批量操作。
我在Vscode学Java泛型（泛型设计、擦除、通配符）
m0_74154295的博客
07-24 1018
通过使用泛型，可以在方法中处理不同类型的数据，而不需要重载多个方法、 泛型核心意义在于 类属性或方法的参数在定义数据类型时，可以直接使用一个标记进行占位 ，在具体使用时才设置其对应的实际数据类型，这样当设置的数据类型出现错误后，就可以在程序编译时检测 来。
ts一些解决vscode飘红的方法
2401_85955297的博客
07-24 615
ts一些解决vscode飘红的方法
vue3中使用vue2语法data中声明的同名属性报错
05-30
在 Vue 3 中，`data` 选项不再支持对象的方式声明数据，需要使用 `setup` 函数来声明数据。因此如果你在 `setup` 函数中声明了一个同名的数据属性，会出现冲突并导致错误。 如果你需要在 `setup` 函数中声明一个同名的数据属性，可以使用 `ref` 或 `reactive` 等响应式 API 来声明。例如： ``` <template> <div>{{ myData }}</div> </template> <script> import { reactive } from 'vue'; export default { setup() { const myData = reactive({ name: 'John' }); return { myData }; } }; </script> ``` 这样，即使在 `data` 中有同名的属性，也可以避免冲突和报错。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

jieyucx

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值