VSCode.dev: the new development service from Microsoft
You may have heard about it, but Microsoft has developed a web version of its famous code editor Visual Studio Code.
It's called VSCode.dev and it's available for everyone since October 20.
Since the desktop version of VScode is developed thanks to Electron, a NodeJS framework allowing to create desktop applications thanks to web technologies, it is rather logical that Microsoft has developed and released a version accessible from a browser.
But what are the main features, what are the differences with Codespace from Github, is it really similar to the desktop version ? These are questions I will try to answer.
First impression
VSCode.dev is actually a lighter version of the desktop app. No frills, no unnecessary elements, only what we need.
Just like the desktop version, you can synchronize your profile with Github or Microsoft Azure, you can install extensions, open files, modify them, ...
This way you keep your usual development environment. (Almost) nothing changes. Yeah, almost nothing.
Due to the lightness of the web version, Microsoft had to make some concessions.
Missing features
Indeed, in the current version (as of October 22, 2021), several features are not present such as :
- The integrated debugging tool,
- Some extensions like Gitmoji, Github Copilot, Live Server, ...,
- The integrated terminal,
- PNG or JPEG image preview.
There are probably other features missing, but here are the ones I spotted.
Regarding extensions, Microsoft added a little warning icon to tell you that an extension is missing. If you want more details about it, you can check the official Microsoft documentation
Beside that, everything else works perfectly fine, which looks promising for the future of VSCode.dev.
Key features
Since VSCode.dev is an online code editor, this means that, just like a classic editor, you are going to be able to edit your local files, Amazing 😄.
This is made possible thanks to the File system Access API which is unfortunately only available for browsers based on Chrome (version 86). or Opera (version 72). Sorry for Safari or Mozilla users 😥.
Hopefully, browsers that currently do not support this feature will probably support it in a little while.
Another very nice feature is being able to directly open a Github repository. You could tell me : "Yes but it was already the case with the desktop version with the Github Repository extension".
Of course, but now, this feature is native to the online editor.
Other cool features were added natively to the editor such as extensions :
By the way, speaking of Codespace, isn't it just a simple copy of Github Codespace with less functionality ?
Let's take the time to compare the two.
VSCode.dev vs Github Codespace
First of all, Github Codespace is based on Visual Studio Code but does not have the same precise goal.
Indeed, Github Codespace is an editor, certainly, but dedicated to Github and deeply linked to it.
In addition, VSCode.dev is just an online editor which means that, as we have seen previously, several features are not present such as the integration of a terminal.
This makes sense because, for VSCode.dev to have access to your files from the command line, your files would need to be stored on a server or vscode.dev would have to have access, via ssh for example, to the instance of the server that hosts your files or your WSL, which is unfortunately not possible at the moment.
Unlike VSCode.dev, Github Codespace works thanks to a virtual machine which runs this application. Each instance of Codespace that you launch for a given repository obviously has access to your project files. And so, by extension, you can run command lines from the Codespace instance of the browser.
Github codespace is also more suitable for larger projects that require tests, tasks, debugging, ...
Access VSCode.dev
Now that everything is said, how do we access vscode.dev ?
There are currently 3 ways of doing :
- By typing the url https://vscode.dev directly in a compatible browser,
- By adding
vscode.dev/at the very beginning of a Github repository url like this : https://vscode.dev/https://github.com/MrAnyx/MrAnyx - By proceeding in the same way but for an Azure project this time like this :
https://vscode.dev/dev.azure.com /…
In conclusion
In conclusion, VSCode.dev can be extremely useful for quickly modifying a file in a github repository.
But, for the moment, it is absolutely not suitable for creating larger projects that require testing, using a terminal or even using the debugging tool.
Nevertheless, Microsoft continues to offer a very pleasant development experience by offering full and free services.
Cover by Mohammad Rahmani
