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

Question

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?

Answer 1

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.