How to Setup Visual Studio Code for Remote Development
Stanley Ndagi
|
45 steps
|
4 minutes
Vscode
Setting up vscode.dev
1
You don't need to have VSCode installed in your machine. You can use the online VSCode. In this tutorial, I'll show you how to do that. If you are using GitHub for your remote repositories using [[github.dev]] is a better process. It's good to know that you have this option, ideally for prototyping but it also supports remote repositories.
2
Navigate to [https://vscode.dev/](https://vscode.dev/)
3
Click here (user account icon).
4
Click "Turn on Cloud Changes..."
5
Click on your preferred account to sign in (GitHub or Microsoft). In this case, "Sign in with GitHub".
6
Click this icon, again, to confirm that you're signed in.
7
Since it reads that "You are not signed in to any accounts", reload the browser tab.
8
Click this icon, again, to confirm that you're signed in.
9
Great. You are if you can see the account name.\ In this case, **NdagiStanley (GitHub)**. Click on that. Then, click "Manage Trusted Extensions" to see whether your account has any.\ More on extensions below. Click "OK" or the 'x' icon to close that modal.
10
Click "Turn on Settings Sync..." to sync your settings.
11
Click "Sign in & Turn on"
12
Click on your preferred account (GitHub or Microsoft) In this case, "... GitHub" (since I'm signed in already) > Note that: Settings Sync and Cloud Changes can be synced from different accounts
13
Click the icon, again.\ (Notice mine is on the left, since that's how I've configured my VSCode) You'll notice the checkmark next to "Settings Sync is On". Great!
14
Great. Your editor is ready.
Editor options
15
Click here (hamburger icon) to view the menu.
16
Open the integrated terminal. Terminal Keyboard shortcuts?\ Press [[Ctrl]] + [[\\\`]] (For Windows or Linux) OR [[⌃]] +[[\\\`]] (For macOS)\ \ Refer to <https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf> , <https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf> and <https://code.visualstudio.com/shortcuts/keyboard-shortcuts-linux.pdf>
17
The terminal is not active on [[vscode.dev]] Click "Continue Working in GitHub Codespaces" to spin up a fully-configured development environment for this repository in the cloud with GitHub Codespaces.
Opening a Remote Repository
18
Click here to open the Explorer.
19
Click "Open Remote Repository"
20
Click appropriate option. In this case, "Open Repository from GitHub"
21
Click "Allow"
22
Click "Open Remote Repository"
23
Click "Open Repository from GitHub"
24
Click the "Choose a repository" field, then select a repository. In this case, I selected "NdagiStanley/dotfiles"
25
After the repository has loaded, you can open files, make changes, commit and push.
Markdown file preview
26
Click "[README.md](http://README.md)"
27
Click anywhere on that file, then ...
28
Press [[Ctrl]] + [[k]], then [[v]] OR [[cmd]] + [[k]], then [[v]] to open preview. Alternatively, click this icon to open preview.
Making changes and pushing to remote repository
29
I'll make a simple edit to demonstrate.
30
In this case, I'll click "er!)" and type " [[Backspace]]". Then press [[cmd]] + [[s]] to save the changes.
31
Click here (Source Control)
32
Click the "x" to close preview.
33
Click the file to confirm the changes.
34
Click this icon (the "+" icon) to stage the changes.
35
Click here (the field) and type a commit message In this case "Update README"
36
Click "Commit & Push"
37
Your changes are committed.
You can continue working on the repository locally. To do so follow the next three steps.
38
Click on the dropdown icon on the right of "Commit & Push"
39
Click "Continue Working On..."
40
Click appropriate option.
Extensions
41
Click here (the dropdown icon next to **RECOMMENDED**) to hide the list of recommended extensions.
42
Click here (the dropdown icon next to **INSTALLED**) to hide the list of installed extensions.
43
Now you only have the list of enabled extensions collapsed. I prefer this setup (only one list collapsed) so that when you navigate to "Extensions" you're reminded what's at your disposal (The enabled extensions) You can hide all of them too.
44
Click here (the dropdown icon next to **ENABLED**) to hide the list of enabled extensions.
45
Only collapse a list if needed.
