Prettier 没有正确格式化 java 脚本代码

Question

import React from "react";
export const todo = () => { 
return <div > todo works! < /div>;
};

this is my settings.json code of Prettier,

    {
  "workbench.editorAssociations": {
    "*.ipynb": "jupyter.notebook.ipynb",
    "*.class": "default"
  },
  "workbench.iconTheme": "vscode-icons",
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

  "C_Cpp.updateChannel": "Insiders",
  "code-runner.runInTerminal": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.suggestSelection": "first",
  "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
  "files.exclude": {
    "**/.classpath": true,
    "**/.project": true,
    "**/.settings": true,
    "**/.factorypath": true
  },
  "editor.formatOnType": true,
  "editor.formatOnPaste": true,
  "workbench.colorTheme": "Material Theme Ocean",
  "[java]": {
    "editor.defaultFormatter": "redhat.java"
  },
  "[kotlin]": {
    "editor.defaultFormatter": "fwcd.kotlin"
  },
  "editor.formatOnSave": true,
  "workbench.editor.defaultBinaryEditor": "default"
}

When I save and format the code, there's always a space between the opening tag and the back slash of div/. due to this error occurring and I am unable to import the todo.js file into the main app.js file.

Answer 1

Try using the beautify extension. Find it in extensions and download. Then switch your default formatter to beautify.

Answer 2

Add this to your settings.json

"[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
"[javascriptreact]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
"[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
"[typescriptreact]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },