How to Connect to a Remote Server with SSH on VSCode

Install VSCode

Please check the VSCode homepage. https://code.visualstudio.com/.

Install remote-ssh extension in VSCode

  1. Open the VSCode. On the left, there’s an Extension icon.
  2. Search for remote-ssh. Choose the first one and click install.
  3. You may need to reload VSCode to let the extension initialize.

Connect to the remote server

  1. Click View > Command Palette… or use the shortcut cmd+shift+p for Mac and ctrl+shift+p Windows. Type ssh and choose remote-ssh: connect to host.

2. Type the URL of the remote server

3. After that, it will open a new VSCode window.

Add your workspace

  1. After connect to the remote server, we need to cd to our workspace. Call your Command Palette again and type folder. Choose Add folder to your workspace in my case and enter your path to workspace.

Code Formatting with Prettier in VS Code

No one likes messy code, but no one likes painstakingly formatting their code as they write it either. The Prettier plugin on VS Code takes care of that for us.

To install it, navigate to the fifth panel on the VS Code sidebar

Type “Prettier” into the search bar and it should be the first option in the list

It’s installed now, but we’re not done. We have to do some set up to get Prettier working in our files.

Navigate to the Settings at the bottom left corner of the screen.

Type “format on save” into the search bar. Change this property to true. This will make it so that whenever we save a file that we’re working on, Prettier will automatically format it for us.

Type “prettier” into the search bar. You will see a list of around 20 properties that dictate the formatting rules Prettier will follow. Change these settings to your preference.

For example, you can change “prettier.singleQuote” to true if you don’t want to deal with some of your code using double quotes and other parts using single quotes.

Save your new settings, close VS Code, and you’re good to go!