Open selected file by path from within the VS Code editor in a new Tab

Question

I have an absolute path to a file (/path_to_file/file.file) embedded in my code, which is open in the VS Code editor. I want to create a shortcut to quickly open this file by either just clicking on the path or highlighting the path and pressing a shortcut.

// my code blabla
file = "/path_to_file/file.file"

I have something like this in mind, only it does not work:

keybindings.json:

[
    {
        "key": "ctrl+y",
        "command": "editor.action.openFileAtPath",
        "when": "editorTextFocus"
    }
]

The command editor.action.openFileAtPath does not exist. Is there an alternative?

I have tried creating an own snippet:

{
    "OpenFilePath": {
    "prefix": "openfile",
    "body": [
        "const filePath = \"$TM_SELECTED_TEXT$\";",
        "vscode.workspace.openTextDocument(filePath).then(doc => {",
        "    vscode.window.showTextDocument(doc);",
        "});"
    ],
    "description": "Open the selected file path"
},

and using it with keybindings:

 {
        "key": "ctrl+y", 
        "command": "editor.action.insertSnippet",
        "when": "editorTextFocus",
        "args": {
            "langId": "",
            "name": "OpenFilePath"
        }
    }

This, however, only replaces the highlighted text with the content of the snippet, but does not execute it. How can I achieve that?

is this absolute path one that exists on your machine? Or that is interpreted by some web server that will host this file? or one that exists on another machine that is not your dev machine? — starball, Aug 17 '23 at 10:39
This is an absolute path (or even relative, but that can be dealt with later) to a file on my machine. — benjamin, Aug 17 '23 at 12:07

Mark · Answer 1 · 2023-08-17T16:53:06.513

You will need an extension to do this. Another option is the Find and Transform extension (which I wrote). The necessary code is very small. This keybinding will find the path around the cursor - in your case assuming it is surrounded by quotes.

{
  "key": "alt+q",                // whatever keybinding you like
  "command": "findInCurrentFile",
  "args": {
    "description": "Open absolute path around cursor",  // whatever you want here
    
    "find": "(?<=\")([^\"]+)(?=\")",  // assumes path is bounded by quotes
    "isRegex": true,
    "restrictFind": "matchAroundCursor",  // put cursor anywhere on the path
    
    "run": [
      "$${",
                          // uses the regex capture group $1 from the find
        "const uri = vscode.Uri.file( '$1' );",   // treat $1 as a string
        "vscode.commands.executeCommand('vscode.open', uri);",
      "}$$",
    ]
  }
},

If a find regex won't work for you to isolate the path, you can also do it by selecting the entire path. Try this keybinding:

{
  "key": "alt+q",
  "command": "findInCurrentFile",
  "args": {
    "description": "Open absolute path that is selected",  // whatever you want here
    
    "run": [
      "$${",
        "const uri = vscode.Uri.file('${selectedText}');",        
        "vscode.commands.executeCommand('vscode.open', uri);",
      "}$$",
    ]
  }
}

The file path is not always surrounded by quotes. Depending on the file type it can even be without any surrounding characters. It might be better to have it highlighted and selected that way... — benjamin, Aug 17 '23 at 09:23
Okay, it is easy to modify this to just use the selection. It's just a bit more work on your part to select the path, but if there is no way to find your path with a regex then I'll make the change. — Mark, Aug 17 '23 at 14:43

score 0 · Answer 2 · answered Aug 17 '23 at 14:32

I made 2 extensions that can be used to solve this:

  {
    "key": "ctrl+y",
    "command": "htmlRelatedLinks.openFile",
    "args": {
      "file": "${command:selecttxt}",
      "method": "vscode.open",
      "viewColumn": "2",
      "command": {
        "selecttxt": {
          "command": "extension.commandvariable.transform",
          "args": { "text": "${selectedText}" }
        }
      }
    }
  }

If the file paths have a particular pattern in the file you can use the setting html-related-links.include and the extension will create Ctrl+Click links.

The pattern could be all strings that start with a /:

  "html-related-links.include": {
    "python": [
      { "find": "\"(/[^\"]+)\"", "isAbsolutePath ": true }
    ]
  }

score 0 · Answer 3 · answered Aug 17 '23 at 19:43

Bit of a workaround: If your code can stomache it, adding the file:// schema part to the path to turn it into a file URL will cause VS Code's builtin document link providers to allow ctrl+click. See the docs for DocumentLinkProvider's provideDocumentLinks method, which says:

Note that the editor ships with a default provider that detects http(s) and file links.

Ex. file:///my/absolute/path/to/file or file://C:/my/absolute/path/to/file.

Open selected file by path from within the VS Code editor in a new Tab

3 Answers3