Edit files directly on Linux with Visual Studio Code Remote SSH

Edit files directly on Linux with Visual Studio Code Remote SSH

Here, we will edit the file on Linux with Visual Studio Code that runs on Windows. Here we use ubuntu 20.04.1.

I think there are many similar articles, but I will keep a record of what I did.

What to do in this article

Not covered in this article

preparation work

  1. Install TeraTerm.
  2. Prepare the Linux to connect to.
  3. Install Visual Studio Code.

(Linux side) Settings that can connect to SSH

Execute the following command to enable SSH by referring to https://qiita.com/m-tmatma/items/9a562863ca99ca6c0d1c.

sudo apt install -y openssh-server
sudo systemctl start ssh
sudo systemctl enable ssh

(Windows side) How to generate RSA private / public key

SSH key generation

Start Tera Term and select SSH key generation from the menu

image.png

Make sure the key type is RSA, set the number of bits to 4096, and select generate.

image.png

If necessary, write a comment in the comment field for later reference.

image.png

Save public key

Press Save Public Key.

At this time, you need to specify the save destination, but usually specify the folder % USERPROFILE% \ .ssh. % USERPROFILE% means C: \ Users \ your username.

If this directory does not exist, create it with the following command.

mkdir %USERPROFILE%\.ssh

After creating the directory, specify it. Keep the default filename id_rsa.pub and press Save.

Storage of private key

  1. Press Save Private Key.
  2. At this time, the following dialog will appear. Here, press Yes to leave the passphrase empty. image.png
  3. When saving the public key, I specified % USERPROFILE% \ .ssh, so that location is selected.
  4. Keep the default filename id_rsa and press Save.
  5. Press the Close button to close it.

Important (security precautions)

** The private key is very important information and you need to make sure it is not leaked. ** ** This information is similar to a password, so if it is leaked, you will be able to log in to the Linux server freely, so you need to manage it strictly.

(Windows side → Linux side) Transfer the generated RSA public key to the Linux server

Transfer RSA public key to Linux server

  1. Use Tera Term to log in to the Linux server using your user name and password.
  2. In Explorer, open the folder where the generated RSA public key ends.
  3. Drag and drop id_rsa.pub (= RSA public key) into the Tera Term window.
  4. With SCP checked, press OK. image.png

Check if the RSA public key has been transferred to Linux

If you run ls on the console of Tera Term, you can see that id_rsa.pub is transferred. You need to make sure that you don't forward the id_rsa by mistake. (I made a mistake while writing this article)

(Linux side) Setting to enable login to Linux server with RSA public key

Set up to log in using the transferred RSA public key. Place the transferred public key by referring to https://m-tmatma.github.io/ssh/auto_login.html.

mkdir -p ~/.ssh
cat id_rsa.pub >>  .ssh/authorized_keys
rm  id_rsa.pub
chmod 755 ~
chmod 700 ~/.ssh

This procedure removes id_rsa.pub as it is no longer needed.

(Windows side) Confirm that you can log in to Linux with the set public key

  1. The SSH Authentication dialog that appears when you connect to the server is displayed.
  2. Leave the RSA / DSA / ECDSA / ED25519 Use Key checked.
  3. For private key, specify the file path of the private key. image.png
  4. You can see that you can log in without a password.

(Windows side) Install SSH Remote plug-in of Visual Studio Code

  1. Search for Remote --SSH and install it.
  2. After installation, the icon for remote connection will increase. image.png

(Windows side) Setting the SSH Remote plug-in of Visual Studio Code (setting the location of the RSA private key)

  1. Click the icon for remote connection. image.png
  2. Move the mouse around SSH TARGETS to display the hidden icon. Click the setting icon. image.png
  3. The path of the configuration file will appear in the options, so select the setting for your user. This is the part hidden by the white fill. 9.PNG
  4. The screen for editing the ssh configuration file with Visual Studio Code appears.

The contents are as follows.

# Read more about SSH config files: https://linux.die.net/man/5/ssh_config
Host alias
    HostName hostname
    User user

Add the IdentityFile setting to this and save it. It looks like the following

# Read more about SSH config files: https://linux.die.net/man/5/ssh_config
Host alias
    HostName hostname
    User user
    IdentityFile C:\Users\winuser\.ssh\id_rsa.pub

(Windows side) Setting SSH Remote plug-in of Visual Studio Code (adding the Linux server to connect to)

  1. Move the mouse around SSH TARGETS and press the+button. image.png
  2. Specify it in the format username @linux servername and press ENTER. image.png
  3. When the setting file selection screen appears, select the location of the setting file corresponding to your user.
  4. The server item is added. image.png

(Windows side) Setting SSH Remote plug-in of Visual Studio Code (adding the Linux server to connect to)

  1. Select the + icon to open another window and confirm the OS. Select Linux and press ENTER. (Since I couldn't take a screenshot well, I omitted the screenshot). If you skip here, it will not connect well. The very first connection takes time as it sets up the server side behind the scenes. image.png
  2. Another Visual Studio Code window will open. image.png It looks like nothing has changed, but if you select Open Folder from the File menu, the path part will be / home / user as shown below, and it will be directly on the Linux server. You can open the file system. image.png
  3. Press OK and you will be able to directly browse to the 192.168.11.56 folder. image.png
  4. Try saving the file by selecting New File from the File menu. image.png
  5. If you try ls -l in the Tera Term window that is opened separately, you can see that the file has been created and matches the edited contents. image.png

I opened the file on the server with Visual Studio Code in a separate window, but you can also open it in the same window.

Recommended Posts

Edit files directly on Linux with Visual Studio Code Remote SSH
Remote debugging with Visual Studio 2017
Java with Visual Studio Code (Part 2)
Remote debugging in Visual Studio (Linux)
Use Jupyter Notebook with Visual Studio Code on Windows 10 + Python + Poetry + pyenv-win
Create a Python development environment on Windows (Visual Studio Code remote WSL).
Edit the file of the SSH connection destination server on the server with VS Code
Build Python development environment with Visual Studio Code
Organize files on Windows with Linux commands-using WSL-
Let's do Linux System Programming with Visual Studio Code and Azure! (From helloworld to nginx development and remote debugging)
Try debugging Python on Raspberry Pi with Visual Studio.
Python development environment with Windows + Anaconda3 + Visual Studio Code
Python development environment with Windows + Python + PipEnv + Visual Studio Code
How to use linux commands in Visual Studio Code terminal
Set up a Python development environment with Visual Studio Code
Install python and Visual Studio Code on windows10 (April 2020 version)
Build Python3 for Windows 10 on ARM with Visual Studio 2019 (x86) on Windows 10 on ARM
[Scp] Copy files locally from Linux server with Tera Term ssh scp
Bash, Python, Javascript, code command, etc. in Visual Studio Code on Mac
How to develop containers on remote servers with VS Code Remote-Containers
Build jupyter notebook environment with Visual Studio Code (VS Code) Mac version
Use Chrome Remote Desktop on Linux
Find large files / directories on Linux
I installed the library with Visual Studio Code, but Unable to import