Ghost

Official Ghost extension for theme development in Visual Studio Code.

New to Ghost theme development? Check out these resources:

• Developer documentation
• Tutorials
• Source code for the official default Ghost theme, Casper
• Learn more about the open-source publishing platform Ghost

Requirements

Open your theme as the root folder in VS Code.

Features

Hover for info

Hover over Ghost theme syntax to learn what the code does or click the link to open Ghost's official documentation.

Autocomplete

Just start typing and the extension will do the rest by autocompleting your Ghost theme helper.

Available snippets

• asset
• custom
• foreach
• get
• has
• if
• img:formats
• img:responsive
• img_url
• is
• partials
• plural
• post
• price
• site
• unless

Dynamic autocomplete

This extension also provides three dynamic autocomplete functions that read data from your theme's package.json file.

• custom: generates a list of your custom properties for easy autocompetion
• img:responsive: generates a responsive image srcset based on your theme's configured image sizes
• img:formats: generates a responsive image srcset but also includes sytnax for converting image formats

Help

Use the docs command to search theme documentation and open the official page in a browser.

By default, Ghost help docs will open in VS Code. Configure help docs to open in your system browser by updating your settings:

"ghost.openDocsLocation": "browser"
// Or
"ghost.openDocsLocation": "vscode"

Gscan

Use the gscan command to scan your Ghost theme for errors. Errors and recommendations are output in a VS Code terminal window.

If Gscan is not installed, you'll be prompted to install it before it runs.

GitHub Deploy Theme Action

Use the deploy command to add the GitHub Deploy Action to your theme.

Tip: After adding the deploy script, set up your custom integration on your Ghost site and and add your secrets to GitHub. Read the docs for more info

Tips & Tricks

• For autocomplete, write Handlebar helpers without curly braces ({{``}}). For example, write foreach not {{foreach}}
• With autocomplete, use tab to advance your cursor
• To use autocomplete options within other autocomplete syntax (like using custom with match), add the following in your VS Code settings.json file:

  "editor.suggest.snippetsPreventQuickSuggestions": false

Release Notes

See `CHANGELOG.md for details.

Development

See CONTRIBUTING.md for more developing this extension.