phpstorm 或者 VScode 代码格式化问题

代码格式化会自动 分割标签 有人知道这是为什么吗？ 或者安装什么插件可以解决
预期效果

 <div class="mx-auto text-[2.125rem] tracking-[0.2rem] text-[#262a42]"> 我们的号码可以转去绝大多部分热门运营商</div>
            <div class="mx-auto w-8 h-1.5 my-4 bg-blue-500"></div>
            <div class="mx-auto tracking-widest">优先支持但不仅限于展示运营商</div>

实际效果

     <li class="mb-4">
                            <label
                                class="flex items-center border rounded-lg p-3 sm:p-4"
                                :class="{'border-[#1d78ff] drop-shadow-sm' :tab=== 2 }"
                                @click="tab= 2"
                            >
                                <img
                                    src="{{asset('images/4_12.png')}}"
                                    class="w-[40px] sm:w-[80px]"
                                />
                                <div class="flex-1">微信支付</div>
                                <input type="radio" name="radio" class="outline-none" />
                            </label>
                        </li>
                        <li class="mb-4">
                            <label
                                class="flex items-center border rounded-lg p-3 sm:p-4"
                                :class="{'border-[#1d78ff] drop-shadow-sm' :tab=== 3 }"
                                @click="tab= 3"
                            >
                                <img
                                    src="{{asset('images/4_11.png')}}"
                                    class="w-[40px] sm:w-[80px]"
                                />
                                <div class="flex-1">支付宝支付</div>
                                <input type="radio" name="radio" class="outline-none" />
                            </label>
                        </li>