Using VSCode Web Server Variant
Last tested version is
1.77.3
, may become invalid in a future version.
Why & Why Not?
Advantages
As a tab on browser, more convenient. Haven't redundant renderer process, less memory footprint.
Bypass Electron's IME issues on Wayland.
Origin extension market, not coder/code-server's market.
It's cool!
Disadvantages
Not officially supported. See this issue.
Key shortcut conflicts, like
Ctrl + W
will close the browser tab (PWA mode fixes this).
Guide
First, the download link is:
https://update.code.visualstudio.com/latest/{target}/stable
{target}
= server-win32-x64-web
, server-linux-x64-web
or others.
Extract the package, then execute ./bin/code-server(.bat)
.
To change data directory, use custom token and port, ./run.sh
:
export VSCODE_AGENT_FOLDER=./data
./bin/code-server --accept-server-license-terms --port=8109 --connection-token=mytoken
But a lot of inconvenience here, such as build tasks always fail when offline. So there is a patch ./misc/patch.js
:
"use strict"; // Last Tested Version: 1.77.3
const patch = (path, replaceList) => {
const fs = require("fs");
const filePath = require("path").join(__dirname, path);
const bakPath = filePath + `.bak`;
if (!fs.existsSync(bakPath)) fs.renameSync(filePath, bakPath);
let content = fs.readFileSync(bakPath).toString();
for (const [search, value] of replaceList) {
const fn = search instanceof RegExp ? "replace" : "replaceAll";
content = content[fn](search, value);
}
fs.writeFileSync(filePath, content);
console.log("patched: " + path);
};
patch("./out/vs/workbench/workbench.web.main.js", [
// Replace entry url with local server to allow offline work (for webview)
// Source: src/vs/workbench/services/environment/browser/environmentService.ts
[`"https://{{uuid}}.vscode-cdn.net/{{quality}}/{{commit}}`, `baseUrl+"`],
]);
patch("./out/vs/workbench/contrib/webview/browser/pre/index.html", [
// Modify CSP (for webview)
// Source: src/vs/workbench/contrib/webview/browser/pre/index.html
[/\'sha256.+?\'/, "'unsafe-inline'"],
// Bypass hostname vertify (for webview)
// Source: src/vs/workbench/contrib/webview/browser/pre/index.html
[/\.padStart\(52.+?\)/, "&&location.hostname"],
]);
// rm -rf ~/.vscode-server/extensions/redhat.java-*/jre/
// rm -rf ~/.vscode-server/extensions/ms-python.python-*/pythonFiles/lib/python/debugpy/_vendored/pydevd/pydevd_attach_to_process/
// rm -rf ~/.vscode-server/extensions/ms-python.python-*/out/client/extension.js.map*
There is a bug that caused UI freezed when entering debug afterPatch is merged into mainline.1.65
.
Because node-spdlog and node-pty were both use NAN, so cross NodeJS version is hard to do (especially when you want pointer compression enabled). You can use a faked spdlog and daniel-brenot's node-pty fork.
{
"name": "spdlog",
"version": "0.13.7",
"description": "Faked Node bindings for spdlog",
"main": "index.js",
"license": "MIT"
}
const fs = require("node:fs");
const path = require("node:path");
function Logger(name, filepath) {
fs.mkdirSync(path.dirname(filepath), { recursive: true });
const fd = fs.openSync(filepath, "a");
this.trace = (v) =>
fs.write(fd, `[${Date.now()}] ${v.trimEnd()}\n`, () => {});
this.debug = this.info = this.warn = this.error = this.critical = this.trace;
this.getLevel = () => 2;
this.setLevel = this.setPattern = this.clearFormatters = () => {};
this.flush = () => fs.fsync(fd, () => {});
this.drop = () => fs.close(fd);
}
const createLogger = (_1, name, filepath, _2, _3) =>
new Promise((resolve) => resolve(new Logger(name, filepath)));
exports.createRotatingLogger = (name, filepath, maxFileSize, maxFiles) =>
createLogger("rotating", name, filepath, maxFileSize, maxFiles);
exports.createAsyncRotatingLogger = (name, filepath, maxFileSize, maxFiles) =>
createLogger("rotating_async", name, filepath, maxFileSize, maxFiles);
exports.setLevel = exports.setFlushOn = () => {};
exports.version = 11100;