非 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单击以浏览您的代码时最有用。