关于vscode开发uni-app中依赖@uni-helper/uni-app-types的配置 “vueCompilerOptions“不允许属性 nativeTags问题解决

站台风云

已于 2024-08-23 12:44:39 修改

阅读量6.8k

点赞数 49

文章标签： vscode uni-app vue typescript 编辑器

于 2024-05-29 19:40:42 首次发布

本文链接：https://blog.youkuaiyun.com/qq_45937792/article/details/139303144

版权

在用vscode开发uniapp项目时会安装 @uni-helper/uni-app-types 这么一个依赖，安装好后在 tsconfig.json文件中进行配置：确保 compilerOptions.types 中含有 @dcloudio/types 和 @uni-helper/uni-app-types，且 include 包含了对应的 vue 文件（官方原话）。

理解就是在这一块配置好：
在这里插入图片描述

之后遇到的问题是在配置 “vueCompilerOptions"时遇到像这种不允许属性：
在这里插入图片描述

或者是像这种 .vue文件中飘红一大片的：
在这里插入图片描述

就需要注意在配置"vueCompilerOptions"时尽量参考官网，因为很多是实验属性，更新比较多 ¹。24年之前只需要将"vueCompilerOptions” 配置其中的"nativeTags"属性。24年之后"nativeTags"也变为不允许属性
在这里插入图片描述

原因时在node_modules文件夹中的@uni-helper/uni-app-types/volar-plugin文件依赖中已经配置好了nativeTags。在这里插入图片描述

目前（24年5月后）因为vscode插件的更新插件Vue Language Features (Volar)早已被废弃Volar版本随着使用最新的vue插件 Vue-Official 版本已经达到了v2.0.19，因此配置"vueCompilerOptions"时就要写官网最新的版本
在这里插入图片描述

@uni-helper/uni-app-types官网： https://uni-helper.js.org/uni-app-types
在这里插入图片描述

vscode中的代码（tsconfig.json）：
在这里插入图片描述

{
   
  "extends": "@vue/tsconfig/tsconfig.json",
  "compilerOptions": {
   
    "sourceMap": true,
    "baseUrl": ".",
    "paths": {
   
      "@/*": ["./src/*"]
    }

最低0.47元/天解锁文章