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.

Quick Start

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:

• Open the Command Palette (Ctrl/Cmd+Shift+P) and start typing "glitch show commands". Select that option and you'll see all the Glitch actions currently available.
• Select "New Project". You'll have the option of signing in to Glitch with your browser or receiving a code to enter by email. You don't need to have an account in advance.
• Once you've signed in, pick a project template. A new Glitch project will be created, running instance and all.
• Visit it with the "Show App in Browser" command (all commands are available from the initial Command Palette, not just through "Glitch: Show Commands").
• You can start editing files immediately. Changes will be live by the time you refresh the page.
• To reopen a project later, use the "Glitch: Open Project" command.

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.

More Features

Console

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.

Logs

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.

Node Debugger

If your app has a Node backend (such as the Glitch hello-express or hello-sqlite starters), you can use the Node debugger. Use the "Glitch: Debug" command to start it (rather than the standard debug menu). To trigger a debug session, set a breakpoint or add a debugger statement and cause that part of the code to execute. The debug panel will focus and you'll be able to explore the execution context and step through the call stack.

Rewind

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!

Other Commands

"Glitch: Remix Current Project" creates a remix of the current project and switches the editor to it. Secrets in the .env file aren't copied over to the new app. This is a whole new project—there's not an automatic way to pull changes back in.

"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

Non-Native Search

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:

• Creating a new unsaved document (CMD/CTRL + N)
• Running the “Change Language Mode” command and picking the relevant language
• Running “Format Document With…”, choosing “Configure Default Formatter…”, and picking the formatter you want to use