{"id":17354,"date":"2024-11-12T14:27:44","date_gmt":"2024-11-12T19:27:44","guid":{"rendered":"https:\/\/carleton.ca\/scs\/?p=17354"},"modified":"2024-11-12T14:27:44","modified_gmt":"2024-11-12T19:27:44","slug":"vscode-remote-access-and-code-editing","status":"publish","type":"post","link":"https:\/\/carleton.ca\/scs\/2024\/vscode-remote-access-and-code-editing\/","title":{"rendered":"vscode: Remote Access and Code Editing"},"content":{"rendered":"

vscode: Remote Access and Code Editing<\/h2>\n

\"\"
\nStep 1: Install vscode<\/a>
\nStep 2: Install Remote-SSH Extension<\/a>
\nStep 3: Create Remote-SSH Connection<\/a>
\nStep 4: Open Folder on Remote Server<\/a>
\nStep 5: Open a terminal, edit some code, run some code!<\/a>
\nTroubleshooting: Failed Login<\/a>
\nTroubleshooting: Disk Full<\/a><\/p>\n

In addition to these instructions, you can find a video tutorial here: Video: vscode: Remote Access and Code Editing<\/a><\/p>\n

Step 1: Install vscode<\/h3>\n

The first thing you need to do is install vscode on your local device (person computer). We won’t go into the details of installing it here as it varies depending on your device (Linux, Windows, iOS). The install is usually straight-forward.
\nThe vscode<\/strong> download for various platforms can be found here: vscode download<\/a><\/p>\n

Step 2: Install Remote-SSH Extension<\/h3>\n

vscode cannot make remote connections initially. The Remote-SSH<\/strong> extension is required<\/p>\n

    \n
  1. \nOpen vscode<\/strong> and click on the Extensions<\/strong> panel button (see Red Box<\/span> in the image below)
    \n\"\"\n<\/li>\n
  2. \nClick on the extension search bar<\/em> (see Red Box<\/span> in the image below) and start typing remote ssh<\/code>.
    \nThe Remote – SSH<\/strong> extension should appear (see Green Box<\/span> in the image below).
    \nClick on the Install<\/strong> button (see Purple Box<\/span> in the image below).
    \n\"\"\n<\/li>\n<\/ol>\n

    Step 3: Create Remote-SSH Connection<\/h3>\n
      \n
    1. \nA new panel button called Remote Explorer<\/strong> should appear – you may have to close and reopen vscode<\/em> (see Red Box<\/span> in the image below). Click on the Remote Explorer<\/strong> button.
      \nExpand the tree down until you see the SSH<\/strong> branch (see Green Box<\/span> in the image below).
      \nClick on the plus (+)<\/strong> button to begin adding a new SSH connection (see Purple Box<\/span> in the image below).
      \n\"\"\n<\/li>\n
    2. \nIn the SSH Connection<\/strong> box that opens (see Red Box<\/span> in the image below)
      \nEnter ssh student@134.117.130.199<\/code> – replacing the IP with you own 134.117.#.#<\/strong> IP address<\/em>
      \n\"\"\n<\/li>\n
    3. \nIt will ask you to save the connection information to an ssh config file<\/em>. The default one will vary depending on what operating system you are running. In general you can select the first option (see Red Box<\/span> in the image below)
      \n\"\"\n<\/li>\n
    4. \nA pop-up will appear saying the host was added. If you want, you can manually modify the ssh config file by clicking Open Config<\/strong>. However, this is not required, and in this case we will just click Connect<\/strong> (see Red Box<\/span> in the image below)
      \n\"\"\n<\/li>\n
    5. \nYou will then be prompted for the password for the student<\/strong> account (see Red Box<\/span> in the image below).
      \n\"\"\n<\/li>\n
    6. \nIt will then show a pop-up on the bottom right showing the vscode-server<\/strong> being added to the remote account. This make take a few moments to complete.
      \n\"\"\n<\/li>\n
    7. \nAnd that should complete adding the connection. A new empty vscode workspace should open that is connected to that remote server.\n<\/li>\n<\/ol>\n

      Step 4: Open Folder on Remote Server<\/h3>\n
        \n
      1. \nNow that the vscode workspace is connected to the remote server, we need to open a folder. Click the Explorer<\/strong> navigation button (see Red Box<\/span> in the image below) and click Open Folder<\/strong> (see Green Box<\/span> in the image below)
        \n\"\"\n<\/li>\n
      2. \nThe open folder search box will automatically start in the home directory (\/home\/student<\/code>) of the student account, so simply click OK<\/strong> (see Red Box<\/span> in the image below) unless you want to open a specific sub-folder.
        \n\"\"\n<\/li>\n
      3. \nYou will again be asked to enter the password for the student account (see Red Box<\/span> in the image below)
        \n\"\"\n<\/li>\n
      4. \nA window will pop up asking if you trust the authors of files in this folder. If a check box is shown to trust all files in the folder ‘student’, check it (see Red Box<\/span> in the image below), although this may not appear in all cases. Click Yes, I trust the authors<\/strong> (see Green Box<\/span> in the image below)
        \n\"\"\n<\/li>\n
      5. \nThe Explorer view<\/strong> will now show all of the files and folders in the student account home directory (see Red Box<\/span> in the image below).
        \nNOTE:<\/strong> The exact content of the directory will vary depending on which course image you are connecting<\/em>
        \n\"\"\n<\/li>\n<\/ol>\n

        Step 5: Open a terminal, edit some code, run some code!<\/h3>\n
          \n
        1. \nIt can be convenient to open a terminal window so we can run commands just like we would if we had ssh’d into the system. You can open a terminal window in many ways. Here are three easy ones:<\/p>\n