TimmerTech
vs code synology

Synology & VS Code

Synology Feb 5, 2023

Today we are having a fabulous post about easy editing files on Synology. Quite often, you will run into a situation where you have to edit files on your Synology. For example, configuration files or docker-compose files for your containerized applications. Doing this with SSH and the vi editor can be quite draining. It would be nice if we could use a fancy editor from your computer to edit files on our Synology. So this post will be about how to edit with Visual Studio Code (VS Code) on Synology. So let’s get started.

Let me explain what we are going to achieve with this post. We want to run VS Code on our client computer, connect with VS Code to our Synology over SSH and be able to edit files.

What is Visual Studio Code?

Visual Studio Code is a cross-platform, open-source, lightweight editor which is extremely powerful because it can be extended with features through its plugin marketplace. All are free of charge. Read more about it here.

Prerequisites

So what is that we need? Well, first we should be able to connect to our NAS with SSH. Please read my post here on how to do this. For this guide, I do recommend also configuring key-based login with easy access. You can read how to set that up here. Please make sure you complete the easy access section where you configure an entry in your local .ssh/config file to connect to your Synology.

And of course, we need Visual Studio Code. Please download and install it from its official website.

Configure SSH Server

Out-of-the-box a remote connection from VS Code to a Synology will not work. This is due to the fact that we need to activate a certain setting to get it working.

Safeguard sshd_config changes

Always be very careful when editing the /etc/ssh/sshd_config file, if you make a mistake you can lose access to your Synology over SSH. For this, we are going to set up a safeguard.

We need to change a parameter in the SSH server configuration. As mentioned above making mistakes in such changes we might encounter the situation that we will be unable to login to SSH again. And for some people in the past this has even resulted in re-installing DSM to fix it. However, there is a simple way of working around this risk. Work with a safeguard.

SSH Server Safeguard

I created a safeguard to protect your SSH login if you accidentally make mistakes when editing the SSH server configuration. The solution to our problem is quite simple. The command I devised as our safeguard is a background process that will execute a command after a specific time.

When started, this will give us a PID (Process Identifier), which is the ID of a process. Then we will edit our SSH server configuration. And if we are successful, we simply re-login after our changes and stop the background safeguard process we started.

What if we fail, and after the changes, we can no longer log in? Well, that’s the cool trick of this safeguard. We are going to do nothing and get a cup of coffee or thee. Then after the time-out we configured, the safeguard will run; it will restore the SSH server configuration with the original configuration of DSM and restart the SSH Server. So the worst that can happen is that we lose all of our previous successful made configurations, and we have to start over. Take it from me on this one, starting over with your SSH server configuration is a far better scenario than re-installing DSM.

This does however, mean that when editing our SSH server configuration, we are always on the clock. But that’s still a better scenario than losing access.

SSH Server Safeguard Command

The safeguard command must be run under the user root

For the command, the time-out is defined in seconds, 300 = 5 minutes, 600 = 10 minutes. Please make sure you define a time-out that will give you enough time. I recommend using 10 minutes.

( sleep 600; cp /etc.defaults/ssh/sshd_config /etc/ssh/sshd_config; systemctl restart sshd ) &

Please note that the & at the end, and the parenthesis have a purpose in this command. This will copy the original sshd_config from the DSM backup to the active location of the SSH server configuration, and then it will restart the SSH server to make sure we can log in again.

When is command is executed it will return the following.

[1] 18367

[1] a single process was sent to the background and 18367 is the PID (Process Identifier).

Write down the PID number we need this later to be able to stop our safeguard if everything went successfully.

Configure TCP Forwarding

So what do we need to use Visual Studio Code in combination with Synology? We need to enable AllowTcpForwarding. By default, this setting is set to no and we simply need to change this to yes. Please note that the SSH server configuration is case-sensitive. So the key AllowTcpForwarding has capitals in it and its values no, yes are lowercase.

There are two ways we can configure this. Either for everybody or only for specific users. The choice is yours, I will provide both configurations.

The configuration of the SSH server is located in this the following file which can only be edited by root: /etc/ssh/sshd_config

  1. Login to SSH
  2. Switch to the root with sudo -i
  3. Start the safeguard
  4. Write down PID number
  5. Update sshd_config and close to the bottom, you will find AllowTcpForwarding.
    Change this to AllowTcpForwarding yes. Do not edit all the way at the bottom of the section that has Match User. That is for individual user settings.
AllowTcpForwarding yes
  1. Save the file
  2. Restart the SSH Server with the command: systemctl restart sshd
  3. If you do not lose your connection, exit your connection and re-login to SSH
  1. Login to SSH
  2. Switch to the root with sudo -i
  3. Start the safeguard
  4. Write down PID number
  5. At the bottom of the sshd_config add the following section. Replace USERNAME with the username, you want to apply the setting for. Use <TAB> for the indent.
Match User USERNAME
    AllowTcpForwarding yes
  1. Save the file
  2. Restart the SSH Server with the command: systemctl restart sshd
  3. If you do not lose your connection, exit your connection and re-login to SSH
Success

Everything went successful, we have now re-logged in. Kill the safeguard with the following command, replace PID with the number you wrote down earlier.

kill -9 PID
Failure

We made a mistake, and now we need to get some coffee, if you used the unmodified version of the safeguard command then you have to wait about 10 minutes. So get some coffee, and start over in about 15 minutes from now.

Connect with Visual Studio Code

We are almost ready to connect to our Synology with Visual Studio Code. So what do we need? Well, the final step is very simple. We need to install the office Visual Studio Code extension that gives VS Code the ability to connect to remote machines.

Visual Studio Code

Install the ‘Remote SSH’ extension

We need to install the Remote SSH extension by Microsoft to give Visual Studio Code the ability to connect over SSH.

  1. Open the extension panel
  2. Search for Remote SSH by the publisher Microsoft
  3. Click Install
  4. Also, I advise installing the Remote Explorer extension by the publisher Microsoft. This extension will add a nice menu for browsing your remote connections.

Connect to Synology

There are 2 ways to connect to a remote host with Visual Studio Code. Either through the Remote Explorer or through the Open a Remote Window (This is the green icon at the bottom left corner). In you have set up easy access with my previous post here, about an entry in your local .ssh/config then you can connect. Else you have to set up an entry first.

  1. Click on the green icon at the bottom left of Visual Studio Code.
  2. A popup will be shown at the top, click Connect to Host... [remote-ssh]
  3. Now select your Synology from the list or scroll down and select + Add New SSH Host...
  4. When you have added or selected your Host, a new Window will open, and it will start connecting.

    The first time it might give a warning that the remote host may not meet VS Code Server’s prerequisites for glibc and libstd++, but you can ignore this.

    You might are presented with some questions, like selecting your type of Host, do you want to accept this fingerprint, etc.
  5. After a successful connection, at the bottom left in the green bar, it should now say. SSH: mynas
  6. Open the File Explorer, Click Open Folder, and provide the path of the folder you want to open.
  1. Open the Remote Explorer in the panel
  2. If your host is not present already, you can add it by hovering over SSH, and to the right, you will find a + to add a new host. You will have to provide the entire SSH command.
  3. When you right-click on a Host you can select either open in the current, or new window, the choice is yours.

Happy Editing

Final thoughts

I hope this guide will help you set up an easy way to edit your files. Please leave a comment or send me an email.

Tags

Garrett Timmer

Recommended for you