VS Code - 格式化时如何对齐标签结尾和标签开头？ (JSX)

Posted 2023-02-21

【中文标题】VS Code - 格式化时如何对齐标签结尾和标签开头？ (JSX)

【英文标题】：VS Code - How to align tag end and tag opening when formatting? (JSX)

【发布时间】：2017-05-16 15:38:40

【问题描述】：

我不知道这是否是 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。

【参考方案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" ],

【讨论】：

这是一种解决方法，而不是解决方案。不过感谢分享，有助于更好地理解问题！ :)