Using VS Code within the browser

As a programmer, Microsoft visual studio code is one of the best code editors I have ever used and most probably, mostly loved code editor for all the programmers out there. It is completely free and has thousands of extensions that extend the functionality of VS Code to make a programmer's life easier. If you’re coding in VS Code you’re most probably using a desktop version of it. What if I told you that you can use this editor in your web browser?

Yes, you can use VS code within the browser, Microsoft has rolled out a web version of Visual Studio Code which can be accessible at vscode.dev. It is a lightweight version of VS Code running fully in the browser. The looks and feels are exactly the same as the desktop version itself, with the ability to install very very few extensions. You can sync your settings with the help of Github or Microsoft account login. You can also open the local folder in VS Code if your browser supports the File System Access API (Edge and Chrome) with your permission without any worrying about uploading or downloading or you can log into a remote repository, or upload a single file when you’re done (see fig. 1).

Since VS Code for the web is completely running within a browser, it lacks some functionality when compared to what a desktop application can do. For example, you can’t run, debug your code and you can’t open a terminal (see fig. 2). I mostly code in Python and for app development, I use flutter and recently started with Go lang. Unfortunately, I can’t run any of the above-mentioned language/frameworks in web-based VS Code (see fig. 3).

It’s just because “The extensions are not available in Visual Studio Code for the Web” (see fig. 4). When you refresh your browser you will lose your workspace and you will need to open it again but it will keep you signed in if you leave vscode.dev. You can also do a search within a workspace or do version control stuff. Another cool stuff I really liked is when you open a remote repository is creates a URL for you and when you try to refresh it, it opens the same URL which means you don’t lose workspace here (see fig. 5).

But here is what Chris Dias says about web-based VS Code:

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’re able to provide additional experiences such as Outline/Go to Symbol and Symbol Search for popular languages such as C/C++, C#, Java, PHP, Rust, and Go.

Better: The TypeScript, JavaScript, and Python experiences are all 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 preview!).

The Extensions
Luna Paint — Image editor, Github issues Notebooks, CodeTour, WikiLens, GitHub Repositories, Codespaces, Pull Request, Jupyter Keymap, Jupyter Notebook Renderers, Material Icon Theme, Prettier — Code formatter, Pylance, Python, Night Owl are few extension which I used and mentioned in the official website of VS code works well with web-based VS Code. If you don't want to install theme extensions and still want to use a theme, then Microsoft has also integrated theme support, with easy testing using special URLs — for example, opening vscode.dev/theme/sdras.night-owl or https://vscode.dev/theme/wesbos.theme-cobalt2 that takes you to VS Code with the theme already installed (see fig. 6).

Conclusion
As I mentioned earlier it is a lightweight version of VS Code. So, I will still prefer a desktop version of VS Code as it lacks most of the functionality but one can use web-based visual studio code for syntax highlighting, to make easier access to your code in Github, basic code editing, image editing (with the help of extensions) are few. But VS Code team is also planning more updates to VS Code on the web. “Bringing VS Code to the browser is the realization of the original vision for the product. It is also the start of a completely new one. An ephemeral editor that is available to anyone with a browser and an internet connection is the foundation for a future where we can truly edit anything from anywhere.”

Happy Coding 😄

Learn more about web-based VS Code @ vscode.dev

Thanks for coming up here! Follow me on LinkedIn and my work on Github.