如何防止JSX代码中的插入空格

Question

我刚开始学习React Native。我正在使用Visual Studio代码进行编辑。 每当我保存文件时，它都会在我的JSX代码中插入空格。这降低了代码的可读性。 这是我保存文件之前的代码

保存文件前：

保存后为File：

我已尝试编辑VS代码设置

    const UniformsHello = () => {

  let formRef;

  return(

    function handleSubmission(doc,formRef){
        Submissions.insert(doc);
    formRef.reset();
    }

    <div>
      <h1>Submit a track</h1>
      <AutoForm
        ref={ref => formRef = ref}
        schema={PostSchema}
        onSubmit={handleSubmission(doc,formRef)}
        placeholder={true}>

          <AutoField name="Song name" />
          <AutoField name="Album title" />
          <AutoField name="Soundcloud URL" />
          <LongTextField name="Story" />

          <div className="super-special-class">
              <SubmitField className="super-special-class-with-suffix" />
          </div>
      </AutoForm>
    </div>
  );

 }

export default UniformsHello;

但它没有帮助。

这个问题有解决办法吗？

Answer 1

我设法通过手动将文件的语言更改为javascriptreact而不是javascript来解决此问题。

截图：

Answer 2

或者您也可以重命名文件，将其扩展名从.js更改为.jsx，VSCode会理解该文件为React。

Answer 3

我遇到了这个问题，我通过禁用 js-css-html formatter 扩展名并关闭vs代码并重新启动来解决了问题