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.

CodePudding user response：

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

CodePudding user response：

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" },