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)

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

注意,除了该文件被使用JSX在.js文件中,我配置VS代码相应.

Answer 1

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

对于与您遇到的相同问题，TypeScript 存储库中最近有一个已关闭的问题： https: //github.com/Microsoft/TypeScript/issues/8663

这些更改尚未反映到 VSCode 稳定版本，但在当前版本的 VSCode Insiders ( https://code.visualstudio.com/insiders ) 中，它会标记对齐右括号。

您可以下载并使用 VSCode Insiders 或更改 eslint 规则以使用props 对齐的括号，直到发布稳定版本：

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