Configuring Visual Studio Code to Sync with Raspberry Pi #tt5

Tinkerer: Lory Livezey

Visual Studio Code is a development tool especially suitable for writing front-end code, such as HTML5, Angular, React, and Vue. Compared to Microsoft Visual Studio, which has "MVC" and various server side technologies, VS Code is a light-weight tool that allows you to choose from a wide range of extensions tailored for your environment.

Previous Step

None. You can start right here.

What you will need

Install VS Code

If you don't already have VS Code, you can download from this link on Microsoft's Web Site. Download it for your environment, and install it using the default options.

Install Git

Git is required for the extension we are going to use, and it's a good idea to have it anyway. Download it from git-scm.com, and install it with all of the defaults.

More detailed instructions are here:

Open the Directory

VS Code is different than Visual Studio in that you work directly with a directory in the file system, rather than going through a Solution file, where you have to include and exclude files. This works more like other front end dev tools like Atom and WebStorm. VS Code relies heavily on extensions and there are many to choose from!

You can either open an existing directory to work in, or you can create one.

Install the Ftp-Sync Extension

Next, click on the Extensions icon in the left pane, it's the square one:

Arrow pointing to the Extensions Icon

In the search box, type ftp, and you'll see the choices popping up. Click on ftp-sync and then click Install. Finally, restart the program.

Set Up Ftp-Sync

When you click F1 a box will pop up that will let you type in commands. If you first start typing the name of the extension, it will give you a list of available commands. Type ftp and you'll see the available commands for the Ftp-Sync extension. We're going to start out with ftp-sync: Init. When you click that, an XML file will open so you can set it up. You'll want to change these settings:

  • remotePath: Use a valid directory on your Raspberry Pi
  • host: Set this to the IP address assigned to your Raspberry Pi
  • username: The username for your Pi
  • password: The password for your Pi
  • port: Change this to port 22
  • protocol: Change this to sftp

Sync Raspberry Pi

Click F1 again and this time, select the Ftp-sync: Local to Remote option, since we are going to copy files from the computer to the Raspberry Pi.

Select .Choose this Folder to select the current folder

You'll get 3 options to choose from:

  • Full Sync will go in both directions, so if you have made changes on both sides, it will copy in both directions
  • Safe Sync will not delete any files that you may have deleted on one side
  • Force Upload will upload all files regardless of whether they have changed

You'll initially want to select Full Sync to copy all the files to your Pi.

Once it does a comparison, it will let you know how many files are affected. Select Run all xxx Operations to continue with the sync.

Check the Raspberry Pi

Next, remote into the Raspberry Pi to check for the new files. You can use Putty on Windows or Terminal on Mac, or various other options. I am using VNC. If you are not set up, here are some instructions on Installing RealVNC for Windows to Access Raspberry Pi Remotely and also Installing Putty for Windows to Access Raspberry Pi Remotely.

Browse to the directory, and make sure your files are there.

Success!

You have successfully set up Visual Studio Code to help manage the code on your Raspberry Pi. You can even write and modify your code from your PC, though there are things you won't be able to debug. Subscribe to our channel if you'd like to be notified when we post more tutorials about VS Code or the Raspberry Pi.

Be sure to subscribe to our channel!