How to have relative paths navigable in VSCode

user_2659696 0
Viewed 1080

I have a JS project with babel configuration, and it's configured to support relative paths. Instead of doing this:

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

Writing the code in a more clean way:

import Class from 'app/somePath/Class';

babel.config.js

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

That's all great, but I struggle with navigation trough files. For example when using CMD+Click on path, to navigate to file doesn't work on relative paths.

Is there a way to support navigations for relative paths in VSCode?

UPDATE

I tried the method suggested by @rioV and add HTML Related Links configuration to my project:

myapp/.vscode/settings.json

Added the following to project settings:

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

User/settings.json

Also have included html-related-links.alwaysShow to true in the User settings:

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

And still doesn't seem to navigate when clicking the file path.

babeljs visual-studio-code
1 Answers

You can use the extension HTML Related Links v0.6.0. Now the name is no longer correct because it also can show related files in other file types.

If you add the following to your project/.vscode/settings.json

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

The imports that start with src/ are treated relative to the file root folder (most likely the workspace root). If you have a different file root you also need to modify the html-related-links.fileroot setting.

The other imports (do not start with src/) are relative to the current file.

Because you use JavaScript files you also have to set html-related-links.alwaysShow to true in the User settings or the (Multi Root) Workspace settings.

In the Explorer View Container there is a view named HTML Related Links. If you click on one of the entries that file will be opened if it exists.

From VSC v1.46 you can drag/drop views to a different location

user_99383170
Related