Glitch for VS Code
Glitch is a collaborative coding community and application host with live co-editing and instantly available apps.
Glitch for VS Code brings Glitch into your favorite editor, allowing you to create, edit, and share projects on Glitch right from VS Code.
Files are read directly from Glitch and kept in sync live, so you can edit along with others using Glitch's web editor or the VS Code extension. Apps restart automatically on changes, so everything is always up-to-date.
Get to know Glitch a bit better here.
Even if you've never used Glitch or VS Code, you can have a live app ready to edit in just a minute or two:
For now, Glitch for VS Code is mainly for working on projects. To "remix" (create you own instance of) different apps or invite others to edit your project, use the tools on glitch.com. Jump to the web editor there for your project using the "Glitch: Show in Web Editor" command.
Start a shell session on your Glitch server with the "Glitch: Console" command. It opens in the terminal panel at the bottom of the VS Code window.
View the output of your app process(es) with "Glitch: Show Logs". They'll display in the output panel at the bottom of the VS Code window.
If your app has a Node backend (such as the Glitch
Rewind is Glitch's version control system. It's in the source control management section of the sidebar (you can use the built-in "View: Show SCM" command to get there). It works a little differently from the version of Rewind in the Glitch web editor.
Rewind is strictly linear. There are revisions under the "Rewind to Revision" section. Checkpoints are generated automatically, but with the extension you can create your own revision point as well.
When you select a revision, you'll see a ⏪ button in the title bar. Clicking it will reset your project's content to the state it was in at that point and create a new revision. This doesn't erase what has happened in-between; you can always rewind back to before you rewound.
When you select a file from the list of ones that have changed, the side-by-side diff you see is live: it updates to reflect the revision you have selected and any changes you make in the current (right, green) column. This means that you can, for example, copy-and-paste a section from the past (left, red) side into the current state and that part of the diff will cease to be marked, because it's no longer different!
"Glitch: Remix Current Project" creates a remix of the current project and switches the editor to it. Secrets in the
"Glitch: Close Current Project" closes the currently open project (removes it from the workspace). You can always reopen it. This doesn't stop the app from running.
"Glitch: Show Diagnostic Information" opens a read-only document with information about the VS Code context in which the extension is running for easy inclusion in bug reports.
"Glitch: Export Extension Logs" exports VS Code logs as a single archive file that can be attached to bug reports (with an option for how much to include).
Known Issues & Limitations
Quick open file (⌘P) and find in files (⇧⌘F) don't use the standard UI because extension integration support isn't finalized. The same features are supported with an alternative UI that looks like this:
If you really want the standard search experience, use the "Insiders" build of VS Code. Search extension support has shipped in that, so you'll just see the normal search UI.
Visible Cache Files in "Problems" Tab and Elsewhere
Files are read from and edits are applied to Glitch directly, but a local cache is kept for doing the analysis that powers VS Code's language features. Ideally this would be completely invisible, but they show up (somewhat appropriately) in the "Problems" tab as duplicate messages. If this is distracting, you can enter "!.vscode-glitch" into the "Filter" field at the top right. The total problem count in the tab will remain doubled. Avoid this by having zero problems.
If you find yourself having opened a cached file, it's not a big deal. They're clearly designated as such and there's a link to switch to the live version, which you should click.
"Glitch" Is the Only Available Document Formatter
It's also set as the default for Glitch workspaces automatically. It delegates to the formatter configured for each language in the user-level settings or by the formatter extensions themselves.
If it's not behaving (if, for example, you have multiple formatters for the same language and want to use one for Glitch and a different one for another, non-Glitch project), you can ensure the proper formatter is used by: