VS Code, one of the most popular development tools, now has a lightweight version of VS Code running fully in the browser. When you go to https://vscode.dev, you’ll be presented with a development environment where you can create a new project, import existing projects, and with no installation required.
History
In 2019, Microsoft picked up vscode.dev which was redirected to code.visualstudio.com. The website consists of actual documentation of VSCode.
Local development with Cloud tools
Browsers like Edge and Chrome allow web pages to access the local file system.
With the availability of vscode.dev, Microsoft hosted a development tool that can run fully serverless in the browser. Intresting features include:
- Local file viewing and editing.
- Can access it in restricted machines.
- Build client-side HTML, JavaScript, and CSS applications and debug them.
- You can upload/download files (and even store them in the cloud using the Files app)
If your browser doesn’t support local file system APIs, you’ll still be able to open individual files by uploading and downloading them via the browser.
Levels of Experiences with Programming Languages
- Good for C/C++, C#, Java, PHP, Rust, and Go.
- Better for TypeScript, JavaScript, and Python.
- Best for JSON, HTML, CSS, and LESS(including Markdown preview!).
Limitations of the Lightweight Experience
Some experiences will naturally be more constrained as VS Code for the Web is running completely within the browser.
Scenarios in which you will face difficulties are:
- The terminal and debugger are not available, since you can’t compile, run, and debug a Rust or Go application. Although there are emerging technologies like Pyodide and web containers which might solve the problem.
- You will feel less control over code editing, navigation, and browsing experiences, as services running fully in the browser that provide source code tokenization and syntax colorization, completions, and many single-file operations.
Extensions and vscode.dev
vscode.dev supports most UI customization extensions such as themes, key maps, and snippets.
Extensions that require OS-specific modules can be seen but are unavailable for use.
Examples of some useful extensions:
- Luna Paint — Image Editor extension lets you edit, layer and blend images directly in VS Code and of course you can save images to your local disk.
- The GitHub Issue Notebooks extension brings the Notebook experience to GitHub Issues.
GitHub Support with your online VSC
To make it easy to access your code in GitHub, VS Code for the Web comes with the GitHub Repositories, Codespaces, and Pull Request extensions built in.
Many extensions source code like CodeTour and WikiLens are stored in GitHub.
Thank you for reading this post, I hope you enjoyed and learn something new today. Feel free to contact me through my blog if you have questions, I will be more than happy to help.
LinkedIn: https://www.linkedin.com/in/zainuleb/
Github: github.com/zainuleb (Github)
Email: zainulebadd@gmail.com
Stay safe and Happy learning!
