VS Code - 格式化时如何对齐标签结束和标签打开？ （JSX）

Question

我不知道这是否是VS Code的默认行为，（我在默认情况下有很多自定义配置）

但是当我格式化代码时，它会转换这样的代码：

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

进入：

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

我的es-lint会发出警告[eslint] The closing bracket must be aligned with the line containing the opening tag (expected column 5) (react/jsx-closing-bracket-location)

如何调整它以使其与标签开始正确对齐？

注意，文件在.js文件中使用JSX，我配置了VS代码accordingly。

Answer 1

VSCode使用下面的https://github.com/Microsoft/TypeScript进行自动格式化。

针对您遇到的同一问题，TypeScript repo中最近出现了一个问题：https://github.com/Microsoft/TypeScript/issues/8663

此更改尚未反映到VSCode稳定版本，但使用当前版本的VSCode Insiders（https://code.visualstudio.com/insiders），标记对齐结束括号。

您可以下载并使用VSCode Insiders或更改您的eslint规则以使用 props-aligned 括号，直到它成为稳定版本：

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