在 Typescript 和 Eslint 中使用别名时找不到模块

Question

尝试使用别名导入 ts 文件时出现错误。

找不到模块“@utils/helpers”或其相应的类型声明。

而且我没有自动完成是vscode。
我安装了tsconfig-paths和eslint-import-resolver-typescript

tsconfig.json文件

{
    "compilerOptions": {
        "module": "commonjs",
        "sourceMap": true,
        "target": "es6",
        "esModuleInterop": true,
        "moduleResolution": "node",
        "outDir": "dist",
        "baseUrl": "./src",
        "paths": {
            "@utils": ["utils/*"]
        },
    },
    "include": ["src"],
    "exclude": ["node_modules", "dist"]
}

.eslintrc文件

{
    "root": true,
    "parser": "@typescript-eslint/parser",
    "plugins": ["@typescript-eslint", "import"],
    "extends": ["plugin:@typescript-eslint/recommended", "prettier"],
    "rules": {
        
    },
    "settings": {
        "import/parsers": {
            "@typescript-eslint/parser": [".ts"]
        },
        "import/resolver": {
            "typescript": {
                "alwaysTryTypes": true,
                "project": "tsconfig.json"
            }
        }
    }
}

这是我的项目结构

构建错误

Answer 1

• 您已经配置了 eslint - 这将对@utils的存在进行检查
• 您已配置 tsconfig - 它将自动建议该目录中的文件
• 但是你还没有告诉 JS @utils存在和它的类型

为此，安装tsconfig-paths package，这将告诉 js 在哪里寻找@utils

使用很简单，你只要把tsconfig-paths/register放在你的nodemon之前，这是我的package.json

"start": "ts-node -r tsconfig-paths/register src/server",
"dev": "ts-node-dev -r tsconfig-paths/register --respawn src/server",

或者你可以把它放在 tsconfig.json 里面

{
    "compilerOptions": {
        ...
        "baseUrl": "./src",
        "paths": {
            "@utils/*": ["utils/*"]
        },
    },
    "ts-node": {
        "require": ["tsconfig-paths/register"]
    },
    "ts-node-dev": {
        "require": ["tsconfig-paths/register"]
    }
}