VSCode 无法正确解析 Intellisense 的 babel 绝对导入

Question

I am losing my mind over this. I have a very simple hello world project that I want to use Babel and ESLint in. I also want to use absolute imports, but vscode is not resolving my absolute imports correctly.

My project structure is:

- 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}`);

My code runs, eslint is not erroring and everything works fine, but vscode IntelliSense is not working properly! It's resolving to some TypeScript package not my actual file!

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

In jsconfig.json file:

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

In .babelrc file, install babel-plugin-module-resolver and change to:

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

Result here