Microsoft’s VS Code is an industry-standard, free code editor. Already an amazing tool for creating and editing Ghost themes, we’ve made VS Code even better at it with the release of our official Ghost extension.
Our goal with the extension is to make theme editing and creation as easy as possible, whether you’re just starting out or already a seasoned pro. Here’s what the extension does.
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 be downloaded, studied, and modified. Our VS Code extension will help you on this journey by providing explanations for what’s going on in a theme.
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 — you can now search and access Ghost’s official docs right from the editor. By searching “tags,” you can quickly find the syntax you’re looking for and get on with creating your theme.
To search the docs, 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.
You autocomplete me
The last feature we’ll highlight is one that both newbies and power users will appreciate: autocomplete. Start typing a 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 remember the options for more complex helpers like {{#get}}. What’s more, we also support dynamic autocompletes that use your theme’s package.json configuration to generate custom snippets for responsive images and custom settings.
There are a few other neat features left to discover, so check out the official Ghost VS Code extension to learn more and download.
Build with Ghost newsletter
You might have already heard about the extension in our Build with Ghost newsletter, which is for creators of all levels who are interested in making Ghost their own. Keep up to date with changes in Ghost, learn tips and tricks for building with Ghost, and find out about exciting Ghost sites in the tech space.
**