相关疑难解决方法(0)

我在index.js中有以下代码段

class App extends Component {
render() {
    return ( <div style = { styles.app } >
        Welcome to React!
        </div>
    )
}

}
代码工作,但每次我保存(Ctrl + S)的Visual Studio格式的JSX这样的:

class App extends Component {
render() {
    return ( < div style = { styles.app } >
        Welcome to React!
        <
        /div>
    )
}

}

我怎么解决这个问题？谢谢

我不知道这是否是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代码相应.

当我保存这个文件时，Ctrl+s甚至在可视代码中使用更漂亮的和其他 JavaScript 扩展片段，我得到了这个显示错误的变形代码

并将错误显示为：

JSX 元素div没有相应的结束标记。
JSX 元素Navbar没有相应的结束标记。
JSX 元素NavbarBrand没有相应的结束标记。
预期标识符。
>预期的。