Editing sites with Visual Studio Code

Update: the extension this relied on isn’t published anymore and the author archived the GitHub repo – there doesn’t appear to be any notice or explanation posted. The most recent GitHub issues were people complaining about various protocols not working anymore so perhaps something changed in VSCode’s API that broke the extension. There do not appear to be any other extensions published right now that provide webdav connectivity via VSCode’s virtual filesystem API :frowning:

Anyone want to build one?

Every emergence site makes its application filesystem to developers for live editing via the WebDAV protocol. The /develop endpoint serves as the base URL for the WebDAV filesystem, so the root URL to connect with any WebDAV client would look like https://example.org/develop. Opening that URL in a browser will load a browser-based editor that can use that same WebDAV interface.

How each WebDAV client accepts configuration varies, here I’ll cover one way to connect from Visual Studio Code:

  1. Log in to the site you want to edit, and then visi /login?format=json for easy access to copy your session handle

  2. Install the Remote Workspace extension

  3. Create or open an existing multi-root workspace

  4. Use the File → Open… command (as opposed to File → Open Workspace…) to to open your .code-workspace file for manual editing (as opposed to actually loading the workspace, which should already be loaded)

  5. Add a new object to the "folders" array:

        "name": "my-site",
        "uri": "webdav://$session:MY_SESSION_HANDLE@my-site.example.org/?base=develop/&ssl=0",
    • $session should be kept as the username while MY_SESSION_HANDLE is replaced with your session handle obtained in step 1
    • ssl=0 should be changed to ssl=1 if your site supports HTTPS
  6. Save your changes to the .code-workspace file, the remote root should immediately load in your editor’s file tree. Any time you save further changes to this file it should refresh/reconnect automatically.