Skip to content

[js/ts] Indentation inside multi-line template strings #261

@rictic

Description

@rictic

Consider a user trying to write:

function render() {
  return html`
      <div>
          <span>
              Hello world
          </span>
      </div>
  `;
}

user gets to here (where | represents their insertion cursor) and presses enter:

function render() {
  return html`|
}
function render() {
  return html`
      |
}

Good so far. That's pretty reasonable. But by the third line an issue becomes clear:

function render() {
  return html`
      <div>
          <span>|
}
function render() {
  return html`
      <div>
          <span>
      |
}

The best outcome would be to use the inline language's indentation information, so that the outcome was

function render() {
  return html`
      <div>
          <span>
              |
}

A simpler and almost-as-good option would be to just copy the indentation of the previous line of the template literal:

function render() {
  return html`
      <div>
          <span>
         |
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions