{"id":17354,"date":"2024-11-12T14:27:44","date_gmt":"2024-11-12T19:27:44","guid":{"rendered":"https:\/\/carleton.ca\/scs\/?p=17354"},"modified":"2026-06-23T17:08:22","modified_gmt":"2026-06-23T21:08:22","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":"\n<section class=\"w-screen px-6 cu-section cu-section--white ml-offset-center md:px-8 lg:px-14\">\n    <div class=\"space-y-6 cu-max-w-child-5xl  md:space-y-10 cu-prose-first-last\">\n\n            <div class=\"cu-textmedia flex flex-col lg:flex-row mx-auto gap-6 md:gap-10 my-6 md:my-12 first:mt-0 max-w-5xl\">\n        <div class=\"justify-start cu-textmedia-content cu-prose-first-last\" style=\"flex: 0 0 100%;\">\n            <header class=\"font-light prose-xl cu-pageheader md:prose-2xl cu-component-updated cu-prose-first-last\">\n                                    <h1 class=\"cu-prose-first-last font-semibold !mt-2 mb-4 md:mb-6 relative after:absolute after:h-px after:bottom-0 after:bg-cu-red after:left-px text-3xl md:text-4xl lg:text-5xl lg:leading-[3.5rem] pb-5 after:w-10 text-cu-black-700 not-prose\">\n                        vscode: Remote Access and Code Editing\n                    <\/h1>\n                \n                                \n                            <\/header>\n\n                    <\/div>\n\n            <\/div>\n\n    <\/div>\n<\/section>\n\n\n\n\n<div class=\"w-full max-w-xl mx-auto overflow-hidden bg-white rounded-lg shadow-lg cu-stackedlist cu-component not-contained not-prose\">\n    <h2 class=\"px-6 py-4 text-base font-semibold border-b rounded-t-lg md:text-xl bg-gray-50 text-cu-black-800\">\n        Table of Contents\n    <\/h2>\n    <div class=\"grid cu-scrollto cu-stackedlist--toc cu-stackedlist--1 md:grid-cols-1\">\n            <div class=\"space-y-1\">\n                    \n            <div class=\"pl-4 text-cu-red-700\">\n                <div class=\"flex gap-2 pb-3 text-base md:text-lg\">\n                    <span class=\"font-light text-cu-black-700\">\n                        1.\n                    <\/span>\n\n                    <a href=\"#install-vscode\" class=\"font-medium hover:underline\">\n                        Step 1: Install vscode\n                    <\/a>\n                <\/div>\n\n                            <\/div>\n                    \n            <div class=\"pl-4 text-cu-red-700\">\n                <div class=\"flex gap-2 pb-3 text-base md:text-lg\">\n                    <span class=\"font-light text-cu-black-700\">\n                        2.\n                    <\/span>\n\n                    <a href=\"#install-remote-ssh\" class=\"font-medium hover:underline\">\n                        Step 2: Install Remote-SSH Extension\n                    <\/a>\n                <\/div>\n\n                            <\/div>\n                    \n            <div class=\"pl-4 text-cu-red-700\">\n                <div class=\"flex gap-2 pb-3 text-base md:text-lg\">\n                    <span class=\"font-light text-cu-black-700\">\n                        3.\n                    <\/span>\n\n                    <a href=\"#step-3-create-remote-ssh-connection\" class=\"font-medium hover:underline\">\n                        Step 3: Create Remote-SSH Connection\n                    <\/a>\n                <\/div>\n\n                            <\/div>\n                    \n            <div class=\"pl-4 text-cu-red-700\">\n                <div class=\"flex gap-2 pb-3 text-base md:text-lg\">\n                    <span class=\"font-light text-cu-black-700\">\n                        4.\n                    <\/span>\n\n                    <a href=\"#step-4-open-folder-on-remote-server\" class=\"font-medium hover:underline\">\n                        Step 4: Open Folder on Remote Server\n                    <\/a>\n                <\/div>\n\n                            <\/div>\n                    \n            <div class=\"pl-4 text-cu-red-700\">\n                <div class=\"flex gap-2 pb-3 text-base md:text-lg\">\n                    <span class=\"font-light text-cu-black-700\">\n                        5.\n                    <\/span>\n\n                    <a href=\"#use-vscode-remote\" class=\"font-medium hover:underline\">\n                        Step 5: Open a terminal, edit some code, run some code!\n                    <\/a>\n                <\/div>\n\n                            <\/div>\n                    \n            <div class=\"pl-4 text-cu-red-700\">\n                <div class=\"flex gap-2 pb-3 text-base md:text-lg\">\n                    <span class=\"font-light text-cu-black-700\">\n                        6.\n                    <\/span>\n\n                    <a href=\"#troubleshooting-vscode-failed-login\" class=\"font-medium hover:underline\">\n                        Troubleshooting: Failed Login\n                    <\/a>\n                <\/div>\n\n                            <\/div>\n                    \n            <div class=\"pl-4 text-cu-red-700\">\n                <div class=\"flex gap-2 pb-3 text-base md:text-lg\">\n                    <span class=\"font-light text-cu-black-700\">\n                        7.\n                    <\/span>\n\n                    <a href=\"#troubleshooting-vscode-disk-full\" class=\"font-medium hover:underline\">\n                        Troubleshooting: Disk Full\n                    <\/a>\n                <\/div>\n\n                            <\/div>\n            <\/div>\n\n    <\/div>\n<\/div>\n\n\n\n<section class=\"w-screen px-6 cu-section cu-section--white ml-offset-center md:px-8 lg:px-14\">\n    <div class=\"space-y-6 cu-max-w-child-5xl  md:space-y-10 cu-prose-first-last\">\n\n        \n    \n    <dl class=\"cu-description cu-component-updated\">\n        \n    <div class=\"grid pt-4 pb-3 border-b accordion border-cu-black-100 md:pt-6 md:pb-5 first:border-t\">\n        <dt class=\"font-semibold not-prose\">\n            <button class=\"flex items-center justify-between w-full text-left accordion__button\" aria-expanded=\"false\" aria-controls=\"accordion-login-credentials-and-first-login\">\n                <span class=\"flex-1 ml-auto text-left break-words whitespace-normal cu-icon\">\n                    Login Credentials and First Login\n                <\/span>\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewbox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\" class=\"w-5 h-5 ml-auto transition-transform rotate-0 accordion__icon text-cu-black-500\">\n                    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M8.25 4.5l7.5 7.5-7.5 7.5\"><\/path>\n                <\/svg>\n            <\/button>\n        <\/dt>\n        <dd class=\"p-0 mt-0 cu-prose cu-prose-first-last accordion__content md:p-0 md:mt-0\" hidden=\"\" id=\"accordion-login-credentials-and-first-login\">\n            \n\n<p><br><strong>Login Credentials:<\/strong>&nbsp;<em>Most<\/em>&nbsp;of our OpenStack images share the same default credentials:<br><strong>username:&nbsp;<em>student<\/em><\/strong><br><strong>password:&nbsp;<em>student<\/em><\/strong><\/p>\n\n\n\n<p><strong>IMPORTANT:<\/strong>&nbsp;New images since (<strong>2022\/2023<\/strong>)&nbsp;<strong>force a password change<\/strong>&nbsp;on the first login.<br><strong>First Login Scenarios:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>TurboVNC WARNING:<\/strong>&nbsp;TurboVNC does&nbsp;<strong>NOT<\/strong>&nbsp;support first login password changes, so your first login must use another login tool below<\/li>\n\n\n\n<li><strong>vscode WARNING:<\/strong>&nbsp;vscode does&nbsp;<strong>NOT<\/strong>&nbsp;support first login password changes, so your first login must use another login tool below<\/li>\n\n\n\n<li><strong>ssh terminal (putty, etc)<\/strong>&nbsp;first login: When you login, you will be redirect to a change password prompt. You will then have to enter the current password (student) again, and then enter your new password twice. When you change your password, it will then log you out and you have to login again with that new password<\/li>\n\n\n\n<li><strong>x2go<\/strong>&nbsp;first login: When you login, you will be redirect to a change password prompt. You will then have to enter the current password (student) again, and then enter your new password twice. When you change your password, it will then prompt you to&nbsp;<em>click reconnect<\/em>, at which point you can login again using the new password<\/li>\n\n\n\n<li><strong>openstack web console<\/strong>&nbsp;first login: When you login, you will be redirect to a change password prompt. You will then have to enter the current password (student) again, and then enter your new password twice. In this case, you stay connected. The next time you login, you will need the new password<\/li>\n<\/ul>\n\n\n\n<p><strong>WARNING:<\/strong>&nbsp;If you are using an older image (pre-2022) that does not enforce an ssh key or a password change, then we strongly encourage you to immediately change your password or setup an ssh key!<\/p>\n\n\n        <\/dd>\n    <\/div>\n\n\n    <\/dl>\n\n\n    <\/div>\n<\/section>\n\n\n\n<section class=\"w-screen px-6 cu-section cu-section--white ml-offset-center md:px-8 lg:px-14\">\n    <div class=\"space-y-6 cu-max-w-child-5xl  md:space-y-10 cu-prose-first-last\">\n\n        \n    \n    <dl class=\"cu-description cu-component-updated\">\n        \n    <div class=\"grid pt-4 pb-3 border-b accordion border-cu-black-100 md:pt-6 md:pb-5 first:border-t\">\n        <dt class=\"font-semibold not-prose\">\n            <button class=\"flex items-center justify-between w-full text-left accordion__button\" aria-expanded=\"false\" aria-controls=\"accordion-what-is-my-openstack-floating-ip-address\">\n                <span class=\"flex-1 ml-auto text-left break-words whitespace-normal cu-icon\">\n                    What is my OpenStack Floating IP Address\n                <\/span>\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewbox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\" class=\"w-5 h-5 ml-auto transition-transform rotate-0 accordion__icon text-cu-black-500\">\n                    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M8.25 4.5l7.5 7.5-7.5 7.5\"><\/path>\n                <\/svg>\n            <\/button>\n        <\/dt>\n        <dd class=\"p-0 mt-0 cu-prose cu-prose-first-last accordion__content md:p-0 md:mt-0\" hidden=\"\" id=\"accordion-what-is-my-openstack-floating-ip-address\">\n            \n\n<p>Your <strong>public floating IP address<\/strong> of your instance will have the form: <strong>134.117.xxx.xxx<\/strong> &#8211; If you don&#8217;t see the <strong>134.117<\/strong> part, then you haven&#8217;t set up a floating IP address! This IP address is assigned when you run the <strong>Associate Floating IP Address<\/strong> command for your instance (via the OpenStack dashboard) <a href=\"#openstack-associate-floating-ip\"><em>Associate Floating IP with an Instance above<\/em><\/a>.<\/p>\n\n\n        <\/dd>\n    <\/div>\n\n\n    <\/dl>\n\n\n    <\/div>\n<\/section>\n\n\n\n<figure class=\"wp-block-image alignright\"><img loading=\"lazy\" decoding=\"async\" width=\"160\" height=\"160\" src=\"https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-1-160x160.png\" alt=\"\" class=\"wp-image-17357\" srcset=\"https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-1-160x160.png 160w, https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-1-240x240.png 240w, https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-1-768x768.png 768w, https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-1-400x400.png 400w, https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-1-200x200.png 200w, https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-1-360x360.png 360w, https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-1.png 1024w\" sizes=\"auto, (max-width: 160px) 100vw, 160px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>In addition to these instructions, you can find a video tutorial here: <a href=\"https:\/\/youtu.be\/G-nnmjrsM2A\">Video: vscode: Remote Access and Code Editing<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"install-vscode\">Step 1: Install vscode<\/h2>\n\n\n\n<p>The first thing you need to do is install vscode on your local device (person computer). We won&#8217;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.<br>The <strong>vscode<\/strong> download for various platforms can be found here: <a href=\"https:\/\/code.visualstudio.com\/download\">vscode download<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"install-remote-ssh\">Step 2: Install Remote-SSH Extension<\/h2>\n\n\n\n<p>vscode cannot make remote connections initially.  The <strong>Remote-SSH<\/strong> extension is required<\/p>\n\n\n\n<p><strong>Open vscode<\/strong> and click on the <strong>Extensions<\/strong> panel button (see <span style=\"color:red;font-weight:bold;\">Red Box<\/span> in the image below)<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"932\" height=\"608\" src=\"https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/2024\/11\/vscode-open-extensions.png\" alt=\"\" class=\"wp-image-25007\" style=\"width:712px;height:auto\" srcset=\"https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/2024\/11\/vscode-open-extensions.png 932w, https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/2024\/11\/vscode-open-extensions-512x334.png 512w, https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/2024\/11\/vscode-open-extensions-320x209.png 320w, https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/2024\/11\/vscode-open-extensions-768x501.png 768w\" sizes=\"auto, (max-width: 932px) 100vw, 932px\" \/><\/figure>\n\n\n\n<p>Click on the <em>extension search bar<\/em> (see <span style=\"color:red;font-weight:bold;\">Red Box<\/span> in the image below) and start typing <code>remote ssh<\/code>.<\/p>\n\n\n\n<p>The <strong>Remote &#8211; SSH<\/strong> extension should appear (see <span style=\"color:#12921d;font-weight:bold;\">Green Box<\/span> in the image below).<\/p>\n\n\n\n<p>Click on the <strong>Install<\/strong> button (see <span style=\"color:#6c0efd;font-weight:bold;\">Purple Box<\/span> in the image below).<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"776\" height=\"394\" src=\"https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/2024\/11\/vscode-open-extensions-remote-ssh.png\" alt=\"\" class=\"wp-image-25008\" style=\"aspect-ratio:1.969574124929166;width:703px;height:auto\" srcset=\"https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/2024\/11\/vscode-open-extensions-remote-ssh.png 776w, https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/2024\/11\/vscode-open-extensions-remote-ssh-512x260.png 512w, https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/2024\/11\/vscode-open-extensions-remote-ssh-320x162.png 320w, https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/2024\/11\/vscode-open-extensions-remote-ssh-768x390.png 768w\" sizes=\"auto, (max-width: 776px) 100vw, 776px\" \/><\/figure>\n\n\n\n<h2 id=\"step-3-create-remote-ssh-connection\" class=\"wp-block-heading\">Step 3: Create Remote-SSH Connection<\/h2>\n\n\n\n<p>A new panel button called <strong>Remote Explorer<\/strong> should appear &#8211; <em>you may have to close and reopen vscode<\/em> (see <span style=\"color:red;font-weight:bold;\">Red Box<\/span> in the image below). Click on the <strong>Remote Explorer<\/strong> button.<\/p>\n\n\n\n<p>Expand the tree down until you see the <strong>SSH<\/strong> branch (see <span style=\"color:#12921d;font-weight:bold;\">Green Box<\/span> in the image below).<\/p>\n\n\n\n<p>Click on the <strong>plus (+)<\/strong> button to begin adding a new SSH connection (see <span style=\"color:#6c0efd;font-weight:bold;\">Purple Box<\/span> in the image below).<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"243\" src=\"https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-open-remote-explorer-400x243.png\" alt=\"\" class=\"wp-image-17367\" style=\"aspect-ratio:1.6461572340894077;width:708px;height:auto\" srcset=\"https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-open-remote-explorer-400x243.png 400w, https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-open-remote-explorer-160x97.png 160w, https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-open-remote-explorer-240x146.png 240w, https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-open-remote-explorer-768x466.png 768w, https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-open-remote-explorer-360x219.png 360w, https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-open-remote-explorer.png 782w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/figure>\n\n\n\n<p>In the <strong>SSH Connection<\/strong> box that opens (see <span style=\"color:red;font-weight:bold;\">Red Box<\/span> in the image below)<br>Enter <code>ssh student@134.117.130.199<\/code> &#8211; <em>replacing the IP with you own <strong>134.117.#.#<\/strong> IP address<\/em><\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"72\" src=\"https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-add-ssh-connection-400x72.png\" alt=\"\" class=\"wp-image-17440\" style=\"aspect-ratio:5.555732303147369;width:682px;height:auto\" srcset=\"https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-add-ssh-connection-400x72.png 400w, https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-add-ssh-connection-160x29.png 160w, https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-add-ssh-connection-240x43.png 240w, https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-add-ssh-connection-768x138.png 768w, https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-add-ssh-connection-360x65.png 360w, https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-add-ssh-connection.png 1006w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/figure>\n\n\n\n<p>It will ask you to save the connection information to an <em>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 <span style=\"color:red;font-weight:bold;\">Red Box<\/span> in the image below)<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"85\" src=\"https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-add-ssh-connection-2-400x85.png\" alt=\"\" class=\"wp-image-17441\" style=\"aspect-ratio:4.706151645207439;width:680px;height:auto\" srcset=\"https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-add-ssh-connection-2-400x85.png 400w, https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-add-ssh-connection-2-160x34.png 160w, https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-add-ssh-connection-2-240x51.png 240w, https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-add-ssh-connection-2-768x164.png 768w, https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-add-ssh-connection-2-360x77.png 360w, https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-add-ssh-connection-2.png 970w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/figure>\n\n\n\n<p>A pop-up will appear saying the host was added. If you want, you can manually modify the ssh config file by clicking <strong>Open Config<\/strong>. However, this is not required, and in this case we will just click <strong>Connect<\/strong> (see <span style=\"color:red;font-weight:bold;\">Red Box<\/span> in the image below)<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"96\" src=\"https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-add-ssh-connection-3-400x96.png\" alt=\"\" class=\"wp-image-17442\" style=\"width:564px;height:auto\" srcset=\"https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-add-ssh-connection-3-400x96.png 400w, https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-add-ssh-connection-3-160x39.png 160w, https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-add-ssh-connection-3-240x58.png 240w, https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-add-ssh-connection-3-360x87.png 360w, https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-add-ssh-connection-3.png 672w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/figure>\n\n\n\n<p>You will then be prompted for the password for the <strong>student<\/strong> account (see <span style=\"color:red;font-weight:bold;\">Red Box<\/span> in the image below).<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"56\" src=\"https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-add-ssh-connection-4-400x56.png\" alt=\"\" class=\"wp-image-17443\" style=\"width:566px;height:auto\" srcset=\"https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-add-ssh-connection-4-400x56.png 400w, https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-add-ssh-connection-4-160x22.png 160w, https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-add-ssh-connection-4-240x34.png 240w, https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-add-ssh-connection-4-768x108.png 768w, https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-add-ssh-connection-4-360x50.png 360w, https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-add-ssh-connection-4.png 863w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/figure>\n\n\n\n<p>It will then show a pop-up on the bottom right showing the <strong>vscode-server<\/strong> being added to the remote account.  This make take a few moments to complete.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"50\" src=\"https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-initializing-vscode-server-400x50.png\" alt=\"\" class=\"wp-image-17445\" style=\"width:567px;height:auto\" srcset=\"https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-initializing-vscode-server-400x50.png 400w, https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-initializing-vscode-server-160x20.png 160w, https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-initializing-vscode-server-240x30.png 240w, https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-initializing-vscode-server-360x45.png 360w, https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-initializing-vscode-server.png 666w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/figure>\n\n\n\n<p>And that should complete adding the connection. A new empty vscode workspace should open that is connected to that remote server.<\/p>\n\n\n\n<h2 id=\"step-4-open-folder-on-remote-server\" class=\"wp-block-heading\">Step 4: Open Folder on Remote Server<\/h2>\n\n\n\n<p>Now that the vscode workspace is connected to the remote server, we need to open a folder. Click the <strong>Explorer<\/strong> navigation button (see <span style=\"color:red;font-weight:bold;\">Red Box<\/span> in the image below) and click <strong>Open Folder<\/strong> (see <span style=\"color:#12921d;font-weight:bold;\">Green Box<\/span> in the image below)<br><\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"137\" src=\"https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-open-folder-400x137.png\" alt=\"\" class=\"wp-image-17446\" style=\"width:592px;height:auto\" srcset=\"https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-open-folder-400x137.png 400w, https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-open-folder-160x55.png 160w, https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-open-folder-240x82.png 240w, https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-open-folder-768x262.png 768w, https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-open-folder-360x123.png 360w, https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-open-folder.png 832w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/figure>\n\n\n\n<p>The open folder search box will automatically start in the home directory (<code>\/home\/student<\/code>) of the student account, so simply click <strong>OK<\/strong> (see <span style=\"color:red;font-weight:bold;\">Red Box<\/span> in the image below) unless you want to open a specific sub-folder.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"91\" src=\"https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-open-folder-2-400x91.png\" alt=\"\" class=\"wp-image-17447\" style=\"width:590px;height:auto\" srcset=\"https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-open-folder-2-400x91.png 400w, https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-open-folder-2-160x36.png 160w, https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-open-folder-2-240x55.png 240w, https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-open-folder-2-768x175.png 768w, https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-open-folder-2-360x82.png 360w, https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-open-folder-2.png 848w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/figure>\n\n\n\n<p>You will again be asked to enter the password for the student account (see <span style=\"color:red;font-weight:bold;\">Red Box<\/span> in the image below)<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"48\" src=\"https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-open-folder-4-400x48.png\" alt=\"\" class=\"wp-image-17448\" style=\"width:592px;height:auto\" srcset=\"https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-open-folder-4-400x48.png 400w, https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-open-folder-4-160x19.png 160w, https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-open-folder-4-240x29.png 240w, https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-open-folder-4-768x92.png 768w, https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-open-folder-4-360x43.png 360w, https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-open-folder-4.png 840w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/figure>\n\n\n\n<p>A 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 &#8216;student&#8217;, check it (see <span style=\"color:red;font-weight:bold;\">Red Box<\/span> in the image below), although this may not appear in all cases. Click <strong>Yes, I trust the authors<\/strong> (see <span style=\"color:#12921d;font-weight:bold;\">Green Box<\/span> in the image below)<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"311\" src=\"https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-open-folder-5-400x311.png\" alt=\"\" class=\"wp-image-17449\" style=\"aspect-ratio:1.286201719666985;width:521px;height:auto\" srcset=\"https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-open-folder-5-400x311.png 400w, https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-open-folder-5-160x124.png 160w, https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-open-folder-5-240x186.png 240w, https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-open-folder-5-360x280.png 360w, https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-open-folder-5.png 740w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/figure>\n\n\n\n<p>The <strong>Explorer view<\/strong> will now show all of the files and folders in the student account home directory (see <span style=\"color:red;font-weight:bold;\">Red Box<\/span> in the image below).<br><em><strong>NOTE:<\/strong> The exact content of the directory will vary depending on which course image you are connecting<\/em><\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"605\" src=\"https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-open-folder-6-400x605.png\" alt=\"\" class=\"wp-image-17450\" style=\"width:397px;height:auto\" srcset=\"https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-open-folder-6-400x605.png 400w, https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-open-folder-6-160x242.png 160w, https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-open-folder-6-240x363.png 240w, https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-open-folder-6-360x544.png 360w, https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-open-folder-6.png 580w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"use-vscode-remote\">Step 5: Open a terminal, edit some code, run some code!<\/h2>\n\n\n\n<p>It can be convenient to open a terminal window so we can run commands just like we would if we had ssh&#8217;d into the system. You can open a terminal window in many ways. Here are three easy ones:<ul style=\"margin-top:0px;\"><li>With the <strong>Ctrl + `<\/strong> (Ctrl + backtick) hot key<\/li><\/ul><\/p>\n\n\n\n<p><ul style=\"margin-top:0px;\"><li>By right-clicking on any file or folder in the student home directory and clicking <strong>Open in Integrated Terminal<\/strong><\/li><\/ul><\/p>\n\n\n\n<p><ul style=\"margin-top:0px;\"><li>By clicking on any file or folder in the student home directory, and going to the <strong>View<\/strong> menu and click <strong>Terminal<\/strong><\/li><\/ul><\/p>\n\n\n\n<p>Either of these actions will open a terminal, as seen in the\u00a0<strong>Red Box<\/strong>\u00a0in the image below<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"246\" src=\"https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-ctrl-backtick-terminal-400x246.png\" alt=\"\" class=\"wp-image-17444\" style=\"width:572px;height:auto\" srcset=\"https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-ctrl-backtick-terminal-400x246.png 400w, https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-ctrl-backtick-terminal-160x98.png 160w, https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-ctrl-backtick-terminal-240x147.png 240w, https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-ctrl-backtick-terminal-768x472.png 768w, https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-ctrl-backtick-terminal-360x221.png 360w, https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-ctrl-backtick-terminal.png 1017w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/figure>\n\n\n\n<p>Next, we can&nbsp;<strong>open a file to edit with vscode<\/strong>. In the example below, we have a folder called&nbsp;<strong>assignment-code<\/strong>, with a python file called&nbsp;<strong>hello-world.py<\/strong>&nbsp;(see&nbsp;<strong><span style=\"color:red;font-weight:bold;\">Red Box<\/span><\/strong>&nbsp;in the image below). If you click on the&nbsp;<strong>hello-world.py<\/strong>&nbsp;file, it will open the file in the workspace so you can edit it (see&nbsp;<span style=\"color:#12921d;font-weight:bold;\"><strong>Green Box<\/strong><\/span>&nbsp;in the image below).<br><em><strong>NOTE:&nbsp;<\/strong>If this is the first time you have edited a python file, vscode may helpfully offer to install a python extension to help with you python coding (see&nbsp;<strong><span style=\"color:#6c0efd;font-weight:bold;\">Purple Box<\/span><\/strong>&nbsp;in the image below). It will often do this for any programming language that you open for the first time. It is up to you to decide if you want this extension. In some cases, your instructor may ask that you install specific extensions with certainly capabilities. So make sure to check your course notes.<\/em><\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"267\" src=\"https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-open-hello-world-400x267.png\" alt=\"\" class=\"wp-image-17451\" style=\"width:579px;height:auto\" srcset=\"https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-open-hello-world-400x267.png 400w, https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-open-hello-world-600x400.png 600w, https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-open-hello-world-300x200.png 300w, https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-open-hello-world-160x107.png 160w, https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-open-hello-world-240x160.png 240w, https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-open-hello-world-768x512.png 768w, https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-open-hello-world-360x240.png 360w, https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-open-hello-world.png 1084w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/figure>\n\n\n\n<p>We can use the terminal window to conveniently run commands. In this example, we manually run the python program <strong>hello-world.py<\/strong>.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>First we&nbsp;<strong>cd assignment-code<\/strong>&nbsp;to get into the assignment directory (see&nbsp;<strong><span style=\"color:red;font-weight:bold;\">Red Box<\/span><\/strong>&nbsp;in the image below)<\/li>\n\n\n\n<li>Then we enter&nbsp;<strong>ls<\/strong>&nbsp;to list the files and make sure we see the&nbsp;<strong>hello-world.py<\/strong>&nbsp;file (see&nbsp;<strong><span style=\"color:#12921d;font-weight:bold;\">Green Box<\/span><\/strong>&nbsp;in the image below)<\/li>\n\n\n\n<li>Then we run the python file with&nbsp;<strong>python3 hello-world.py<\/strong>&nbsp;and we see the output (it prints&nbsp;<strong><em>Hello, world!\u201d<\/em><\/strong>) (see&nbsp;<strong><span style=\"color:#6c0efd;font-weight:bold;\">Purple Box<\/span><\/strong>&nbsp;in the image below)<br><em><strong>NOTE:&nbsp;<\/strong>The commands you run to execute code will vary, this is just one example of a possible way of running a python file<\/em><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"282\" src=\"https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-open-hello-world-2-400x282.png\" alt=\"\" class=\"wp-image-17452\" style=\"aspect-ratio:1.418487914124643;width:701px;height:auto\" srcset=\"https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-open-hello-world-2-400x282.png 400w, https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-open-hello-world-2-160x113.png 160w, https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-open-hello-world-2-240x169.png 240w, https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-open-hello-world-2-768x542.png 768w, https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-open-hello-world-2-360x254.png 360w, https:\/\/carleton.ca\/scs\/wp-content\/uploads\/sites\/260\/vscode-open-hello-world-2.png 1112w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"troubleshooting-vscode-failed-login\">Troubleshooting: Failed Login<\/h2>\n\n\n\n<p><strong>vscode<\/strong> failed logins are most often caused by two things:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>New Openstack Instance with Expired Password:<\/strong> New openstack instances have a default username and password, and the password is expired and must be changed.  This cannot be done through the vscode remote connection interface, so you must use a different <a href=\"https:\/\/carleton.ca\/scs\/tech-support\/scs-open-stack\/openstack-technical-support\/openstack-step-by-step-guide\/#openstack-connect-to-instance\">Connection Tool<\/a> to connect to your instance for the first time.  Once you have set a new password, you can use vscode normally.<\/li>\n\n\n\n<li><strong>Instance Disk Full:<\/strong> If an instance&#8217;s disk drive fills up, it will not be possible to login with vscode as the tool needs to setup temporary files to initialize. The indicator of this problem is (usually): when you enter the password, vscode will hang, sometimes showing an <em>installing vscode server<\/em> message that never goes away. If you see that behavior, it is likely that the disk is full. You must login with another <a href=\"https:\/\/carleton.ca\/scs\/tech-support\/scs-open-stack\/openstack-technical-support\/openstack-step-by-step-guide\/#openstack-connect-to-instance\">Connection Tool<\/a>, free up some disk space, and then return to using vscode.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"troubleshooting-vscode-disk-full\">Troubleshooting: Disk Full<\/h2>\n\n\n\n<p><strong>vscode<\/strong> installs a lot of libraries and support tools to make you coding easier.  It also stores a cache of all the original downloaded installers, which it keeps even after the tool has been successfully added to vscode.  It is quite common for all of this to quickly fill an openstack instance&#8217;s disk drive.  Check with your course instructor for instructions on how to clear the vscode cache as it can vary.<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In addition to these instructions, you can find a video tutorial here: Video: vscode: Remote Access and Code Editing Step 1: Install vscode The first thing you need to do is install vscode on your local device (person computer). We won&#8217;t go into the details of installing it here as it varies depending on your [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":17356,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":"","_links_to":"","_links_to_target":""},"categories":[58,99,65,57,59],"tags":[107,106,105,104,103],"class_list":["post-17354","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-openstack-support","category-ssh","category-tech-tips","category-technicalsupport","category-virtualmachines-support","tag-openstack","tag-ssh","tag-visual-studio","tag-visualstudio","tag-vscode"],"acf":{"cu_post_thumbnail":""},"_links":{"self":[{"href":"https:\/\/carleton.ca\/scs\/wp-json\/wp\/v2\/posts\/17354","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/carleton.ca\/scs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/carleton.ca\/scs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/carleton.ca\/scs\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/carleton.ca\/scs\/wp-json\/wp\/v2\/comments?post=17354"}],"version-history":[{"count":5,"href":"https:\/\/carleton.ca\/scs\/wp-json\/wp\/v2\/posts\/17354\/revisions"}],"predecessor-version":[{"id":25179,"href":"https:\/\/carleton.ca\/scs\/wp-json\/wp\/v2\/posts\/17354\/revisions\/25179"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/carleton.ca\/scs\/wp-json\/wp\/v2\/media\/17356"}],"wp:attachment":[{"href":"https:\/\/carleton.ca\/scs\/wp-json\/wp\/v2\/media?parent=17354"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/carleton.ca\/scs\/wp-json\/wp\/v2\/categories?post=17354"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/carleton.ca\/scs\/wp-json\/wp\/v2\/tags?post=17354"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}