Skip to content

Latest commit

 

History

History
58 lines (42 loc) · 1.86 KB

README.md

File metadata and controls

58 lines (42 loc) · 1.86 KB
Raw

Ember HTMLBars Highlighting

This package provides HMLBars/Glimmer syntax highlighting for template (.hbs) files as well as inline template declaration in JS files.

Syntax Highlighting

To activate syntax highlighting in template files select Glimmer as the language. Glimmer highlighting is automatically applied to any inline template declaration in JS files.

ESLint

When using this grammar you must update your ESLint config to include this grammar in its scope. Add source.js.extended to the 'List of scopes to run on...' in the linter-eslint settings.

Ember Inline Template Declaration

Ember component test files are automatically generated with inline template string syntax, eg:

this.render(hbs`
  {{#some-component}}
    Syntax highlighting is the best.
  {{/some-component}}
`);

But you can also declare templates for components using a tagged template string and the layout property!

import Ember from 'ember';
import hbs from 'htmlbars-inline-precompile';

export default Ember.component.extend({
  // Component layout using tagged template string:
  layout: hbs`
    <span>Hello there, {{name}}</span>
  `
});

This package will match the hbs` ` declaration and apply syntax highlighting to template string contents.

Features

  • HTMLBars Comment Block Bindings on Cmd + /
  • Unescaped output (triple curlies) are flagged with wrapping .unescaped.block.htmlbars
  • Property/Component/Helper names flagged as string.of.property.function.component.name.htmlbars
  • All framework Ember helpers flagged as support.function.builtin.inline.htmlbars

Screenshot

See CONTRIBUTING.md for technical details.

Thank You

language-ember-htmlbars for ideas on regex patterns.