ember-tooling / prettier-for-handlebars-vscode

VS Code Prettier formatting for Handlebars files

Deprecated

This extension is deprecated in favor of using Prettier for Handlebars natively using Prettier itself.

Prettier for Handlebars - A fork of Handlebars Formatter

This extension allow you to format handlebars files using the currently unreleased Prettier glimmer parser

Because it uses unreleased, it may break with future changes to Prettier.

Why Prettier for Handlebars exists VS Handlebars Formatter

This fork exists because of a difference in the hard coded Prettier dependency.

Currently Prettier for Handlebars uses Prettier v1.18.2 while Handlebars Formatter uses something more modern.

Because the Prettier glimmer parser is still experimental it tends to break. There were idempotency issues with versions above v1.18.2.

Once these are fixed then this extension will be updated accordingly.

Final reason: I, Alon, like my name better 🙂

Configuration

This extension should respect options declared in .prettierrc. If you wish to provide specific overrides you can do so like this

{
  "singleQuote": true,
  "overrides": [
    {
      "files": "*.hbs",
      "options": {
        "singleQuote": false
      }
    }
  ]
}

Features

Format your handlebars files with Prettier ... that's it!

Example below from a slightly complex template from Discourse

Before

After

Usage

Using Command Palette (CMD/CTRL + Shift + P)

CMD + Shift + P -> Format Document OR CMD + Shift + P -> Format Selection

Extension Settings

This extension has no user configurable options at this point

prettier-for-handlebars-vscode's Issues

inserts final new-line to file

which then is a template-lint violation. This should respect editorconfig but does not seem to.

is this expected for an if/else block?

I have an if block on handlbars to pick a class based on a json object, like below. prettier in vscode doesn't like that the div isn't properly closed (but it is, unless I missed it elsewhere in the doc....)

Here's the file setup.

Source file:

{{#if credential_number}}
    <div class="panel panel-success credential-card bg-success">
{{else}}
    <div class="panel panel-default credential-card">
{{/if}}
        <div class="panel-heading">
            {{#unless credential_number}}
                {{#if in_progress}}
                    <div class="pull-right credential-application-action-btns" style="padding:0px;">
                        <button class="btn btn-default btn-lg btn-unpin withdraw-button" data-application-uuid="{{application_uuid}}">
                            <span class="glyphicon glyphicon-remove-circle text-muted" aria-label="unpin from dashboard" aria-hidden="true"></span>
                        </button>
                    </div>
                {{/if}}
            {{/unless}}
            <!-- Language Tokenization of Credential Type Name OFF by default -->
            <!--<h3 class="credential-card-name">{{lang_entity "credential_type" slug "name" name}}</h3>-->
            <h3 class="credential-card-name">{{name}}</h3>
            {{#if credential_number}}
                <p>
                    <span class="credential-tooltip" data-toggle="tooltip"
                        title="<h6>{{lang "L001221" "Effective Date: "}}{{locale_date issued_on}}
                                {{#if expires_on}}
                                    <br/> {{lang "L001222" "Expiration Date: "}}{{locale_date expires_on}}
                                {{/if}}</h6">
                        <small>
                        {{lang "L001223" "Credential #: "}}{{credential_number}} | <i class="text-muted text-success"> Expires on {{expires_on}}</i>
                        <!-- {{#if time_remaining}}
                            | <i class="text-muted text-success">{{time_remaining}} {{lang "L001224" "remaining"}}</i>
                        {{/if}} -->
                        </small>
                    </span>
                </p>
            {{/if}}
        </div>
    </div>

error returned in vscode:

Command 'Format Document With...' resulted in an error (Unclosed element `div` (on line 39). (39:0)
  37 | 
  38 | {{#if credential_number}}
> 39 |     <div class="panel panel-success credential-card bg-success">
  40 | {{else}}
  41 |     <div class="panel panel-default credential-card">
  42 | {{/if}})

Preserve tildes (~)

The ~ character is used to remove whitespace in HBS, I believe this extensions is removing it:

  <pre>
    {{~this.json}}
  </pre>

becomes

  <pre>
    {{this.json}}
  </pre>

Preserve blank lines

It's very helpful for readability and maintainability if intentional blank lines could be preserved. This is the only thing left that I loved so much in handlebars-formatter, it handled this case pretty well: only one blank line will be preserved and excess will be removed.

Can we support this feature as well? Thanks!

formatter self-closes void elements

eg <input />. This is disallowed by our styleguide (and generally discouraged now, see eg https://hackernoon.com/to-close-or-not-to-close-4365d24853ff)

Incorrectly formats glimmer array syntax

This

{{#with action.params.[0] as |param|}}
  <span>{{param.label}}</span>
{{/with}}

gets formatted as

{{#with action.params.0 as |param|}}
  <span>
    {{param.label}}
  </span>
{{/with}}

which is wrong and triggers a parse error. See Prettier Playground.

Any idea how to work around this?

Incorrectly formats string + helper, prettier-ignore not honored

Formats

<span class='hello--{{get-location planet reallyLongTextThatHitsMaxCharLimit}}'>

to

<span class='hello--
  {get-location
    planet
    reallyLongTextThatHitsMaxCharLimit
  }}'
>

which introduces extra spacing and breaks the desired class such as 'hello--world' to 'hello-- world'.

Adding {{! prettier-ignore }} above span also isn't honored

All the code is deleted when formatting.

Whenever I format all the code is deleted and I end up with a blank document.

Error: Handlebars partials are not supported

Not much to add here, I can provide stacktrace if you want

documentation missing rationale or reason for adopting over handlebars-formatter

I have checked release notes, issues, pull requests and description docs in both github and VSCode marketplace, but I can't find anything that explains why the fork or why this one (with more recent updates) should be the chosen VSCode extension over the other.

At present, I'll use the mfeckie one since it preserves newlines, which is essential for our team's project, but I think the documentation needs to be updated to give the use case for this, otherwise there is nothing making any kind of argument for its use besides whether you want newlines or not.

Removes the backslash symbol used when escaping handlebars expressions

Removes the backslash symbol used when escaping handlebars expressions

For example \{{escaped}} becomes {{escaped}}

It also reformats raw blocks breaking them.

For example:

{{{{raw}}}}
  {{escaped}}
{{{{/raw}}}}

becomes:

{{#raw}}
  {{escaped}}
{{/raw}}

Line spaces are removed

I'm moving from Atom to VSCode

Atom with Prettier for Handlebars would convert this:

<h1>
  Title
</h1>


<p>
  Lorem Ipsum
</p>

to this:

<h1>
  Title
</h1>

<p>
  Lorem Ipsum
</p>

Whereas, with VSCode Prettier for Handlebars would convert it to this:

<h1>
  Title
</h1>
<p>
  Lorem Ipsum
</p>

I'm not sure who is wrong here, but I certainly prefer the spacing to remain.

Thoughts?

Array access in templates

Hello, great extension!

{{enum-t model attribute changes.[1]}} 
{{!-- gets formatted into --}}
{{enum-t model attribute changes.1}}

Which then causes a template compiler error... Any hints?

Also, I'm trying to run prettier in the whole directory with prettier --write app/**/*.hbs and I would like to apply all of this vscode extension prettier options, what's are them? I'm not really used to config prettier, but... I copied what you mainly had over src/extension.ts { parser: glimmer, printWidth: 120 } not sure what else I need because I noticed that when I manually format a template with this extension i.e CMD + P + format..., my unnecessary new lines gets removed (which I like), but this is not happening when running the prettier command which reads from my .prettierrc

module.exports = {
  tabWidth: 2,
  useTabs: false,
  semi: true,
  singleQuote: true,
  quoteProps: 'as-needed',
  trailingComma: 'none',
  bracketSpacing: true,
  arrowParens: 'avoid',
  proseWrap: 'preserve',
  printWidth: 100,
  overrides: [
    {
      files: '*.hbs',
      options: {
        parser: 'glimmer',
        singleQuote: false,
        printWidth: 120
      }
    }
  ]
};

Update to ^2.3.0

Hello, 👋🏼

With v2.3.0 prettier for handlebars official release, I was wondering if we could update the prettier dependency?

Thanks