迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 >

TypeScript 中解决错误 Parsing Error: Cannot read file 'tsconfig.json'

作者:迹忆客 最近更新:2023/01/08 浏览次数:

要解决错误“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/ 目录,然后打开代码编辑器。

相关文章

在 TypeScript 中声明一个 ES6 Map

发布时间:2023/03/05 浏览次数:181 分类:WEB前端

本篇文章将指导我们使用编码示例在 TypeScript 中定义 ES6 Map。 这解释了什么是 ES6 Map及其用途。 让我们首先看看 ES6 是什么以及为什么使用它们。 ES6 Map 在 ES6 之前,我们使用对象通过将

如何在 TypeScript 中合并对象

发布时间:2023/02/20 浏览次数:217 分类:编程语言

使用扩展语法 ... 合并 TypeScript 中的对象,例如 const obj3 = { ...obj1, ...obj2} 。 最终对象的类型将被成功推断,因此尝试添加或删除属性会导致类型检查器显示错误。 const obj1 = { name : 迹忆

如何在 TypeScript 中对数组进行排序

发布时间:2023/02/15 浏览次数:196 分类:编程语言

在 TypeScript 中对 Numbers 数组进行排序 使用 sort() 方法对 TypeScript 中的数组进行排序,例如 numArray.sort((a, b) = a - b) 。 sort 方法采用定义排序顺序的函数作为参数。 在对数值数组进行排序

如何在 TypeScript 中扩展类型

发布时间:2023/02/15 浏览次数:230 分类:编程语言

在 TypeScript 中扩展类型 使用交集类型来扩展 TypeScript 中的类型,例如 type TypeB = TypeA {age: number;} 。交集类型使用 符号定义,用于组合现有对象类型。 我们可以根据需要多次使用 运算符

TypeScript 中如何创建 Date 日期对象

发布时间:2023/02/14 浏览次数:219 分类:编程语言

使用 Date 类型在 TypeScript 中键入 Date 对象,例如 const date: Date = new Date() 。 Date() 构造函数返回一个类型为 Date 的对象。 该接口定义了 Date 对象上所有内置方法的类型。 // ?️ const da

在 TS 中使用 {[key:string]: string} 和 {[key:string]: any}

发布时间:2023/02/14 浏览次数:125 分类:编程语言

TypeScript 中的 {[key: string]: string} 类型 {[key: string]: string} 语法是 TypeScript 中的索引签名,当我们事先不知道类型属性的所有名称但知道值的形状时使用。 索引签名指定字符串类型的键和

转载请发邮件至 1244347461@qq.com 进行申请,经作者同意之后,转载请以链接形式注明出处

本文地址:

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

最新推荐

教程更新

热门标签

扫码一下
查看教程更方便