How to edit remote files using Remote VSCode

Visual Studio Code is a great editor for local files. Remote VSCode is an extension that enables editing files on remote systems in your local VSCode. Note that you will need to specify individual files on the remote computer and they will appear in your local VSCode. You cannot open a remote folder and expect all of the code there to be indexed for code browsing with this method.

  • Install rmate on the remote computer. rmate has been ported from its original Ruby implementation to Python, Bash and other languages. I like to use rmate-python. Installing it is easy:
$ sudo pip3 install rmate
  • On your local VSCode, install the Remote VSCode extension from here.

  • Open Preferences → Settings and in the User Settings window, add the following settings:

//-------- Remote VSCode configuration --------

// Port number to use for connection.
"remote.port": 52698,

// Launch the server on start up.
"remote.onstartup": true

// Address to listen on.
"remote.host": "127.0.0.1"

// If set to true, error for remote.port already in use won't be shown anymore.
"remote.dontShowPortAlreadyInUseError": false
  • Restart VSCode and run the command Remote: Start server by pressing F1.

  • SSH to your remote machine with port tunneling:

$ ssh -R 52698:127.0.0.1:52698 yourlogin@remotecomputer
  • Once you are SSHed into the remote computer, run this command there:
$ rmate -p 52698 file/you/want/to/edit

The file will appear in your local VSCode for editing. The remote file will be updated with any changes you make locally after you save the file.

Tried with: Visual Studio Code 1.22.2 and Remote VSCode 1.1.0

Advertisements

How to use clipboard for Vim in VSCode

Visual Studio Code has a decent Vim extension. I use it by default and sometimes wish I could yank to and paste from the system clipboard. Thankfully, this feature is available in the Vim extension, but turned off by default.

To turn on this feature, set the vim.useSytemClipboard setting to true. You may need to restart VSCode for it to take effect.

Note that you can yank text to the clipboard of your OS and also paste from it into VSCode using Vim.

Tried with: Vim extension for Visual Studio Code 0.11.5 and Visual Studio Code 1.22.2

How to install Visual Studio Code

Visual Studio Code (VSCode) is easy to install and configure. You just need to remember a few keyboard shortcuts.

  • Download the latest .deb file of VSCode from here.

  • VSCode is being developed rapidly and new releases appear frequently. If you have an older version of VSCode, uninstall it first:

$ sudo apt remove code
  • Install the downloaded VSCode:
$ sudo dpkg -i vscode-you-downloaded.deb
  • Start in a root directory of your code:
$ code .
  • VSCode will start up using all the files and directories inside the current directory as belonging to a project. While it is indexing the files, you will see a red flame icon in bottom-right corner. Once the flame goes away, you are ready to edit files!

  • Extensions: VSCode is no fun without extensions for your favorite languages (say C++ or Python) or your favorite features (say Vim). To install extensions use keyboard shortcut Ctrl+P and type ext install. You can search and install extensions from the VSCode Marketplace. Many extensions might restart VSCode to get enabled.

  • Settings: VSCode can handle both user settings (works across all projects) and workspace settings (works only for a particular project). All settings are set in JSON files. You can choose File → Preferences to open these. To set something, you need to copy that line from default settings to settings.json.

Tried with: Visual Studio Code 1.4 and Ubuntu 16.04

Visual Studio Code extensions that I use

  • CPP Tools: The official extension for working with C++ code. Automatically indexes all code in the currently open directory, offers auto-completion and syntax highlighting.

  • Python by Don Jayamanne: There are many Python extensions, but this seems to be the most popular one. Syntax highlighting, indexing and code completion.

  • Vim: There are many Vim extensions, but this seems to be the most popular one. It has entire universes to traverse before it can be as good as Vrapper, the Vim extension for Eclipse. This VSCode extension offers very basic navigation and editing commands.

  • Git Blame: This extension does one little thing that I need everyday to work with code from other people: know who modified a line of code. This extension shows that for the current line in the status bar.

  • Matlab: I need to regularly browse through some MATLAB files. This extension offers syntax highlighting of Matlab files.

Tried with: Visual Studio Code 1.4 and Ubuntu 16.04

Visual Studio Code Keyboard Shortcuts

I am finding Visual Studio Code to be very useful as a light IDE and editor for C++ and Python code on Linux.

Some keyboard shortcuts that I find useful:

Ctrl + B:         Toggle sidebar
Ctrl + P:         Search for file to open
Ctrl + Shift + F: Search for text in files
Ctrl + Shift + P: Editor commands
Ctrl + G:         Jump to line number
Ctrl + Tab:       Switch between open editors
Ctrl + Shift + O: Jump to symbol in current file
Ctrl + T:         Jump to symbol in current workspace
Ctrl + `:         Open terminal
F12:              Go to definition
Ctrl + Alt + -:   Go back
Ctrl + /:         Toggle line comment
Alt  + Shift + 1: Toggle between vertical and horizontal split windows

Some user interface tips:

  • Single click on filenames in the Side Bar opens files into the same editor tab, replacing the earlier one. This is useful when browsing through files. Notice that the filename is in italics on the editor tab in this mode.

  • Double click on filenames in the Side Bar opens file in a new editor tab. The file owns that editor tab. Notice that the filename is not in italics on the editor tab.

  • Ctrl + single click on filename in Side Bar to open it in existing editor tab in second vertical split.

  • Ctrl + double click on filename in Side Bar to open it in new editor tab in second vertical split. This file will own the tab.

  • What if you opened a file using single click, but now wish it owned the tab, so that it will not be replaced when you open next file? Aha, Visual Studio Code has you covered! Double click the filename on the tab. You will see that the italics is removed. The file now owns this tab.