在 TypeScript 项目中，我们经常会使用路径映射来简化模块的导入，比如使用 @ 来代替 src 目录。但是在使用 ESLint 进行代码检查时，可能会出现无法识别路径映射的问题，这会导致 ESLint 报告一些不必要的错误。
本文将介绍如何解决 ESLint 在 TypeScript 项目中无法校验路径映射的问题，并提供示例代码帮助你轻松上手。
问题分析
在 TypeScript 项目中，我们可以在 tsconfig.json 中配置路径映射，例如：
{
"compilerOptions": {
"baseUrl": "./src",
"paths": {
"@/*": ["*"]
}
}
}上述配置表示，将 @ 符号映射到 src 目录下的任何文件。但是在使用 ESLint 进行代码检查时，ESLint 默认不会识别上述路径映射，因此会产生一些不必要的报错。
解决方案
解决 ESLint 在 TypeScript 项目中无法校验路径映射的问题，可以通过以下三个步骤实现：
1. 安装 eslint-import-resolver-typescript
eslint-import-resolver-typescript 是一个官方维护的 ESLint 插件，它提供了 TypeScript 路径解析器以支持路径映射。只需要将其安装到项目中即可。
npm install eslint-import-resolver-typescript --save-dev
2. 修改 .eslintrc.js 配置文件
在项目的 .eslintrc.js 配置文件中，添加如下代码：
module.exports = {
...
settings: {
'import/resolver': {
typescript: {}
}
}
}上述代码表示使用 eslint-import-resolver-typescript 插件来解析 TypeScript 路径映射。
3. 修改 paths 映射规则
ESLint 提供了一个 overrides 配置项来覆盖默认规则。我们可以使用 overrides 来指定特定的 import 语句中的路径解析规则，从而避免 ESLint 报告无法识别的路径错误。
-- -------------------- ---- -------
-------------- - -
---
---------- -
-
------ ---------
------ -
-- ----- - --------- ---------- -----
----------------------- --------- - ------- ------ ---
-------------------- --------- ----------------- -
--- --------
--- --------
---
------------------ -
----------- - ---------- ----------------- --
--
--
--
--
-上述配置中，我们指定所有以 @ 开头的导入语句使用 TypeScript 路径解析器。此外，为了避免不必要的报错，我们还需要关闭 import/no-unresolved 和 import/extensions 这两个规则。
示例代码
下面是一个示例代码，演示了如何使用路径映射并修复 ESLint 报告的错误。在这个示例中， src 目录下有一个 utils 目录，其中包含 index.ts 和 hello.ts 两个文件。我们在 tsconfig.json 中配置了路径映射，将 @ 映射到 src 目录下：
{
"compilerOptions": {
"baseUrl": "./src",
"paths": {
"@/*": ["*"]
}
}
}在 src/main.ts 中，我们使用路径映射来导入 hello.ts：
// src/main.ts
import { sayHello } from '@/utils/hello'
sayHello('world')但是由于 ESLint 默认无法识别路径映射，因此它会报告一个错误：
Error: Unable to resolve path to ES module '@/utils/hello'.eslint(import/no-unresolved)
为了解决这个问题，我们可以按照上述步骤修改 .eslintrc.js 并添加 overrides 配置项。修改后的 .eslintrc.js 如下：
-- -------------------- ---- -------
-------------- - -
-- ---
---------- -
-
------ ---------
------ -
-- ----- - --------- ---------- -----
----------------------- --------- - ------- ------ ---
-------------------- --------- ----------------- -
--- --------
--- --------
---
------------------ -
----------- - ---------- ----------------- --
--
--
--
--
-修改完毕后，重新运行 ESLint，错误已经被修复。
总结
在 TypeScript 项目中，我们经常使用路径映射来简化模块导入。但是在使用 ESLint 进行代码检查时，可能会出现无法识别路径映射的问题。为了解决这个问题，我们可以安装 eslint-import-resolver-typescript 插件，并修改 .eslintrc.js 文件，指定使用 TypeScript 路径解析器来解析路径映射。最后，为了避免不必要的报错，我们还需要关闭默认规则。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649d647148841e9894a27e23