VSCode from Everywhere
In this post, we shall learn about VSCode.Dev, the VSCode Online Editor which does not need any installation.
Around October 2020, the VSCode team announced the availability of vscode dev, a development tool that can run entirely in the browser. Check it out now. The vscode online editor is available at https://vscode.dev.
Once you browse VSCOde online, you can see a lightweight version of the #VSCode editor running in the browser and fully operational for most languages and development capabilities.
Since VS Code for the Web is running entirely within the browser, some experiences will naturally be more constrained when compared to what you can do in the desktop app. For example, the terminal and debugger are not available, making sense since you can’t compile, run, and debug a Rust or Go application within the browser sandbox.
A bit more nuanced are the code editing, navigation, and browsing experiences. They are generally powered by language services and compilers that expect a file system, runtime and compute environment on the desktop. These experiences are powered by language services running entirely in the browser that provides source code tokenization, syntax colorization, completions, and many single-file operations.
As a result, when in the browser, experiences generally fall into the following categories:
Good: For most programming languages, vscode.dev gives you code syntax colorization, text-based completions, and bracket pair colorization. Using a Tree-sitter syntax tree, we can provide additional experiences such as Outline/Go to Symbol and Symbol Search for popular languages like C/C++, C#, Java, PHP, Rust, and Go.
Better: The TypeScript, JavaScript, and Python experiences are powered by language services that run natively in the browser. With these programming languages, you’ll get the “Good” experience plus rich single file completions, semantic highlighting, syntax errors, and more.
Best: For many “webby” languages, such as JSON, HTML, CSS, and LESS, the coding experience in vscode dev is nearly identical to the desktop, including Markdown.
The First Steps
Once you’re browsing to vscode, dev, you’re landing on the main page, and from this page, you can start and develop your code, even you don’t have any connected account or any other configuration. That allows you to explore the options, capabilities, and other online vscode.
As with the VSCode for desktop, we might want to work with the existing settings and configurations, which means we want to connect to the #github profile and sync the settings. If you don’t have any profile, you can create a github profile within a second on GitHub.
Once you’ve got a github profile, you can connect and sync with the option – Turn on Settings Sync.
The Settings Sync is a straightforward process, and all you need is to choose the data and settings you want to sync from the “Sign-in & Turn on” menu.
Then, you can choose the relevant account that you want to sync with, and you can authorize the account with your credentials.
Once you’re connected to your github profile, you can choose the trusted locations. The trusted location can be one or more locations and can be from github, #Azure #DevOps, third-party location, and from local drive.
Once you have synced the settings, you’re good to go with your extension, user profile, and other settings.
Trust – VSCode helps you safely browse and edit code no matter the source or original authors. The Trust feature lets you decide whether your project folders should allow or restrict automatic code execution, and where is a doubt, leave a folder in Restricted Mode. Remember, you can always enable trust later.
Workspace Trust provides an extra layer of security when working with unfamiliar code by preventing automatic code execution when a workspace is open in “Restricted Mode.” When prompted by the Workspace Trust dialog, if you choose No, I don’t trust the authors, VS Code will go into Restricted Mode to prevent code execution.
The Profile Configuration is relatively easy, and like the desktop version, it allows you to configure the familiar settings and configuration:
- User or Workspace
- Online Service Settings
- Keyboard shortcuts
- A color, icon, and product theme
TIP: If you’ve got a settings sync option with all profile configurations, you don’t need to configure any options – in user mode, it will be synced without any interruption.
Now that we know the settings are in place and everything on the vscode dev is the same as we left them from the desktop version, we can continue and connect the relevant repositories, login to codespaces, etc.
Remote and Connect
The online VSCode allow you to connect and explore remote repositories from GitHub, Azure DevOps, and local device. This remote method provides several ways to work seamlessly with your code.
The new Remote Repositories extension, published by GitHub, makes the experience of opening source code repositories in online VSCode instant and safe. You can quickly browse, search, edit, and commit to any remote GitHub repository and Azure Repos directly from within VSCode. No clone necessary!
You can work on as many repos as you like without having to save any source code on your machine. Remote Repositories save you time and local disk space and empower you to stay entirely within VS Code for all your source control tasks.
Let’s open a remote repo in VSCode. Unlike VSCode desktop, you don’t need to install the Remote Repositories extension – it’s already part of VSCode online.
Note: Currently, Remote Repositories support GitHub repos and Azure Repos.
You can explore and contribute to the repo without ever having to leave VSCode online. You feel like you’re working on local code, using the familiar VSCode interface, and can use features like the VSCode Explorer, search, timeline view, quick open, and source control.
Remote Repositories helps you stay on the latest version of your repos every time, without any complex Git commands. Any time you open a new repo, you open the latest version, and whenever Remote Repositories detects there are recent changes from GitHub.
When you commit changes, they’ll automatically show up on GitHub – you don’t need to push your changes or publish any new branches you create.
You can change your code, create a new branch and a pull request (PR) based on that change, and then check out the PR, all in a few clicks.
GitHub Connection
VSCode and GItHub is an excellent story. To get started with the GitHub in VS Code, you’ll need to ensure that you’ve got a GitHub account and install the GitHub Pull Requests and Issues extension.
First, you must know that VSCode online and GitHub brings the best of them, and that means:
Codespaces – No editor, no problem. Code in a browser with a real VS Code experience, powered by GitHub Codespaces.
Remote and Code – You can directly connect to the repo from VSCode and start to code directly.
Publish Project – Publish any project directly to GitHub without creating a repo first. VS Code will make the repo for you and give you control over whether or not it should be public or private.
Integrated Source Control View – The source control view tracks your file changes and makes it easy to commit and push them. Add a commit message, mention another user in the repo, and click on ‘sync changes’ in the status bar. This will pull any remote changes down and push your commits upstream.
Branching – From the status bar, you can view all branches and quickly switch to another one. You can also check out another branch from the command palette, create a new one, or rename a branch.
Stage Commits – The Source Control view in VSCode lets you stage-specific changes only, so you can control what’s part of your commit and what’s still a WIP. Then click on it to make a commit.
Jump Directly To GitHub – Sometimes, you’re just knee-deep in source code and need to switch over to GitHub. With the GitHub Pull Requests and Issues extension, you can copy a permalink or directly open a permalink in GitHub, so you don’t lose your place.
Create Issues – Do you find yourself putting TODO comments throughout your code and then forgetting to…do them? With the GitHub Pull Requests and Issues extension, you can make those comments actionable and create GH issues directly from code comments.
The following steps describe the simple way to connect VSCode to the #GitHub account.
Local File
The VSCode online allows you to open a local file from your device. The access to local files is done via File System Access API.
A browser like Edge and Chrome supports a feature called the File System Access API. This API allows web pages access to the local file system with the relevant permissions from the user. This opens up many opportunities like access to the local machine gives many scenarios for using VS Code Online as an installation-free local development tool.
VSCode FAQ
How does VSCode online manage to work via browser? All the current latest browsers like Edge and Chrome support a feature called the File System Access API.
VSCode Online editor features – Using the File System API, VS Code Online manages to give us the following features.
Viewing / Editing Local Files – You view and edit local files directly from the browser. You can also take quick notes and preview them in the Markdown Mode. Even if you are on a machine with restricted rights and cannot install any software, you can still use vscode dev to view your local files and edit them.
Client-Side Features – You can also build client-side features like JavaScript, CSS, HTML applications, and the browser tools used for debugging.
iPad Development – You can also do development on the iPad. Features include uploading /downloading files using the Files App for storing them in the cloud. Lastly, you can also open repositories remotely using the GitHub Repositories extension, which is in-built.
Unsupported Browsers – If you have an old browser that doesn’t support any local file system APIs, you can still open individual files by uploading and downloading them via the browser.
Do extensions work in VSCode Online – VSCode Extensions related to UI customization such as snippets and themes will work in vscode dev. Other extensions running on a node will still show in search results, but in this case, they will be marked as ‘Unavailable.’ This is useful for VSCode developers. Below is a list of the best extensions for VSCode.
Github extension for VSCode – You can use Visual Studio Code and GitHub to share and collaborate code from your editor itself. In VSCode, this GitHub integration can be done using the GitHub Pull Requests and Issues extension.
GitHub issue Notebooks extension – There is another GitHub Issue Notebooks extension that replicates the Notebook experience for users of GitHub. You can arrange results together from a single editor.
How to open Github Repo? – Use The Remote Repositories extension for Visual Studio Code.
VSCode Download – If you still want to download and install a Visual Studio Code, you can download it from their official website.
