My Attempt to Run VS Code on iPad
The Vision
Code App’s vision is to bring desktop editing experience to iPad and uses the currently most popular desktop code editor VS Code as a design reference. But what if we could actually run VS Code on iPad?
Well, turns out we can! Below is a screenshot of VS Code running on iPad with Git support and a server side code execution extension enabled.
How does it work?
Currently, VS Code lives on 2 platforms — desktop and web. The former platform that we all are familiar with uses Electron, which is unfortunately unavailable on iOS. This brings us to the second option.
The second option, despite being the less known one, is actually relatively easy to be built from source. All you need to do clone the VS code repository and build the dependencies.
git clone https://github.com/microsoft/vscode.gitcd vscode
git checkout master
git pull https://github.com/microsoft/vscode.git master
cd vscode
yarn
yarn web
You can also try it out on VS Code Web playground: https://vscode-web-test-playground.azurewebsites.net
Immediately, you will notice that it’s actually pretty solid! There are support for TextMate scoped syntax highlighting, as well as IntelliSense for a few languages including Javascript and Typescript. Most importantly, these features are enabled from the client side. No server side logic is needed to handle them.
This means we can serve the necessary files from a local web server that runs on iOS, and load it with a browser. Boom! VS Code interface is available offline on your iPad.
Limitations
Of course, there are a number of issues. First and foremost, a browser is sandboxed — it cannot access files from iOS’s file system. This means the files are not persisted.
Fortunately, with VS Code’s superb API collection, I am able to build an extension that implements a file system which communicates between the web server and the browser. This means we can load files (including binary files like images) from the local disk.
class FetchFileSystemProvider {
async rename(from, to, opts) {
await fetch('/rename', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
from, to, opts
})
});
}
async write(id, a, content, b, c) {
await fetch('/writefile/', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
... this.openFiles[id],
base64encoded: ToBase64(content)
})
});
}
}Secondly, Git — the core feature of VS Code, does not work either. This is solved with the same logic of the first problem. We leave the heavy lifting of Git to the web server and send back the results to the browser.
With this logic, everything that could run on iOS could eventually be implemented. For example, an emulated terminal (We already have this on Code App), or a Language server, which provides advanced code completion.
For the features that we could not easily implement in iOS, for instance, compiling C, Java and other programs. We could do it from an external server like Repl.it does. (Again, a feature in Code App from the very beginning)
Verdict
While it’s cool that you can run VS Code on your iPad, it’s never going match a desktop environment as iOS’s limitation still applies. For example, it’s impossible to run unsigned binary so package managers like Homebrew would likely never work on iOS. Plus, the interface of VS Code is not really optimised for touch devices, you’ll find many controls difficult or impossible to use without a physical keyboard or a trackpad.
What now?
I’m planning to release the code and make it an open source project. In the future, we could possibly implement VS Code remote development extension that supports development on a remote server over SSH, making the iPad’s version of VS Code ready for production development usage.
