← Changelog

Ghost VS Code extension

Ghost VS Code extension

We've released an official VS Code extension to help make Ghost theme editing and creation as easy as possible. Whether you're a seasoned theme developer or an occasional theme tinkerer, you're going to want to check out this free tool 🔧

A guided tour

A fantastic way to learn how to build Ghost themes is to see how others have already done it. All of Ghost’s official themes are open source and available to download, be studied, and modified.

The new VS Code extension can help you on this journey by providing explanations for what’s going on in a theme.

0:00
/

Hover over any Ghost syntax to get a quick explanation, example, and link to the docs for more information. This feature is enabled automatically for any Ghost template file you open in VS Code!

Keep focused on the code

You’ve got your theme opened in the editor. You’re making great progress on your post template. You’re in an absolute flow state. But you can’t remember how to customize the output of a post’s tags.

Rather than leaving your editor, searching on Google for the answer, and returning to your theme — now you can search and access Ghost’s official docs right from the editor.

Open VS Code’s command palette and search for ghost or docs. Choose Search Ghost’s documentation and enter your search term. Select what you’re looking for, and it’ll open right there in the editor đŸȘ„

0:00
/

You autocomplete me

Both newbies and power users will appreciate the autocomplete feature. Start typing any Ghost helper like if or for, and the extension will autocomplete your code with the proper syntax and prompt you to choose from relevant options.

Autocomplete speeds up your development process and helps you to recall options for more complex helpers like {{#get}}.

0:00
/

What’s more, the extension also supports dynamic autocompletes that use your theme’s package.json configuration to generate custom snippets for responsive images and custom settings.


The Ghost VS Code extension is like having a course in Ghost theme development with a bunch of time-saving shortcuts, all in one place, where you need it the most. Discover all of the neat features for yourself 👇

Looking for more developer resources? Check out the tutorials and sign up for the Build with Ghost newsletter to keep up to date with the latest tips and tricks in Ghost development.

Get notified when we ship new features.