VSCode报错:Vetur can’t find ‘tsconfig.json’ or ‘jsconfig.json’解决办法

当使用VSCode进行Vue项目开发时，可能会出现“Vetur can't find 'tsconfig.json' or 'jsconfig.json'”的报错，这是因为Vetur插件需要找到项目的配置文件来进行正确的语法检查和代码提示。下面是解决这个问题的完整攻略。

1. 确认项目中是否存在配置文件

首先，需要确认在项目根目录下是否存在配置文件 tsconfig.json 或 jsconfig.json。如果不存在，则需要手动创建一个。

2. 配置文件路径设置

如果配置文件已经存在，但Vetur插件仍然无法找到，则可能是配置文件路径未正确设置。

例如，如果你的配置文件在项目根目录下，但代码位于 src 目录下，则需要在项目的根目录下创建一个 .vscode 文件夹，在该文件夹下创建一个 settings.json 文件，并添加以下内容：

{
  "vetur.validation.template": false,
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatter.css": "prettier",
  "vetur.format.defaultFormatter.scss": "prettier",
  "vetur.format.defaultFormatter.postcss": "prettier",
  "vetur.format.defaultFormatter.js": "prettier",
  "vetur.format.defaultFormatter.ts": "prettier",
  "vetur.format.defaultFormatter.less": "prettier",
  "vetur.validation.script": true,
  "vetur.useWorkspaceDependencies": true,
  "vetur.validation.templateProps": true,
  "javascript.implicitProjectConfig.experimentalDecorators": true,
  "typescript.tsdk": "node_modules\\typescript\\lib"
}

其中，“typescript.tsdk”路径属性指向项目中已安装的TypeScript库，这是一个必须配置的属性。如果你的项目使用JavaScript开发，则可以只保留该属性，并确保路径正确。

示例1：配置文件在根目录下面的情况

假设配置文件在项目根目录下面，而代码在src目录下面，可以参考以下示例配置：

1. 在项目根目录下创建 .vscode 文件夹

mkdir .vscode

2. 在 .vscode 文件夹下创建 settings.json 文件

touch .vscode/settings.json

3. 打开 settings.json 文件并添加以下内容：

{
  "vetur.validation.template": false,
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatter.css": "prettier",
  "vetur.format.defaultFormatter.scss": "prettier",
  "vetur.format.defaultFormatter.postcss": "prettier",
  "vetur.format.defaultFormatter.js": "prettier",
  "vetur.format.defaultFormatter.ts": "prettier",
  "vetur.format.defaultFormatter.less": "prettier",
  "vetur.validation.script": true,
  "vetur.useWorkspaceDependencies": true,
  "vetur.validation.templateProps": true,
  "javascript.implicitProjectConfig.experimentalDecorators": true,
  "typescript.tsdk": "node_modules\\typescript\\lib",
  "vetur.ignorance": true,
  "vetur.ignoreProjectWarning": true,
  "vetur.validation.interpolation": true,
  "vetur.languageFeatures.completions.enable": true,
  "vetur.validation.script": true,
  "path-intellisense.mappings": {
    "~": "${workspaceFolder}/src"
  },
  "files.associations": {
    "*.vue": "html"
  },
  "search.exclude": {
    "**/node_modules": true,
    "**/bower_components": true,
    "**/temp": true,
    "**/coverage": true,
    "**/Libs": true
  },
  "typescript.validate.enable": true
}

其中 "path-intellisense.mappings" 和 "files.associations" 都是为了实现在 .vue 文件中使用 import 时，能够自动联想出项目目录下的文件和 .vue 文件。

示例2：配置文件在其他非根目录下的情况

如果你的配置文件不在根目录下，而是在其他非根目录的位置，例如 /config/tsconfig.json，那么需要在配置文件所在目录下添加以下内容：

{
  ...
  "include": [
    "./src/**/*",
    "./tests/**/*",
    "./config/**/*" // 配置文件所在目录 
  ]
}

然后需要在VSCode的设置中，添加以下参数：

{
  "vetur.useWorkspaceDependencies": true,
  ...
  "vetur.project": "./config/tsconfig.json"
}

其中 "vetur.project" 指向你的配置文件路径。

完成以上步骤后，重新启动VSCode以使配置生效，就可以解决这个问题了。