vue3+ts项目在vscode中爆红提示修复

原创于 2023-05-29 17:47:20 发布 · 9k 阅读

CC 4.0 BY-SA版权

文章标签：

本文介绍如何解决Vue3+TypeScript项目在Visual Studio Code(VSCode)中遇到的类型检查错误提示。当打开项目时，尽管已安装相关依赖，VSCode仍显示错误红线。通过调整tsconfig.json配置文件，可以消除这些错误提示。

问题描述：
新搭建的vue3+ts项目，在vscode中打开，已经安装的的依赖文件也会提示红线
如下图：

在vscode中的tsconfig.json修改配置如下：

代码如下：

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,
    // "types": ["element-plus/global"],

    /* Bundler mode */
    "moduleResolution": "node",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve",
    "baseUrl": ".",
    "allowJs": true,
    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "types": ["vite/client", "element-plus/global","unplugin-icons/types/vue"],
  "skipLibCheck": true /* Skip type checking all .d.ts files. */,
  "allowSyntheticDefaultImports": true /* 允许默认导入 */,
  "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}