Question

我已经在打字稿的.tsconfig中设置了路径别名，因此我的导入看起来更加简洁。

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

import { ApiResponse } from '@api';

eslint抱怨：Unable to resolve path to module '@api' 但是，vscode中的intelisense看起来不错。它能够给出代码预测和“跳转到声明”，这提示我的.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

这对我有用：

yarn.lock

要支持tsconfig 1.69.2和// install the basics npm install --save-dev typescript-eslint-parser npm install --save-dev @typescript-eslint/eslint-plugin // support tsconfig baseUrl and paths npm install --save-dev eslint-plugin-import npm install --save-dev eslint-import-resolver-typescript，需要安装和配置eslint-import-resolver-typescript。这是我完整的baseUrl文件。

paths

Answer 2

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

文件夹结构：

步骤：

在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/*"]
         }
     }

在 babel.config.js 的 'module-resolver' 下添加别名如下：

      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',
                     },
                     },
                 ],
             ],
         };
     };

使用以下命令安装 eslint-plugin-import 和 eslint-import-resolver-typescript：

npm i -D eslint-plugin-import eslint-import-resolver-typescript

安装包后在 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"]
         }
         }
     }

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

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

eslint抱怨打字稿的路径别名

相关文件

2 个答案: