非 js/ts 文件的 vscode“智能感知”和“轉到定義”

Question

在前端開發中，我們經常不僅在 javasctipt 中導入 javascript/typescript 文件。 我們使用兩個別名和相對路徑導入此類文件。

例子：

import brandsQuery from '~/graphql/queries/brands.gql';
import Button from '~/components/common/button/index.vue';
import Component from './list/index.vue';

默認情況下，當我們導入此類文件時，VS Code 不支持非 js/ts 擴展 - 此類文件沒有“Intellisense”和“Go to Definitoon”。

我嘗試了這樣的擴展： 路徑智能感知和路徑自動完成

支持別名的 VS Code 設置：

  "path-intellisense.mappings": {
    "~/": "${workspaceFolder}",
  },

或者

  "path-autocomplete.pathMappings": {
    "~/": "${folder}/",
  }

使用這些擴展，我們在編寫導入字符串時可以自動完成。 也適用於相對路徑“轉到定義”。

但是“轉到定義”不適用於使用別名導入的非 js-ts 文件。

您是否知道某種方法可以讓我在項目中需要的所有擴展同時擁有“Intellisense”、“Go To Definition”？

Answer 1

請參閱https://github.com/microsoft/vscode-docs/blob/vnext/release-notes/v1_57.md#go-to-definition-for-non-jsts-files

許多現代 JS 捆綁器和框架使用import語句來導入圖像和樣式表等資產。 我們現在支持使用go to definition ：

這可能在使用ctrl / cmd單擊以瀏覽您的代碼時最有用。