visual-studio-code - 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 代码 accordingly .

Answer 1

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

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

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

您可以下载并使用 VSCode Insiders 或更改您的 eslint 规则以使用 Prop 对齐 括号直到它稳定发布:
"react/jsx-closing-bracket-location": [ "warning", "props-aligned" ],