README
VSCode Ember/Glimmer Syntax Extension.
Best with:
Change Theme: Shift+CMD+P -> Search Preferences: Color Theme -> Switch to Dark+ (default dark)
Issues: https://github.com/lifeart/vsc-ember-syntax/issues
Features
- Syntax highlighting of inline hbs blocks.
- IntelliSense for hbs tags and attributes.
- Quick info hovers on tags.
- Auto closing tags.
- Folding html.
- CSS completions in style blocks.
- Works with literal hbs strings that contain placeholders.
- Template tag support
- In
.gjs and .gts files
- In
.md files when specifing "```gjs" or "```gts" as the language
Usage
The vsc-ember-syntax extension adds highlighting and IntelliSense for hbs template strings in JavaScript and TypeScript. It works out of the box when you use VS Code's built-in version of TypeScript.
The extension adds new language definitions for .gts and .gjs known as glimmer-ts and glimmer-js respectively.
These languages are identical to typescript and javascript except that they add support for the template tag. This means that you can use the template tag in your code and get syntax highlighting and IntelliSense for the template.
import Component from '@glimmer/component';
export default class MyComponent extends Component {
get greeting() {
return 'Hello';
}
<template>
<div>{{this.greeting}} World!</div>
</template>
}
Customizing the theme
In your vscode settings.json file:
// https://code.visualstudio.com/docs/getstarted/themes
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"scope": [
"text.html.ember-handlebars meta.tag.any.ember-handlebars entity.other.attribute-name.ember-handlebars.argument",
],
"settings": {
"foreground": "#47c7b3",
}
}
]
}
If you are using VS Code 1.30 or older and are using a workspace version of typescript, you must currently configure the TS Server plugin manually by following these instructions
Thanks to:
How to publish: https://code.visualstudio.com/api/working-with-extensions/publishing-extension
