node.js - VSCode 无法正确解析 Intellisense 的 babel 绝对导入

Question

我正在为此失去理智。我有一个非常简单的 hello world 项目，我想在其中使用 Babel 和 ESLint。我也想使用绝对导入，但是 vscode 没有正确解析我的绝对导入。

我的项目结构是：

- node_modules
- src
  - config
    - index.js
  - logger
    - index.js
  index.js
- package.json
- .babelrc
- .eslintrc
- ...

src/index.js

import express from "express";
import config from "config";
import logger from "logger";

// Constants
const { port, host } = config;

// App
const app = express();
app.get("/", (req, res) => {
  res.send("Hello World");
});

app.listen(port, host);
logger.info(`Running on http://${host}:${port}`);

我的代码运行，eslint 没有出错，一切正常，但是 vscode IntelliSense 不能正常工作！它正在解析一些 TypeScript 包而不是我的实际文件！

jsconfig.json

{
  "module": "es6",
  "moduleResolution": "node",
  "compilerOptions": {
    "resolveJsonModule": true,
    "module": "commonjs",
    "target": "es6",
    "allowSyntheticDefaultImports": true,
    "moduleResolution": "node",
    "baseUrl": ".",
    "paths": {
      "*": ["./src/*"]
    }
  },
  "exclude": ["node_modules", "**/node_modules/*"]
}

.babelrc

{
  "presets": ["@babel/preset-env"],
  "plugins": [
    [
      "module-resolver",
      {
        "root": ["./src"]
      }
    ]
  ]
}

.eslintrc

{
  "extends": "airbnb",
  "plugins": ["prettier"],
  "settings": {
    "import/resolver": {
      "node": {
        "paths": ["src"]
      }
    }
  },
  "rules": {
    "quotes": ["warn", "double"]
  }
}

Answer 1

在jsconfig.json文件中：

"paths": {
      "*/*": ["src/*"]
    }

在.babelrc文件中，安装babel-plugin-module-resolver并更改为：

"plugins": [
    [
      "module-resolver",
      {
        "root": ["./src"],
        "alias": {
          "*": "./src"
        }
      }
    ]
  ]

结果在这里