绝对路径的 TS Config 嵌套别名不起作用答案

【问题标题】：TS Config nested alias for absolute path not working绝对路径的 TS Config 嵌套别名不起作用
【发布时间】：2022-06-20 23:48:29
【问题描述】：

我正在尝试在我的tsconfig.json 中为与 Vite 捆绑的 React 应用程序设置路径别名。这是我tsconfig.json的相关部分：

{
  "compilerOptions": {
    "baseUrl": ".",
    ...
    "paths": {
      "*": ["src/*", "node_modules/*"],
      "components/*": ["src/components/*"],
      "containers/*": ["src/containers/*"],
      "pages/*": ["src/constants/*"],
      "store/*": ["src/store/*"],
      "types/*": ["src/types/*"],
      "NestedFolder/*": [
        "src/components/NestedFolder/*"
      ],
    }
  },
  "include": ["src/**/*", "*"]
}

唯一的问题是NestedFolder。当我以这种方式导入时，一切正常：

import { ComponentName } from "components/NestedFolder/types";

但是，嵌套别名失败：

import { ComponentName } from "NestedFolder/types";

// error 
EslintPluginImportResolveError: typescript with invalid interface loaded as resolver
Occurred while linting .../src/components/NestedFolder/canvas/index.ts:1
Rule: "import/namespace"

// error on hover in VS Code
Unable to resolve path to module 'NestedFolder/types'.eslintimport/no-unresolved

我想做嵌套组件，因为我有几个嵌套 3-4 层的文件夹，如果我的导入有一个更清晰的视图会很好。有没有办法做到这一点？

【问题讨论】：

如果您使用的是 VSCode，我假设您已尝试重新启动 TS 服务器。我建议使用vite-tsconfig-paths plugin 看看是否可行
我重新启动了我的服务器 VS Code，并运行了构建命令，构建中断。谢谢，我去看看插件。我希望避免添加额外的库/插件，但这可能是我现在唯一的选择。
更新：插件确实解决了我的问题，谢谢！
没问题！我会将我的评论作为答案，以便其他可能需要找到此插件的人更清楚

标签： reactjs typescript vite

【解决方案1】：

您需要安装 vite-tsconfig-paths plugin 以使用 TypeScript 和 Vite 设置路径别名。如果没有任何变化并且您正在使用 VSCode，请确保通过按 Ctrl+Shift+P 或 Cmd+Shift+P 重新启动 TypeScript 服务器，输入 restart，然后选择命令：TypeScript: Restart TS server

【讨论】：

【解决方案2】：

接受的答案对我不起作用。我发现我必须安装以下软件包：

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

然后添加以下配置，其中重要的成分是强定义的别名路径：

const path = require('path');

module.exports = {
  root: true, // important to ensure nested eslint scoping in monorepos
  plugins: ['@typescript-eslint', 'import'],
  extends: [
    'airbnb-typescript-prettier',
    'plugin:import/typescript'
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    project: path.join(__dirname, './tsconfig.json'),
    tsconfigRootDir: './src',
  },
  settings: {
    "import/parsers": { // add this definition
      "@typescript-eslint/parser": [".ts", ".tsx"],
    },
    'import/resolver': {
      alias: {
        map: [
          // define each alias here
          ['components', path.join(__dirname, './src/components')],
        ],
        extensions: ['.ts', '.tsx', '.js', '.jsx', '.json']
      },
      typescript: {
        project: path.join(__dirname, './tsconfig.json'),
      },
    },
  },
}

我认为这可以通过协调 .eslintrc 和 vite.config 之间的别名来改进，因此别名只需定义一次，使用类似于此处定义的策略：https://stackoverflow.com/a/68908814/14198287

【讨论】：