vscode“智能感知"和“转到定义"对于非 js/ts 文件

在前端开发中，我们经常不仅在 javasctipt 中导入 javascript/typescript 文件.我们使用两个别名和相对路径导入此类文件.

例子:

从'~/graphql/queries/brands.gql'导入brandQuery；从 '~/components/common/button/index.vue' 导入按钮；从'./list/index.vue'导入组件；

默认情况下，当我们导入此类文件时，VS Code 不支持非 js/ts 扩展 - 没有智能感知".和转到 Definitoon"对于此类文件.

我尝试了这样的扩展:

<块引用>

这可能在使用 ctrl/cmd 时最有用单击以浏览您的代码.

In frontend-development we often import not only javascript/typescript files in javasctipt. We import such files using both aliases an relative paths.

Example:

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

By default VS Code doesn't support not js/ts extensions when we import such files - there are no "Intellisense" and "Go to Definitoon" for such files.

I tried such extensions: Path intellisense and Path autocomplete

VS Code settings to support alias:

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

or

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

With these extensions we have autocomplete when we write import string. Also for relative paths "Go To Definition" works.

But "Go To Definition" doesn't work for not js-ts files imported using alias.

Do you know some way to have both "Intellisense", "Go To Definition" for all extensions that I need in my project?

解决方案

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

Many modern JS bundlers and frameworks use import statements to import assets such as images and stylesheets. We now support navigating through these imports with go to definition:

This is probably most useful when using ctrl/cmd click to navigate through your code.