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.
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.
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
exclude files. This works more like other front end dev tools like
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:
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
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.
.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.
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.