React开发遇到的问题

编写js代码时，一保存注释和代码就会跑到一行，或多行代码会变成一行是什么原因，插件的问题吗
（保存时会自动格式化代码）
保存前

<body>
    <div id="test"></div>

    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">
        // 创建函数式组件 
        function demo(){ }
    </script>
</body>

<script type="text/babel">
        const data = ['Angular', 'React', 'Vue']; 
        const VDOM = (
            <div>
                <h1>框架列表</h1>
                <ul>
                    { 
                        data.map((item,index) => { 
                            return <li key={index}> {item} </li>
                        }) 
                    }
                </ul>
            </div>
        ); 
        ReactDOM.render(VDOM,document.getElementById("test"));
    </script>

保存后

<body>
    <div id="test"></div>

    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">
        // 创建函数式组件  function demo(){ }
    </script>
</body>

<script type="text/babel">
        const data = ['Angular', 'React', 'Vue']; const VDOM = (
        <div>
            <h1>前端JS框架列表</h1>
            <ul>
                { data.map((item,index) => { return
                <li key={index}> {item} </li>
                }) }
            </ul>
        </div>
        ); ReactDOM.render(VDOM,document.getElementById("test"));
    </script>

是用的vscode 编辑器嘛？
大部分原因是因为插件导致的
你可以参考下下面这篇文章是不是因为插件JS-CSS-HTML Formatter导致的问题

vsc标签script的type=“text/babel“时自动保存格式化代码时总为一行,或者注释不了_の信仰的博客-CSDN博客代码保存前代码保存后，代码出现换行，且注释出错原因和解决这种问题大概率就是vscode设置或插件导致的，经过几个小时的查找，最终是因为插件JS-CSS-HTML Formatter导致的，把它禁用就可以了...

https://blog.csdn.net/qq_45260597/article/details/119315905

插件导致的。装了格式化插件吧