Incorrect indentation for TSX (JSX) #138
Description
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