VS Code - How to align tag end and tag opening when formatting? (JSX)

Question

I don't know if this is the default behavior for VS Code, (I have a lot of custom config on top of the default)

But when I format the code, it transforms such code:

  const simpleInput = (
    <Input
      {...input}
      {...others}
      state={state}
    />
  );

Into :

  const simpleInput = (
    <Input
      {...input}
      {...others}
      state={state}
      /> <- Here is the difference
  );

And my es-lint throw a warning about it [eslint] The closing bracket must be aligned with the line containing the opening tag (expected column 5) (react/jsx-closing-bracket-location)

How can I tweak it so it aligns properly with the tag start?

Note than the file is using JSX in a .js file, I configured VS code accordingly.

Answer 1

VSCode uses https://github.com/Microsoft/TypeScript underneath for auto formatting.

There is a recently closed issue in TypeScript repo for the same problem you have: https://github.com/Microsoft/TypeScript/issues/8663

The changes have not been reflected to VSCode Stable version yet, but with current version of VSCode Insiders (https://code.visualstudio.com/insiders) it tag-aligns the closing bracket.

You can download and use VSCode Insiders or change your eslint rule to use props-aligned brackets until it makes to the stable release:

"react/jsx-closing-bracket-location": [ "warning", "props-aligned" ],