VS Code中TypeScript JSX里div标签无法自动闭合问题

算力阿峰

2026-6-25

Next.js App Router项目中VS Code的div标签自动闭合异常

问题描述

在VS Code搭建的Next.js App Router项目里出现以下异常情况：

在React组件的JSX表达式{}内输入<div>起始标签时，无法自动闭合；其他标签（如<span>、<a>等）可正常自动闭合
该问题仅出现在特定代码片段中，普通TypeScript JSX文件里div标签可正常自动闭合

相关代码

"use client";

import type { chats as chatsSchema } from "@/server/db/schema";
import type { InferSelectModel } from "drizzle-orm";
import { type Session } from "next-auth";
import Link from "next/link";
import { Button } from "./ui/button";
import { IconPlus } from "./ui/icons";

export function Sidebar({
  chats,
  session,
}: {
  chats: InferSelectModel<typeof chatsSchema>[];
  session: Session | null;
}) {
  return (
    <div className="relative h-full w-[239px] overflow-y-auto overflow-x-hidden">
      {!session && (
        <div>
          <span>Log in to save chat history</span>
          <Button variant="link" asChild className="-ml-2">
            <Link href="/login">Login</Link>
          </Button>
        </div>
      )}
      <Button asChild>
        <a href="/">
          <IconPlus className="-translate-x-2 stroke-2" />
          New Chat
        </a>
      </Button>
      {session && <div>} {/* 此处div标签无法自动闭合 */}
    </div>
  );
}