时间戳

首页 > 解决方案 > 如何让相对路径在 VSCode 中可导航

visual-studio-code - 如何让相对路径在 VSCode 中可导航

问题描述

我有一个带有 babel 配置的 JS 项目，它被配置为支持相对路径。而不是这样做：

import Class from '../../../../somePath/Class';

以更简洁的方式编写代码：

import Class from 'app/somePath/Class';

babel.config.js

const plugins = [
  [require('babel-plugin-module-resolver'), { root: ["./app/"] }],
];

这一切都很好，但我在导航槽文件中遇到了困难。例如，当使用 CMD+单击路径时，导航到文件不适用于相对路径。

有没有办法支持 VSCode 中的相对路径导航？

更新

我尝试了@rioV建议的方法，并将HTML 相关链接配置添加到我的项目中：

myapp/.vscode/settings.json

在项目设置中添加了以下内容：

  "html-related-links.include": {
    "javascript": [
      { "find": "import [^ ]+ from '((?=app/).+?)';", "filePath": "/$1.js" },
      { "find": "import [^ ]+ from '((?!app/).+?)';", "filePath": "$1.js" }
    ]
  },

用户/settings.json

还包括html-related-links.alwaysShow to true在用户设置中：

"html-related-links.alwaysShow": true,
"html-related-links.fileroot": [
    "./app"
],

单击文件路径时似乎仍然无法导航。

标签： visual-studio-codebabeljs

解决方案

您可以使用扩展HTML 相关链接v0.6.0。现在名称不再正确，因为它还可以显示其他文件类型的相关文件。

如果您将以下内容添加到您的project/.vscode/settings.json

  "html-related-links.include": {
    "javascript": [
      { "find": "import [^ ]+ from '((?=src/).+?)';", "filePath": "/$1.js" },
      { "find": "import [^ ]+ from '((?!src/).+?)';", "filePath": "$1.js" }
    ]
  }

开头的导入src/相对于文件根文件夹（很可能是工作区根）进行处理。如果您有不同的文件根目录，您还需要修改html-related-links.fileroot设置。

其他导入（不以 开头src/）是相对于当前文件的。

因为您使用 JavaScript 文件，所以您还必须html-related-links.alwaysShow在true用户设置或（多根）工作区设置中进行设置。

在Explorer View Container 中有一个名为HTML Related Links. 如果您单击其中一个条目，该文件将被打开（如果它存在）。

从 VSC v1.46 开始，您可以将视图拖放到不同的位置

推荐阅读