Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Handlebars inside <script> too many spaces

See original GitHub issue

Description

When handlebars tags are included inside <script>-tags spaces are added around the curly braces which destroys the handlebars ability to compile. Anyone have a solution? Thanks!

Input

The code looked like this before beautification:

<script type="text/javascript">
var data;
    data = {{handlebarsVariable}};
</script>

Expected Output

The code should have looked like this after beautification:

<script type="text/javascript">
var data;
data = {{handlebarsVariable}};
</script>

Actual Output

The code actually looked like this after beautification:

<script type="text/javascript">
var data;
data = { { handlebarsVariable } };
</script>

Steps to Reproduce

Environment

OS: Linux Ubuntu IDE: Sublime build 3126 Plugin: Sublime-HTMLPrettify (https://github.com/victorporof/Sublime-HTMLPrettify)

Settings

Example:

{
  // The plugin looks for a .jsbeautifyrc file in the same directory as the
  // source file you’re prettifying (or any directory above if it doesn’t exist,
  // or in your home folder if everything else fails) and uses those options
  // along the default ones.

  // Details: https://github.com/victorporof/Sublime-HTMLPrettify#using-your-own-jsbeautifyrc-options
  // Documentation: https://github.com/einars/js-beautify/
  "html": {
    "allowed_file_extensions": ["htm", "html", "xhtml", "shtml", "xml", "svg", "path", "hbs"],
    "brace_style": "collapse", // [collapse|expand|end-expand|none] Put braces on the same line as control statements (default), or put braces on own line (Allman / ANSI style), or just put end braces on own line, or attempt to keep them where they are
    "end_with_newline": false, // End output with newline
    "indent_char": " ", // Indentation character
    "indent_handlebars": true, // e.g. {{#foo}}, {{/foo}}
    "indent_inner_html": false, // Indent <head> and <body> sections
    "indent_scripts": "keep", // [keep|separate|normal]
    "indent_size": 2, // Indentation size
    "max_preserve_newlines": 0, // Maximum number of line breaks to be preserved in one chunk (0 disables)
    "preserve_newlines": true, // Whether existing line breaks before elements should be preserved (only works before elements, not inside tags or for text)
    "unformatted": ["a", "span", "img", "code", "pre", "sub", "sup", "em", "strong", "b", "i", "u", "strike", "big", "small", "pre", "h1", "h2", "h3", "h4", "h5", "h6"], // List of tags that should not be reformatted
    "wrap_line_length": 0 // Lines should wrap at next opportunity after this number of characters (0 disables)
  },
  "css": {
    "allowed_file_extensions": ["css", "scss", "sass", "less"],
    "end_with_newline": false, // End output with newline
    "indent_char": " ", // Indentation character
    "indent_size": 2, // Indentation size
    "newline_between_rules": false, // Add a new line after every css rule
    "selector_separator": " ",
    "selector_separator_newline": false // Separate selectors with newline or not (e.g. "a,\nbr" or "a, br")
  },
  "js": {
    "allowed_file_extensions": ["js", "json", "jshintrc", "jsbeautifyrc"],

    // Set brace_style
    //  collapse: (old default) Put braces on the same line as control statements
    //  collapse-preserve-inline: (new default) Same as collapse but better support for ES6 destructuring and other features. https://github.com/victorporof/Sublime-HTMLPrettify/issues/231
    //  expand: Put braces on own line (Allman / ANSI style)
    //  end-expand: Put end braces on own line
    //  none: Keep them where they are
    "brace_style": "collapse-preserve-inline",

    "break_chained_methods": false, // Break chained method calls across subsequent lines
    "e4x": false, // Pass E4X xml literals through untouched
    "end_with_newline": false, // End output with newline
    "indent_char": " ", // Indentation character
    "indent_level": 0, // Initial indentation level
    "indent_size": 4, // Indentation size
    "indent_with_tabs": false, // Indent with tabs, overrides `indent_size` and `indent_char`
    "jslint_happy": false, // If true, then jslint-stricter mode is enforced
    "keep_array_indentation": false, // Preserve array indentation
    "keep_function_indentation": false, // Preserve function indentation
    "max_preserve_newlines": 0, // Maximum number of line breaks to be preserved in one chunk (0 disables)
    "preserve_newlines": true, // Whether existing line breaks should be preserved
    "space_after_anon_function": false, // Should the space before an anonymous function’s parens be added, "function()" vs "function ()"
    "space_before_conditional": true, // Should the space before conditional statement be added, "if(true)" vs "if (true)"
    "space_in_empty_paren": false, // Add padding spaces within empty paren, "f()" vs "f( )"
    "space_in_paren": false, // Add padding spaces within paren, ie. f( a, b )
    "unescape_strings": false, // Should printable characters in strings encoded in \xNN notation be unescaped, "example" vs "\x65\x78\x61\x6d\x70\x6c\x65"
    "wrap_line_length": 0 // Lines should wrap at next opportunity after this number of characters (0 disables)
  }
}

Issue Analytics

State:
Created 6 years ago
Reactions:2
Comments:5 (3 by maintainers)

Top GitHub Comments

1reaction

bitwisemancommented, Jul 18, 2019

This can be controlled by the templating: 'handlebars' setting added in 1.10.0

1reaction

bitwisemancommented, Jul 25, 2017

This would be a subset of #660. HTML beautifier does some support for handlebars, but js beautifier does not. The code inside the script tag is processed using the js beautifier.

Top Results From Across the Web

Handlebarjs removing white space handling, but need to keep ...

It's removes any continuous spaces, line breaks and tabs. If you have double spaces between words, it will remove all space between them,...

Expressions | Handlebars

Handlebars expressions are some contents enclosed by double curly braces {{}} . In the below template, firstname is a variable that is enclosed ......

Remove Extra Spaces From a String in JavaScript or Node.js

This tutorial shows you how to remove extra spaces from a string. Removing extra spaces results in a string value where words are...

Handlebars

This guide covers the YUI port of Handlebars, which differs from the original Handlebars in only a few minor ways and is kept...

Handlebars Helpers for Custom Templates - HelpDocs Support

You prefix the helper name with a hash, and write extra HTML (or even more Handlebars) inside. Then use an else block for...