https://github.com/johnknoop/vscode-handlebars-preview
Preview Handlebars templates in VS Code
https://github.com/johnknoop/vscode-handlebars-preview
handlebars handlebars-js vscode vscode-extension
Last synced: 5 months ago
JSON representation
Preview Handlebars templates in VS Code
- Host: GitHub
- URL: https://github.com/johnknoop/vscode-handlebars-preview
- Owner: johnknoop
- License: mit
- Created: 2019-06-11T12:24:20.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2024-06-13T08:25:18.000Z (10 months ago)
- Last Synced: 2024-06-14T10:34:51.891Z (10 months ago)
- Topics: handlebars, handlebars-js, vscode, vscode-extension
- Language: TypeScript
- Homepage:
- Size: 3.63 MB
- Stars: 15
- Watchers: 1
- Forks: 10
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
**How to use:**\
Open a Handlebars file, select **Handlebars: Preview** from the command menu **or** right click on the editor tab.
# Features
✅ Image support\
✅ [Automatically scans your workspace folder(s) for partials and helpers](#partials)\
✅ [Auto-refresh](#auto-refresh)\
✅ [Generate context file from a template](#generate-context-file-from-template)
## Partials
Partials are automatically discovered and given names based off of the workspace folder root. So if these are the subfolders of the folder you've opened in VS Code:
```
.
└── 📁partials
├── 📁style
│ └── dark.hbs
└── footer.hbs
```
Then the two partials will be registered as `partials/footer` and `partials/style/dark` respectively.
## Helpers
Helpers can be defined as javascript modules and will be automatically discovered and registered. Helpers can be placed anywhere in the Workspace, as long as they use the double file extentions like: `.hbs.js` or `.handlebars.js`.
As an example, a typical helper file could look like this:
```js
// my_helpers.handlebars.js
module.exports = {
toUpperCase: function (text) {
return text.toUpperCase();
},
toLowerCase: function (text) {
return text.toLowerCase();
}
};
```
And could be used like this inside your Handlebars template like this:
```hbs
{{toUpperCase title}}
```
## Auto-refresh
Changes to Handlebars templates applied in real-time. Included partials need to be saved in order for the change to take effect.
## Generate context file from template
Right-click on a handlebars file in the sidebar or on the editor tab and select **Handlebars: Generate context file**.
A new file named `{yourfile}.json` will be created and populated with sample data.
> #### Current limitations of context generation:
> 🙁 [Block parameters](https://handlebarsjs.com/guide/block-helpers.html#block-parameters) in `each`-constructs are not supported\
> 🙁 Path segments (`../`) are currently not supported.
>
> If you're using any of these features in your template, the resulting json will need some manual fixing.
>
> Feel free to make a pull request if these limitations are bothering you.
# Report an issue
Found a problem or have a feature request? Please post an issue over at our GitHub repository:\
https://github.com/johnknoop/vscode-handlebars-preview/issues
# 2.0 roadmap
📍 Override naming of partials using workspace-configuration\
📍 Intellisense suggestions for partials and context data
📍 Ctrl+click navigation to partials
See https://github.com/johnknoop/vscode-handlebars-preview/milestone/1 for more details