迹忆客 专注技术分享

要解决错误“Parsing Error: Cannot read file 'tsconfig.json'”，需要更新我们的 .eslintrc.js 文件，将 tsconfigRootDir 选项设置为 __dirname 来强制 eslint 解析相对于 .eslintrc.js 所在的文件夹的项目配置。

打开 .eslintrc.js 文件并添加或更新 parserOptions 对象，如下所示：

module.exports = {
  parserOptions: {
    project: 'tsconfig.json',
    tsconfigRootDir: __dirname,
    sourceType: 'module',
  },
  // ... 剩余部分
};

通过设置 parserOptions 对象，我们告诉 ESLint 我们想要支持哪些 JavaScript 语言选项。

sourceType 选项设置为 module 表示我们想要支持 ES6 模块。

tsconfigRootDir 选项设置为 __dirname，因此 ESLint 将我们的项目配置解析为相对于 .eslintrc.js 文件所在文件夹。

更新 parserOptions 对象后，我们可能会收到错误消息：

// ⛔️ Parsing error: "parserOptions.project" has been set for @typescript-eslint/parser.
// The file does not match your project config: .eslintrc.js.
// The file must be included in at least one of the projects provided.eslint

如果你已经为 @typescript-eslint/parser 错误设置了“parserOptions.project”，请在你的根目录中创建一个 tsconfig.eslint.json 文件，就在你的 tsconfig.json 文件旁边。

tsconfig.eslint.json

{
  "extends": "./tsconfig.json",
  "include": [
    // 👇️ 在此处添加要 lint 的所有目录和文件
    "src",
    "tests",

    // 添加我们看到“parserOptions.project”错误的所有文件
    ".eslintrc.js"
  ]
}

确保在包含数组中添加所有要 lint 的目录。

现在打开 .eslintrc.js 文件并更新项目属性以指向特定于 eslint 的 tsconfig 文件。

module.exports = {
  parserOptions: {
    project: 'tsconfig.eslint.json',
    tsconfigRootDir: __dirname,
    sourceType: 'module',
  },
  // ... rest
};

如果没有尝试重新启动 IDE，错误应该得到解决。

这是必需的，因为将 parserOptions.project 选项添加到 TypeScript 项目会导致 ESLint 在我们尝试对未包含在 TypeScript 项目中的文件进行 lint 时抛出错误。

简而言之，将我们想要 lint 但未包含在 tsconfig.json 文件中的所有文件添加到 tsconfig.eslint.json 文件中的 include 数组中。 这些很可能是位于根目录中的配置文件。

或者，如果大家不想对它们进行 lint，则可以将看到错误的任何文件添加到 .eslintignore 文件中。

如果错误“Parsing Error: Cannot read file 'tsconfig.json'”仍然没有解决并且我们使用VSCode IDE ，请在项目的根目录中创建一个.vscode文件夹。

在 .vscode 目录下添加 settings.json 文件，粘贴以下内容。

{
  "eslint.workingDirectories": [
    "src"
  ]
}

该文件假定我们要对 src 目录进行 lint。

如果项目有 2 个要 lint 的目录，例如 前端和后端，更新 workingDirectories 数组，如下所示：

{
  "eslint.workingDirectories": [
    "frontend",
    "backend"
  ]
}

该设置指明 ESLint 如何解析与我们的工作目录相关的配置文件（.eslintrc.js 和 .eslintignore）。

“Parsing Error: Cannot read file 'tsconfig.json'”的另一个原因是当我们在与包含 ESLint 配置的目录不同的目录中打开代码编辑器时。

例如，如果我们的项目位于 user/typescript/ 目录中，并且在 user/ 目录中打开代码编辑器，则可能会收到错误消息。

相反，尝试先导航到 user/typescript/ 目录，然后打开代码编辑器。