How to open file into VS Code Split window programatically

Question

I have a specialized WebView extension in VS Code that I use to generate .Net Classes. These files are generated through an external command line tool. One of the features that the command line tool provides is that it writes to a specific file, the location of the generated file in JSON format. I setup a file watcher on this particular file so that anytime it is updated, I run an extension method that parses that json file, extracts the file path from within the json and then opens that file inside VS Code.
While this works, my intent is to open this file inside a split editor, such that on one side I have my WebView (html) showing, and the other to show the file that was just opened (aka, that who's path came from the JSON file as mentioned above).

How do I open a file to be opposite side of a split window, keeping my webview ext. view on one side and the other side showing the newly opened file?

I have this working such that it opens the file, but not in a split-view editor

    // uri points to the file to read JSON from
    let fileUri: vscode.Uri = vscode.Uri.file(uri.fsPath);
    // read JSON from relative path of this file
    fss.readFile(fileUri.fsPath, 'utf8', function (err, data) 
    {
       if(!err) {
          try{
            // parse the data read from file as JSON
            var jsonObj = JSON.parse(data);
            try{
                // create uri from path within json
                let fileToOpenUri: vscode.Uri = vscode.Uri.file(jsonObj.path);
                // open and show the file inside VS code editor
                vscode.window.showTextDocument(fileToOpenUri);   
            }
            catch(ex)
            {
                // handle file Open error
                vscode.window.showErrorMessage(ex);
            }
          }
          catch(ex)
          {
            // handle JSON Parse error
            vscode.window.showErrorMessage(ex);
          }
        }
        else 
        {
            // handle file read error
            vscode.window.showErrorMessage(err.message);
        }
    });

Looking to open the file into the opposite side of a splitview.

Lubricious

If you want the same, but without writing an extension, see #72130797 – Sorrow

Answer 1

vscode.window.showTextDocument(document, {
    viewColumn: vscode.ViewColumn.Beside
});

https://code.visualstudio.com/api/references/vscode-api#TextDocumentShowOptions

https://code.visualstudio.com/api/references/vscode-api#ViewColumn

Cracker

Wondering if you have seen any odd behaviour using vscode.ViewColumn.Beside? I've noticed that in some cases, a 2nd/3rd etc tab is opened instead of re-using the first opened tab? – Brunet

Interesting that there doesn't seem to be a way to open the preview in a panel above the editor. – Ledezma

@Brunet vscode.ViewColumn.Two However, it is custom editor in my case and it fails to render as such... – Avitzur

@Brunet I wrote a utility that handles this case https://mcmap.net/q/2025185/-how-to-open-file-into-vs-code-split-window-programatically – Authorize

@AlenSiljak This is my issue as well. Looks like it is possible, but you will have to execute a vscode command to first split the window and then use the new active ViewColumn.Active. Like so, vscode.commands.executeCommand('workbench.action.splitEditorOrthogonal'); Source - github.com/eclipse-theia/theia/blob/… – Authorize

Answer 2

To avoid splitting the editor more than once, you can use this utility function I wrote.

import { ViewColumn, window } from "vscode";

/** @author Patrick Michaelsen MIT License */
export const getBesideViewColumn = () => {
  const editor = window.activeTextEditor;
  if (!editor) {
    return ViewColumn.Active;
  }
  const currentColumn = editor.viewColumn;
  const viewColumns = window.visibleTextEditors.length;
  const targetColumn = currentColumn === 1 ? 2 : 1;
  return viewColumns > 1 ? targetColumn
    : ViewColumn.Beside;
}

Authorize