Skip to content
| Marketplace
Sign in
Visual Studio Code>Programming Languages>GhostNew to Visual Studio Code? Get it now.
Ghost

Ghost

Ghost

|
6,836 installs
| (6) | Free
Official Ghost extension for theme development in Visual Studio Code.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

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.

hover

Autocomplete

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

hover

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.

dynamic snippets

  • 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.

search help docs

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.

gscan

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.

github

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.

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft