為什么 VSCode 的“轉到定義”在我使用 Webpack 別名的項目上失敗？

Question

這是vscode 問題 #16320的后續，vscode dev Matt Bierner 建議我在這里問。

---

VS Code 的最新版本...

1. ...具有轉到定義功能，通過在符號上按F12觸發...
2. ... 並且還支持（通過jsconfig.json配置）webpack 別名，這是一個 webpack 特性，為更友好的導入啟用導入行的前綴（請參閱vscode 文檔以獲取 Webpack 別名）。 例如，別名/src/api到*會讓我輸入import foo from */users而不是import foo from ../../../../src/api/users 。

但在某些用例中，它們一起失敗。 我為我的用例構建了一個最小的損壞測試項目（zip，3kB） 。 任何人都可以看看它，看看我是否做錯了什么，或者它看起來像一個錯誤嗎？

解壓縮 zip 並查看README.md ：路徑自動完成有效，但不能“查看”或“轉到定義”。

• 瀏覽 js 文件以檢查我並沒有要求您運行任何邪惡的東西。
• npm install && npm run build && node dist/index.js → Install & build 都成功了，說明Webpack很開心。 運行日志[1, 2, 3] 。
• 現在，運行code /path/to/project並打開src/index.js在第 5 行，嘗試在getLinks上getLinks F12 → No definition found for 'getLinks' 😢

我的jsconfig.json仍然做錯了什么，還是這是一個錯誤？ （可能是多個級別的出口？）

Answer 1

接受的答案是正確的，除了我的解決方案很簡單：

import something from '~/something';

jsconfig.json看起來像這樣：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "~/*": ["./*"]
    }
  }
}

Answer 2

如下更改src/index.js ：

import { Links } from 'api/resources';

更改jsconfig.json文件路徑，如下所示：

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

在src/api/resourcers/index.js更改您的導入導出，如下所示：

import * as Links from './links';

export {Links};

也安裝這個包並使用--save-dev選項

npm install --save-dev babel-plugin-module-resolver

在此之后將插件添加到package.json babel plugins我不知道你是否需要根前綴插件，但我刪除了它。

"plugins": [
  "transform-runtime",
  "transform-export-extensions",
  "transform-object-rest-spread",
  [
    "module-resolver", {
    "root": ["./src"],
    "alias": {
      "api": "./src/api"
    }
  }
]

您也可以將 api 更改為資源，但在這種情況下，您需要像下面這樣導入：

import {Links} from 'resources/index';

---

也請檢查這個和這個。