如何将 Jsx 格式化回原来的格式 [重复]答案

【问题标题】：How to Format Jsx back too what it used to be [duplicate]如何将 Jsx 格式化回原来的格式 [重复]
【发布时间】：2025-12-28 15:05:06
【问题描述】：

我的 jsx 看起来像这样：

 div className = "App" >
        <
        Navbar / >
        <
        main className = "main-content position-relative max-height-vh-100 h-100 mt-1 border-radius-lg " >

        {
            /* nav show */ } <
        nav className = "navbar navbar-main navbar-expand-lg px-0 mx-4 shadow-none border-radius-xl"
        id = "navbarBlur"
        navbar - scroll = "true" >
        <
        div className = "container-fluid py-1 px-3" >
        <
        nav aria - label = "breadcrumb" >
        <
        ol className = "breadcrumb bg-transparent mb-0 pb-0 pt-1 px-0 me-sm-6 me-5" >
        <
        li className = "breadcrumb-item text-sm" >
        <
        a className = "opacity-5 text-dark"
        href = "javascript:;" >
        Pages <
        /a> < /

我已卸载所有格式化程序。我正在使用vscode。如何恢复正常代码？所有在线格式化程序都不起作用。

【问题讨论】：

Ctrl + Z 不起作用？
文件是.js 还是.jsx？真的应该避免.js，工具更难检测到你正在使用的东西。它也不是有效的 JS，所以它不应该在 .js 文件中。这可能是你的问题。

标签： javascript reactjs

【解决方案1】：

1。安装 Prettier

这里是链接：https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

2。设置格式化程序

按Ctrl + Shift + P 并选择Format Document With...。然后选择更漂亮。

3。更改语言模式

在底部更改为 Javascript React 的格式。

【讨论】：

【解决方案2】：

只需将此行添加到您的 vscode：

setting.json    
{
 "editor.formatOnSave": true
}

【讨论】：