Using the VS Code Integrated Terminal with Remote Hosts

I am in the process of writing some server-side scripts on a remote server. There are three things that would make it easier:

1. If I could write the code directly to the server from VS Code
2. If the integrated terminal in VS Code would automatically log me into that server
3. If I could easily toggle between the code window and the terminal window

I am going to describe how to do all of those things.

Writing Code Directly to the Server in VS Code

To write code directly to the server, I am using an SFTP extension I found in the VS Code Marketplace. The extension I am using is simply called sftp.

To configure it, you open the command palette (Cmd+Shift+P) and select SFTP: Config. This will generate a file called sftp.json within the .vscode directory of your workspace. You can check out the full config options, but basically you just need to specify the host, username, and remote path. So that my code is automatically saved to the server, I set the uploadOnSave option to true in the sftp.json file.

And so that I don't have to log in every time, I am using the privateKeyPath option as well. I won't go into the details here of how to set up SSH for auto login without a password but it is definitely a time saver.

Automatically Logging into the Remote Server

The next thing I wanted to accomplish was automatically logging into the remote server in the integrated terminal. To do that I need to update my workspace settings.

To start I select Code ▶ Preferences ▶ Settings to open the Workspace Settings. Then within the settings, I add some JSON to tell it to call the ssh command with an argument of the server name.

Also, because I like to color code my terminal windows, I found the workbench.colorCustomizations setting which allows me to set a value for terminal.background.

For this change to take effect, I have to restart VS Code. A security feature prompts me to make sure this is what I really want to do. This only happens the first time.

I have to restart VS Code one more time. This time when I open the terminal, it automatically logs me into the remote server so that I can test my scripts.

Toggling Between the Code Window and the Terminal Window

While I like having the terminal window integrated into my IDE, I don't like having to use the mouse to click back and forth between the two windows. Fortunately, someone on Stack Overflow had already solved that problem.

This time I go to Code ▶ Preferences ▶ Keyboard Shortcuts. To make the change, I first have to click on the keybindings.json link:

Then I can paste in the code for my settings.

Now after I save my code, I simply press Ctrl+` to switch to the terminal window, test my code, and then press Ctrl+` again to return back to my code.

Changing Chrome Policies for Testing

I recently ran into a situation where I was pretty sure that a group policy was breaking functionality on my intranet app, but I needed a way to test that theory. After some research, I finally figured out a way to do this.

I am working on an Oracle Virtual Box VM of Windows 7. Because it's a VM on my laptop, I have complete control over the operating system. To set the policy, I used the Windows Registry Editor regedit.

Within Computer\HKEY_CURRENT_USER\Software\Policies, I created a new key called Google. Then within Google, I created a new key called Chrome.

From there, I just needed to add policies one by one until I figured out which one was breaking my app. The link at https://www.chromium.org/administrators/policy-list-3 provides a full list of policies. After saving a policy, I would restart Chrome and the new policy would be enabled. Sure enough, I found the culprit. By toggling this policy and restarting Chrome I could verify that the application worked and then broke with each change of the policy.

Stopping a page redirect to look at JavaScript console

I am currently assisting another developer troubleshoot an issue he's having. In the code, there is a JavaScript function call tied to the onclick event of the HTML link. Because the JavaScript code is failing, the page is redirecting before I have a change to look at the console log to see what the error is. One solution is to use a breakpoint in the code and that's what I'll ultimately do. But I found this great hack.

window.addEventListener("beforeunload", function() { debugger; }, false)

By running this code in the console first, it will pause execution and allow me to see the error in the console.