vscode“智能感知"和“转到定义"对于不是 js/ts 文件 [英] vscode "Intellisense" and "Go to definition" for not js/ts files

问题描述

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

示例:

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

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

我尝试过这样的扩展:

<块引用>

这可能在使用 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.

这篇关于vscode“智能感知"和“转到定义"对于不是 js/ts 文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！