Add blog article about VSCode

blog/2024-04-212-vscode/index.md

@@ -9,7 +9,76 @@ Jumping into remote development might feel scary at first, but with Visual Studi
 
 ## Step 1: Install Visual Studio Code
  If you haven't already, grab the latest version of Visual Studio Code [here](https://code.visualstudio.com/download) and install it on your machine.
-## Step 2: Install the Remote Development Extension Pack
- Head to the Extensions view in VS Code (Ctrl+Shift+X) and search for "Remote Explorer". Install the extension pack from Microsoft.
+
+## Step 2: Install the Remote Explorer Extension Pack
+ Open VS Code and head to the Extensions view in VS Code.
+ 
+ ![Extensions view](VSCode_0.png)
+ 
+ And search for "remote".
+ 
+ ![Remote search](VSCode_1.png)
+
+Install the "Remote Explorer" extension pack from Microsoft.
+ ![Extensions view](VSCode_2.png)
+  
 ## Step 3: Connect to Your Remote System
- Once the extension pack is installed, you'll see a new icon in the Activity Bar on the side. Click on it, and select "SSH Targets" to add a new SSH connection. Fill in the necessary details like hostname, username, and optional SSH key.
+ Once the extension pack is installed, you'll see a new icon in the Activity Bar on the side.
\ No newline at end of file
+ ![Additional sidebar](VSCode_3.png)
+ 
+ Click on it, and select "SSH Targets" to add a new SSH connection.
+ ![SSH Targets](VSCode_4.png)
+  
+ Yse you typical SSH command you use to connect to JSC systems, in this example I'm connecting to JURECA-DC.
+ ![SSH command](VSCode_5.png)
+
+ Safe SSH configuration to the config file.
+ ![Safe SSH config](VSCode_6.png)
+
+ The following SSH config file will be created 
+ ![Example of SSH config file](VSCode_7.png)
+
+ :::tip
+
+The SSH config file is a text file where you can store settings for your SSH connections. It lets you create shortcuts for hosts, customize connection settings, and make connecting to remote servers easier.
+
+ :::
+
+ Now you will see new entry in your "Remotes" 
+ ![Extensions view](VSCode_8.png)
+ 
+To connect to the remote you hover over the entry and select either "Connect in Current Window" (arrow icon) or "Connect in New Window". And a new terminal will be opened.
+
+## Step 4: Access remote filesystem
+ A simple terminal is not enough for us. We want to manipulate files and directories on the remote system, e.g. copy/open/edit files. To do this, we would need to click "Open Directory" in an already established remote connection.
+ ![Open remote directory](VSCode_9.png)
+
+  By default you will see the path to your $HOME directory, which is small on JSC systems and dedicated to storing SSH keys and configuration files.
+
+ ![Do not use $HOME](VSCode_10.png)
+
+ Therefore we are going to mount $PROJECT directory, e.g. ```/p/project/training2410```
+ ![Mount $Project directory](VSCode_11.png)
+ 
+  The VS Code prompt appears when you open a new folder for the first time, asking if it should be trusted. If you're confident that simply browsing the directory is safe, select the appropriate option as shown below. This enables all editor features for that directory, safeguarding against potential dangers from malicious sources.
+
+ :::note
+
+ You can modify you trusted directory later:
+ Click on settings (gear icon) -> Command Palette ... -> Run in the Workspaces "Manage Workspace Trust" command -> do modifications
+
+ :::
+
+ ![Extensions view](VSCode_12.png)
+
+ Now you can work on remote system as on your local machine. 
+
+ :::tip
+
+ If you do not see terminal in VS Code, you can always enable it via View -> Terminal
+
+ :::
+
+ ![Extensions view](VSCode_13.png)
+
+ Happy coding with VS Code!
\ No newline at end of file