eslint 抱怨打字稿的路径别名

Question

我在打字稿中设置了路径别名，.tsconfig所以我的导入看起来更干净。

在我的代码中，当我尝试像这样导入我的界面时

import { ApiResponse } from '@api';

eslint 抱怨：Unable to resolve path to module '@api' 然而，vscode 中的智能感知似乎很好。它能够提供代码预测和“跳转到声明”，这是我.tsconfig正确设置但 eslint 以某种方式错误配置的线索。

---

相关文件

在我的tsconfig.json 中，我设置了路径别名，如下所示：

{
  "compilerOptions": {
    "moduleResolution": "node",               
    "baseUrl": "./src",                     
    "paths": {                              
      "@api": ["./types/api"]
    },
  }
}

我的./src/types/api.ts看起来像这样：

// 3rd party API response object
export interface ApiResponse {
  ....
}

最后，我的.eslintrc.json看起来像这样：

{
  "env": {
    "node": true
  },
  "globals": {
    "console": true
  },
  "plugins": ["@typescript-eslint", "prettier"],
  "parser": "@typescript-eslint/parser",
  "settings": {
    "import/extensions": [".js", ".ts"],
    "import/parsers": {
      "@typescript-eslint/parser": [".ts"]
    },
    "import/resolver": {
      "node": {
        "extensions": [".js", ".ts"]
      }
    }
  }
}

知道我可能做错了什么吗？

Answer 1

要支持 tsconfigbaseUrl和paths，您需要软件包eslint-import-resolver-typescript.

1. 确保具备以下基础知识：

# install the basics
npm i -D @typescript-eslint/parser @typescript-eslint/eslint-plugin

# support tsconfig baseUrl and paths
npm i -D eslint-plugin-import eslint-import-resolver-typescript

2. 然后在 eslintrc 中，在 json 中：

{
  "settings": {
    "import/resolver": {
      "typescript": {}
    }
  },
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "project": "./tsconfig.json",
    "tsconfigRootDir": "./"
  },
  "plugins": [
    "@typescript-eslint",
    "import"
  ],
  "extends": [
    "plugin:@typescript-eslint/recommended",
    "plugin:@typescript-eslint/recommended-requiring-type-checking"
  ]
}

Answer 2

我遇到了这个问题，而且由于我使用的是 monorepo 结构，所以这很棘手。通过使用解决了这个问题eslint-import-resolver-typescript。

如文档中所述，在 eslint 配置中，您添加此配置指向所有项目。

// inside .eslintrc

"settings": {
  "import/resolver": {
    "typescript": {
      // use an array
      "project": [
        "packages/module-a/tsconfig.json",
        "packages/module-b/tsconfig.json"
      ],
    }
  }
}

Answer 3

我已经创建了使用 expo 启用 typescript 的 React Native 项目。我已按照以下步骤添加路径别名

文件夹结构：

脚步：

1. 在compilerOptions下的tsconfig.json中添加baseURL和自定义路径，如下所示：

   "compilerOptions": {
            "allowSyntheticDefaultImports": true,
            "jsx": "react-native",
            "lib": [
            "dom",
            "esnext"
            ],
            "moduleResolution": "node",
            "noEmit": true,
            "skipLibCheck": true,
            "resolveJsonModule": true,
            "strict": true,
            "baseUrl": ".",
            "paths": {
              "*": ["src/*"],
              "$utility/*": ["src/utility/*"], // if /* is not added eslint throwing error so should be added in name and path as well
              "$themes/*": ["./src/themes/*"],
              "$assets/*": ["./src/assets/*"]
            }
        }
   

2. 在“module-resolver”下的 babel.config.js 中添加别名，如下所示：

module.exports = function (api) {
    api.cache(true);
    return {
        presets: ["babel-preset-expo"],
        plugins: [
            [
                'module-resolver',
                {
                    root: ["./src"],
                    alias: {
                        "$utility": './src/utility',
                        "$themes": './src/themes',
                        "$assets": './src/assets',
                    },
                },
            ],
        ],
    };
};

3. 使用以下命令安装 eslint-plugin-import 和 eslint-import-resolver-typescript：
   npm i -D eslint-plugin-import eslint-import-resolver-typescript

4. 安装软件包后，在 eslintrc 文件中的 import/resolver 下添加 typescript，如下所示：

          "settings": {
            "import/core-modules": ["@expo/vector-icons"],
            "import/extensions": [".js", ".jsx", ".ts", ".tsx"],
            "import/parsers": {
              "@typescript-eslint/parser": [".ts", ".tsx"]
            },
            "import/resolver": {
              "typescript": {},
              "node": {
                "extensions": [".js", ".jsx", ".ts", ".tsx"]
              }
            }
        }
   

5. 使用 command + shift + p 刷新 vscode -> 重新加载窗口。

注意：使用 expo 创建的项目将默认安装 babel-plugin-module-resolver 包，因此无需再次安装