Home » The Best Remote Dev Environment – VS Code Remote SSH

The Best Remote Dev Environment – VS Code Remote SSH

by Jeremy Winterberg
0 comment
Reading Time: 4 minutes

At the company I work at, we write code off our remote server without setting up a local environment. Finding the best remote dev environment has been a journey for me. The extension FTP Simple has worked well so far, but it has some draw backs.

  • You need to verify that the new version of the file downloaded off the server, and when you save that it actually uploaded. Otherwise you might overwrite something accidentally.
  • It can be a little slow if its downloading a large file
  • Sometimes if you refresh the browser faster than the file saved you’ll get a fatal error

What’s the solution?

remote ssh extension

Running VS Code through Remote SSH. This setup allows you to use tools that require the full scope of the project’s files.

  • You can now access all of the Git tools/extensions vs code has instead of doing it through the web interface.
  • Robust extensions like PHP Intelephense work completely.
  • We can start writing and running automated testing suites with tools like phpunit/selenium
  • etc..

The biggest takeaway that I got from this switch, is that it feels like I’m working in a local dev environment again. Which makes me very happy. The following guide was written for my co-workers, but I decided to strip out specifics to share on the blog.

Required Extensions:

Name: Remote – SSH

Name: Remote – SSH: Editing Configuration Files

Recommended Extensions For PHP Testing:

Ignore if you don’t write php

Name: PHPUnit

Name: PHPUnit Watcher

Steps for Setup

  1. Generate an SSH Key on your local machine.
  2. Add the SSH Key to the server.
    • You should have an account on the server, if you aren’t sure, speak to your server administrator.
      • The FTP account used in FTP-Simple should work for ssh as well
      • However, currently you probably only have password access. You will need that password!
    • run the command ssh-copy-id <accountname>@<devsite url>
      • This will prompt you for your password, enter it.
    • You should be able to SSH to the server without a password now!
      • test this by doing ssh <accountname>@<devsite url>, if it doesn’t prompt for a password you’re set.
  3. In VS Code, with the Remote SSH extension installed, bring up your command pallette (ctrl/cmd + shift + p)
    • type in Remote-SSH and open configuration file, this should be at ~/.ssh/config or somewhere similar
    • enter the following config, replacing the values with your own.
    Host <devsite>
        User <ssh account>
        HostName <devsite url>
        Port 22
  1. In VS Code, with the Remote SSH extension installed, bring up your command pallette (ctrl/cmd + shift + p)
    • This time you’re going to type Remote-SSH and select connect to host
    • Select the Host you created in the ssh config
  2. You should now be connecting to the server over SSH.
  3. Extensions may need to be reinstalled on the SSH host, I know I did
    • I believe its due to them installing various dependencies to run.
  4. I also recommend opening your remote project directory, then saving the workspace locally on your computer. Then when you open vs code you can instantly go to that folder on the server in the future with ease.
    • Saving on the server was causing me issues.

Conclusion

I hope this helps someone get away from the clutches of FTP! I’ve been struggling with how to work remotely ever since I joined my company almost 2 years ago. This is finally the best dev environment I’ve come up with and am happy about. It feels like I’m working locally again!

I’m sure this guide will need many tweaks and adjustments. If you have an issues, feel free to reach out for help. If you’re not a co-worker, join the discord server, DM on twitter, or email me through the contact form and I’ll try to help. I wrote this largely off memory of what I did, and I’m sure I missed a few things.

Always strive to make your development environment work for you, and make your life more convenient. If you ever catch yourself frustrated, think about how to solve it. Don’t push it off because you don’t have time to look into it.

Commands to run on the server

These commands are really just for my coworkers. We write a web application in PHP.
  • add to ~/.bashrc for global composer installations to work as commands
    • Only really needed if you want to run phpunit-watcher in the terminal vs the vs code extension
    export PATH="$PATH:$HOME/.config/composer/vendor/bin"

You will need to install php-cs-fixer to format your php code

    composer global require friendsofphp/php-cs-fixer

Additionally you will need the following vs code settings to point to your executablePath

    "php-cs-fixer.executablePath": "/home/<account>/.config/composer/vendor/bin/php-cs-fixer",
    "php-cs-fixer.config": "/sc/config/.php_cs",
    "beautify.config": "/sc/config/.jsbeautifyrc",

If you use vs code on different operating systems (ie, you work on windows, then ssh to our linux server), I recommend the extension

Name: Settings on 🔥!

It allows you to toggle between sets of settings. When I’m working locally on windows I’ll turn “off” the OS config toggle group, but when I’m working off the server in ssh remote, I’ll turn it on.

  • put these in vs code settings
    "settingsOnFire.toggle": {
            "OS Config Toggle": {
            "on":
            {
                "php-cs-fixer.executablePath": "/home/<account>/.config/composer/vendor/bin/php-cs-fixer",
                "php-cs-fixer.config": "/sc/config/.php_cs",
                "beautify.config": "/sc/config/.jsbeautifyrc",
            },
            "off":
            {
                "php-cs-fixer.executablePathWindows": "php-cs-fixer.bat",
                "php-cs-fixer.config": "C:/Users/jerem/apps/config/.php_cs",
                "beautify.config": "C:/Users/jerem/apps/config/.jsbeautifyrc",
            }
        }
    },
    "php-cs-fixer.executablePath": "/home/<account>/.config/composer/vendor/bin/php-cs-fixer",
    "php-cs-fixer.config": "/sc/config/.php_cs",
    "phpunit-watcher.phpunitArguments": "lib/tests"

You may also like

Leave a Comment