Prettier格式化JavaScript代码异常导致Todo组件无法导入至App.js的求助

Let’s tackle this frustrating issue where Prettier is incorrectly formatting your closing </div> tag as < /div>—that extra space breaks valid JSX, which is why your import into app.js is failing. Here’s how to fix it step by step:

1. Check for Project-Specific Prettier Configs #

First, verify if there’s a local Prettier configuration file (like .prettierrc, .prettierrc.json, or prettier.config.js) in your project root. Local configs often override VS Code’s global settings and can cause unexpected formatting quirks. If you find one, scan it for any rules that might affect JSX tag spacing (though this is rare, it’s worth eliminating as a culprit).

2. Tweak VS Code’s Prettier Settings for JSX #

Add these JSX-specific rules to your existing settings.json to enforce proper tag formatting:

"prettier.jsxBracketSameLine": false,
"prettier.printWidth": 80,
"[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
}

These lines ensure Prettier handles JSX tags consistently without inserting unwanted spaces in closing brackets, and explicitly sets it as the default formatter for React files.

3. Disable Conflicting Formatting Extensions #

Other formatting plugins (like ESLint with auto-formatting enabled, or alternative JS/JSX formatters) can clash with Prettier. Head to your VS Code extensions list, and make sure no other formatters are enabled for .js or .jsx files. Only keep esbenp.prettier-vscode active for these file types.

4. Update the Prettier Extension #

Outdated versions of the Prettier VS Code extension sometimes have bugs that cause formatting glitches. Go to the extensions panel, search for "Prettier - Code formatter", click "Update" if an update is available, then restart VS Code.

5. Test with a Clean React Component #

After applying these fixes, rewrite your todo.js component to a clean version:

import React from "react";

export const Todo = () => {
  return <div>Todo works!</div>;
};

Save the file—Prettier should now format it correctly, with no extra space in the closing </div> tag. You’ll be able to import this component into app.js without issues.

If none of these steps work, try backing up your settings.json and resetting VS Code settings to default temporarily to rule out any misconfigured settings causing the problem.

内容的提问来源于stack exchange，提问作者jnpinu