Skip to content

Incorrect indentation for TSX (JSX) #138

Open
@knpwrs

Description

@knpwrs

Observe: https://asciinema.org/a/42J9ciXzTLLWNTj0LOvPG3OkO

The following is the session from the above recording:

function sum(...numbers: number[]): number {
  console.log('Hello, World!');
  console.log('Indentation works!');
  return numbers.reduce((s, n) => s + n, 0);
}

export function renderFunc() {
  return (
    <div>
      <h1>hello</h1>
    <h2>Oh no!</h2>
    </div>
  )
}

export const renderArrow = () => (
  <div>
    <h1>hello</h1>
  <h2>Sadness!</h2>
  </div>
);

The console.log lines were inserted one after another by pressing o and typing -- indentation works fine. The <h2> lines were added by pressing o and typing -- indentation always goes to the root level.

If I have the following...

function render() {
  return (
  <div>
    <h1>hello</h1>
    <div>
      <div>
      </div>
    </div>
  </div>
  );
}

...and I press o on the inner-most div tag, I end up in a situation as such:

function render() {
  return (
  <div>
    <h1>hello</h1>
    <div>
      <div>
  // Cursor ends up all the way back here!
      </div>
    </div>
  </div>
  );
}

This makes typing JSX really hard. In jsx files with pangloss/vim-javascript indentation works just fine in the same situation: https://asciinema.org/a/f4I4gd5skmJvuhrzay3n4KnmF

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions