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 package 不是我的實際文件！

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"
        }
      }
    ]
  ]

結果在這里