如何将Jsx格式化成原来的样子

Question

我的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。我如何返回到正常的代码？所有在线格式化程序都不起作用。

Answer 1

1.安装Prettier

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

2.设置格式化程序

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

​

​

3.更改语言模式

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

​

​

Answer 2

只需将这一行添加到您的vscode：

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