在前端开发中，使用 ESLint 进行代码静态检查是一个必备的工具。但是当我们使用 TypeScript 开发时，ESLint 默认无法解析 TypeScript 模块导入路径，这就需要使用 eslint-import-resolver-typescript 这个插件来解决这个问题。
安装
安装 eslint-import-resolver-typescript 的命令如下：
npm install --save-dev eslint-import-resolver-typescript
同时，在项目根目录下创建 .eslintrc 文件，添加以下配置：
{
"settings": {
"import/resolver": {
"typescript": {}
}
}
}配置
为了让 ESLint 能够使用 eslint-import-resolver-typescript 插件，我们还需要对 .eslintrc 文件进行配置。示例配置如下：
-- -------------------- ---- -------
-
---------- -
---------------------
---------------------------------------
--
--------- ----------------------------
---------- -
--------------------
--
-------- -
------------- ------
--
----------- -
------------------ -
------------- --
-
-
-其中，@typescript-eslint/parser 是用于解析 TypeScript 代码的 ESLint 解析器，@typescript-eslint/recommended 是推荐的基本规则集。
使用
现在我们已经完成了 eslint-import-resolver-typescript 的安装和配置，我们可以通过以下方式在代码中使用 TypeScript 模块导入路径：
import { SomeClass } from '@/path/to/SomeClass'其中，@ 符号后面的路径表示项目根目录。请注意，如果你的 TypeScript 配置文件 tsconfig.json 中指定的 baseUrl 与项目根目录不同，那么你需要相应地修改上述导入语句中的 @ 符号后面的路径。
总结
通过本文的介绍，我们学习了如何使用 eslint-import-resolver-typescript 插件来解决 ESLint 无法解析 TypeScript 模块导入路径的问题，并提供了详细的安装、配置和使用教程。希望这篇文章对你学习和使用 TypeScript 和 ESLint 能够有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/51372