{"id":321577,"date":"2021-08-11T15:00:20","date_gmt":"2021-08-11T12:00:20","guid":{"rendered":"https:\/\/en.buradabiliyorum.com\/how-to-develop-on-a-remote-ssh-server-with-visual-studio-code-cloudsavvy-it\/"},"modified":"2021-08-11T15:00:20","modified_gmt":"2021-08-11T12:00:20","slug":"how-to-develop-on-a-remote-ssh-server-with-visual-studio-code-cloudsavvy-it","status":"publish","type":"post","link":"https:\/\/buradabiliyorum.com\/en\/how-to-develop-on-a-remote-ssh-server-with-visual-studio-code-cloudsavvy-it\/","title":{"rendered":"#How to Develop on a Remote SSH Server With Visual Studio Code \u2013 CloudSavvy IT"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6a3fd1bb9bbd5\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #dd3333;color:#dd3333\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #dd3333;color:#dd3333\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6a3fd1bb9bbd5\" checked aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-develop-on-a-remote-ssh-server-with-visual-studio-code-cloudsavvy-it\/#Getting_Started\" >Getting Started<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-develop-on-a-remote-ssh-server-with-visual-studio-code-cloudsavvy-it\/#Using_Remote_Connections\" >Using Remote Connections<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-develop-on-a-remote-ssh-server-with-visual-studio-code-cloudsavvy-it\/#How_Does_It_Work\" >How Does It Work?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-develop-on-a-remote-ssh-server-with-visual-studio-code-cloudsavvy-it\/#Configuring_the_Extension\" >Configuring the Extension<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-develop-on-a-remote-ssh-server-with-visual-studio-code-cloudsavvy-it\/#Summary\" >Summary<\/a><\/li><\/ul><\/nav><\/div>\n<p><strong>&#8220;#How to Develop on a Remote SSH Server With Visual Studio Code \u2013 CloudSavvy IT&#8221;<\/strong><\/p>\n<div id=\"article-content-area\">\n<img loading=\"lazy\" decoding=\"async\" class=\"type:primaryImage aligncenter size-full wp-image-12163\" srcset=\"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2021\/06\/74e5b6c0.jpg?width=398&amp;trim=1,1&amp;bg-color=000&amp;pad=1,1 400w, https:\/\/www.cloudsavvyit.com\/p\/uploads\/2021\/06\/74e5b6c0.jpg?width=1198&amp;trim=1,1&amp;bg-color=000&amp;pad=1,1 1200w\" sizes=\"auto, 400w, 1200w\" src=\"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2021\/06\/74e5b6c0.jpg?width=1198&amp;trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"Graphic showing the Visual Studio Code icon\" width=\"1602\" height=\"902\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>Editing files stored on a remote server doesn\u2019t need to be a clunky mess of shell commands and basic text editors. Visual Studio Code is one of the most popular developer IDEs and an officially supported extension lets you add SSH connections to your workspace.<\/p>\n<p>The Remote \u2013 SSH extension can connect to network servers, list their directory structure, and open and edit files. Almost all Visual Studio Code features are available including IntelliSense code completion, built-in debugging, and third-party extensions.<\/p>\n<h2 id=\"getting-started\"><span class=\"ez-toc-section\" id=\"Getting_Started\"><\/span>Getting Started<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Begin by adding the Remote \u2013 SSH extension to your editor. Press Ctrl+Shift+P to open the command palette and type \u201cinstall\u201d. The extensions sidebar will <a href=\"https:\/\/buradabiliyorum.com\/en\/category\/download-scripts-themes-apps\/\" data-internallinksmanager029f6b8e52c=\"9\" title=\"Download Scripts &amp; Themes &amp; Apps\" target=\"_blank\" rel=\"noopener\">app<\/a>ear on the left. Search for \u201cremote \u2013 ssh\u201d and install the matching extension. It\u2019s published and supported by Microsoft.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-13455\" src=\"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2021\/08\/e94f79f2.png?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"\" width=\"902\" height=\"267\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>Now you need to connect to your SSH server. The extension works with hosts running Ubuntu, Debian, CentOS, RHEL, and Raspbian. Windows servers are supported too, provided Microsoft\u2019s official OpenSSH server is used. macOS hosts need to have the operating system\u2019s Remote Login feature enabled.<\/p>\n<p>Before continuing, make sure you\u2019ve <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.howtogeek.com\/168147\/add-public-ssh-key-to-remote-server-in-a-single-command\">copied your local<\/a> SSH public key over to your server\u2019s <code>authorized_keys<\/code> file. VS Code doesn\u2019t fully support password-based authentication; although it will work, you\u2019ll need to re-enter your password each time a command is run.<\/p>\n<p>Press Ctrl+Shift+P to display the Command Palette. Search for \u201cremote explorer\u201d and run the \u201cView: Show Remote Explorer\u201d command to bring up the remote side panel. Select \u201cSSH Targets\u201d from the dropdown at the top if it\u2019s not already selected.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-13456\" src=\"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2021\/08\/790a00a1.png?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"\" width=\"385\" height=\"202\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>Hover over the \u201cSSH Targets\u201d heading in the side panel. Click the plus button to create a new connection. A popup will appear letting you input your server\u2019s details. This should be a complete SSH connection command with the <code>-A<\/code> flag to enable agent forwarding. This lets you use your local keys when running subsequent SSH commands on the server.<\/p>\n<pre><code>ssh user@example.com -A<\/code><\/pre>\n<p>You\u2019ll be prompted to choose an SSH configuration file to write to. You can choose from your default user file, the system settings file, or a custom location. Selecting the default in your home directory is usually the best option if you\u2019re unsure.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-13457\" src=\"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2021\/08\/fb7edbbf.png?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"\" width=\"339\" height=\"153\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>Your new host will be added to the Remote Explorer sidebar. Click the folder icon next to its name to open a connection in a new Visual Studio Code window. First run setup may take a few moments while Visual Studio configures the remote host and enables its server component.<\/p>\n<h2 id=\"using-remote-connections\"><span class=\"ez-toc-section\" id=\"Using_Remote_Connections\"><\/span>Using Remote Connections<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>After the setup completes, you\u2019ll find yourself in a regular Visual Studio Code window that runs operations against your selected host. Click the \u201cOpen Folder\u201d button in the top-left of the sidebar to find a directory on your server. You may be prompted to acknowledge a Workspace Trust prompt; if so, click \u201cyes\u201d to mark the directory as trusted and enable all editor features.<\/p>\n<p>Now you\u2019ll see the server-side directory show up in VS Code\u2019s regular Explorer pane. You can open files, view their contents, and edit them using the familiar workflow. If you\u2019re working in a Git repository, you can use the built-in source control features to stage and commit changes as usual.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-13458\" src=\"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2021\/08\/99b86d3f.png?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"\" width=\"758\" height=\"539\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>Directories with <code>.vscode<\/code> files enable features such as builds and debugging. VS Code can execute the contents of remote directories, giving you a complete development experience. Press F5 to start your app if a build system is defined. You can set breakpoints and step through your code in the same way as local projects.<\/p>\n<p>The VS Code Terminal panel at the bottom of your window will connect to the selected host too. You can use this to execute commands on your remote server.<\/p>\n<p>Once you\u2019ve opened a directory once, it will show up in the Remote Explorer sidebar in the future. Click its name below the SSH host to launch a new VS Code window straight to that remote directory.<\/p>\n<h2 id=\"how-does-it-work\"><span class=\"ez-toc-section\" id=\"How_Does_It_Work\"><\/span>How Does It Work?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The remote capabilities work by installing a VS Code server component onto your remote machine. This happens automatically the first time you connect. The server monitors the filesystem, applies changes, and launches processes requested by the editor.<\/p>\n<p>The server is necessary so VS Code has full filesystem access and the ability to execute code and run debugging on your host. You don\u2019t normally need to interact with the server process as its fully managed by your editor client. You can restart it from the command palette if you need to.<\/p>\n<p>Extensions in your <code>.vscode<\/code> file will be installed on the remote host too. This gives them the same no-compromises access to your files so most extensions will work without issues.<\/p>\n<p>When you\u2019re editing within VS Code, you get near-native performance with few overheads. Requests to read and write files are relayed from your VS Code editor window to the server process on the remote host. This interacts with the filesystem to supply requested data and enact any necessary changes.<\/p>\n<p>Unlike other remote-editing extensions, this one focuses on providing a full remote development experience, not just simple file editing. The inclusion of the server component is vital to this approach as the core editor features stay close to the code. They\u2019re decoupled from the editing window you see and interact with.<\/p>\n<h2 id=\"configuring-the-extension\"><span class=\"ez-toc-section\" id=\"Configuring_the_Extension\"><\/span>Configuring the Extension<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The extension has several settings you can access via the \u201cRemote-SSH: Settings\u201d command. At the top of the page, you can specify the path to a custom SSH configuration file and add a default connection timeout. This stops Visual Studio hanging for too long when a remote host goes unresponsive. Further down the page, the \u201cMax Reconnection Attempts\u201d setting lets you change Visual Studio\u2019s behavior when a connection fails.<\/p>\n<p>The \u201cDefault Extensions\u201d setting allows you to add VS Code extensions that will be installed on all remote SSH hosts. These extensions will be available universally, even if you\u2019ve not added them to your active project\u2019s <code>.vscode<\/code> file.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-13459\" src=\"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2021\/08\/35efb40f.png?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"\" width=\"988\" height=\"798\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>The following checkboxes control automatic agent forwarding. These correspond to default SSH client settings in your SSH configuration file.<\/p>\n<p>Further settings let you customize how VS Code exposes and connects to the remote server. You can choose to use a socket instead of a port, pool connections across open windows, and use a custom SSH binary path. These settings are environment-specific; each one\u2019s accompanied by a description of its intended use.<\/p>\n<h2 id=\"summary\"><span class=\"ez-toc-section\" id=\"Summary\"><\/span>Summary<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>VS Code\u2019s Remote SSH extension simplifies working with files on remote hosts. You get a first-class development experience without manually synchronizing files between machines.<\/p>\n<p>The workflow enhances the utility of remote development environments. You could configure your toolchain on a single server and let developers remote into it. VS Code is more reliable, performant, and powerful than traditional approaches such as mounting the remote file system locally or using remote access software like VNC.<\/p>\n<p>Besides SSH connections, VS Code also understands Docker containers, the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/code.visualstudio.com\/docs\/remote\/wsl\">Windows Subsystem for Linux<\/a>, and <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/code.visualstudio.com\/docs\/remote\/codespaces\">GitHub Codespaces<\/a>. You get all the features of the VS Code editor no matter where your code lives, giving you more flexibility when setting up a new environment.\n<\/div>\n<blockquote><p><strong><span style=\"color: #ff6600;\">If you liked the article, do not forget to share it with your friends. Follow us on\u00a0<span style=\"color: #ff0000;\"><a style=\"color: #ff0000;\" href=\"https:\/\/news.google.com\/publications\/CAAqBwgKMLG0nwswvr63Aw\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Google News<\/a><\/span>\u00a0too, click on the star and choose us from your favorites.<\/span><\/strong><\/p><\/blockquote>\n<blockquote>\n<p style=\"text-align: center;\">For forums sites go to <span style=\"color: #ff9900;\"><a style=\"color: #ff9900;\" href=\"https:\/\/forum.buradabiliyorum.com\/\" target=\"_blank\" rel=\"noopener\">Forum.BuradaBiliyorum.Com<\/a><\/span><\/strong><\/p>\n<\/blockquote>\n<blockquote>\n<p style=\"text-align: center;\"><strong>If you want to read more like this article, you can visit our <span style=\"color: #ff9900;\"><a style=\"color: #ff9900;\" href=\"https:\/\/en.buradabiliyorum.com\/technology\/\" target=\"_blank\" rel=\"noopener\">Technology category.<\/a><\/span><\/strong><\/p>\n<\/blockquote>\n<p><span style=\"color: black;\"><a style=\"color: #ff9900;\" href=\"https:\/\/www.cloudsavvyit.com\/13454\/how-to-develop-on-a-remote-ssh-server-with-visual-studio-code\/\" target=\"_blank\" rel=\"noopener\">Source<\/a><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>&#8220;#How to Develop on a Remote SSH Server With Visual Studio Code \u2013 CloudSavvy IT&#8221; Editing files stored on a remote server doesn\u2019t need to be a clunky mess of shell commands and basic text editors. Visual Studio Code is one of the most popular developer IDEs and an officially supported extension lets you add&#8230;<\/p>\n","protected":false},"author":1,"featured_media":321578,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2021\/06\/74e5b6c0.jpg","fifu_image_alt":"","footnotes":""},"categories":[18],"tags":[],"class_list":["post-321577","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-technology"],"_links":{"self":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/321577","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/comments?post=321577"}],"version-history":[{"count":0,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/321577\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media\/321578"}],"wp:attachment":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media?parent=321577"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/categories?post=321577"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/tags?post=321577"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}