返回

vue3+ts项目vscode中红色代码全无,报错全解决!

后端

消除 Vue 3 + TS 项目中恼人的红色报错:全攻略

在使用 Vue 3 + TypeScript 开发项目时,难免会遇到各种令人头疼的报错。本文将手把手教你如何彻底解决这些报错,让你的代码焕发活力。

1. 征服类型报错

类型报错往往源于 tsconfig.json 配置不当。确保你的 tsconfig.json 文件包含以下配置:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "jsx": "preserve",
    "esModuleInterop": true,
    "allowJs": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },
    "typeRoots": [
      "./node_modules/@types"
    ],
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ]
  }
}

2. 化解 tsconfig.app.json 和 tsconfig.node.json 中的报错

这些报错通常表明项目缺少 tsconfig.json 文件。在项目根目录下创建该文件,并添加以下配置:

{
  "extends": "./tsconfig.base.json",
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "jsx": "preserve",
    "esModuleInterop": true,
    "allowJs": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },
    "typeRoots": [
      "./node_modules/@types"
    ],
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ]
  }
}

3. 重启 VSCode

更新配置后,需要重启 VSCode 以使新设置生效。

4. 重新编译项目

重启 VSCode 后,重新编译项目以应用新配置。

5. 检验代码

重新编译后,检查代码中的报错是否消失。如果没有,恭喜你!你已成功解决这些恼人问题。

常见问题解答

1. 如何更新 tsconfig.json 文件中的配置?

  • 使用文本编辑器或 IDE,打开 tsconfig.json 文件。
  • 根据上述示例更新配置。
  • 保存文件并重新加载项目。

2. tsconfig.app.json 和 tsconfig.node.json 文件有什么区别?

  • tsconfig.app.json 用于针对特定环境(例如 Web 应用程序)编译代码。
  • tsconfig.node.json 用于针对 Node.js 环境编译代码。

3. 为什么需要 "typeRoots" 字段?

  • "typeRoots" 字段指定类型定义的位置,帮助编译器找到所需的类型声明。

4. 重新编译项目时遇到了错误,该怎么办?

  • 检查命令行输出,了解错误详情。
  • 确保已正确配置项目。
  • 请尝试使用 yarn compile 或 npm run compile 命令重新编译项目。

5. 如何在 VSCode 中禁用红色报错?

  • 不建议禁用红色报错,因为它们有助于发现代码中的潜在问题。
  • 如果你真的需要禁用报错,请转到“用户设置”(首选项),搜索 "typescript.reportErrors",然后将值设置为 "never"。