使用Beautify或Prettier的VSCode：由于扩展而导致的代码错误或格式化

如何解决使用Beautify或Prettier的VSCode：由于扩展而导致的代码错误或格式化

当我将“更漂亮”或“美化为”内的设置更改为“是”时，选中了“保存时格式化”复选框。

代码来自于此：

    import React,{useEffect,useState} from "react";
    import "./App.css";


const App = () => {
    
    const APP_ID = "0000";
    const APP_KEY = "00000";

    const exampleReq = 'somewebsite.com';

    const [counter,setCounter] = useState(0);

    useEffect(() => {
        console.log("Effect has been run");
    });


    return ( 
        <div className="RecipeApp">
        <form className="search-form">
        <input className="search-bar" type = "text"> Search </input>  
        <button className="search-button" type="submit" > Search </button>  
        </form> 
        <div> </div>
        </div>    
        );   
}

export default App;

对此：2个特定部分。

    //top 
    import React,{
    useEffect,useState
} from "react";

return ( <
    div className = "RecipeApp" >
    <
    form className = "search-form" >
    <
    input className = "search-bar"
    type = "text" > Search < /input>   <
    button className = "search-button"
    type = "submit" > Search < /button>   <
    /form>  <
    div > < /div> <
    /div>    
);

我相信我在代码中犯了一个错误，或者...其他。请让我知道。

更新。这是一个直观的示例。

enter image description here