lit组件在vscode中模板报红、属性不补全、html标签无高亮，是因lit-plugin默认自动启用导致误判及ts配置缺失；需禁用自动启用、正确配置files.associations、仅在lit文件手动启用，并确保tsconfig.json含resolvejsonmodule和jsx: "preserve"。

Lit 组件在 VSCode 里模板报红、属性不补全、html 标签没高亮？不是你代码写错了，是插件默认行为和项目配置没对齐。

lit-plugin 自动启用导致 JS/TS 文件误报错

lit-plugin 默认一打开含 html` 字符串的文件就激活，不管你是写 React、Vue 还是普通工具函数。结果就是：Expected expression、Invalid lit-html template 这类错误满屏飘，但实际运行完全正常。

VSCode

避免常见的 VSCode 错误——设置冲突、调试器配置和扩展冲突。

下载

• 打开 VSCode 设置（Cmd+, 或 Ctrl+,），搜索 lit-plugin: Enabled，**取消勾选**
• 再搜 files.associations，添加这两行（防止它把 .ts 当 HTML 解析）：

  "*.ts": "typescript",<br>"*.js": "javascript"

• 重启窗口后，只在真正含 html` 或 css` 的 Lit 文件里手动启用：按 Cmd+Shift+P → 输入 lit-plugin: Enable in this workspace

TS 配置缺失导致 classMap、ifDefined 等指令不识别

lit-plugin 依赖 TypeScript 语言服务提供属性提示。如果 tsconfig.json 少了关键项，.value=${ 后面光标停住就没补全，html`<div> 也压根不提示事件参数。 <ul> <li>确认 <code>tsconfig.json 中有：

"resolveJsonModule": true

（Lit 类型声明依赖 JSON 模块）

如果是 TS 项目，"jsx": "preserve" 必须存在（否则 TS 不认为 html` 是 JSX-like 结构）

JS 项目也要配 jsconfig.json，且至少包含：

"checkJs": true,<br>"allowJs": true

改完配置后，务必执行命令面板里的 Restart TS Server

Cannot find module 'lit' 报红，连基础 API 都没提示

很多人新建项目后直接开写，npm install -g lit 或只装 lit 却漏掉类型包，VSCode 的 TS 语言服务就找不到定义——所有 html、css、render 全标红。

• 进项目根目录，运行：

  npm install lit @types/lit

  （Lit v3+ 虽已内置类型，但 VSCode 仍需 @types/lit 才能稳定工作）
• 检查 node_modules/lit 是否真实存在；若用 pnpm，确认 pnpm store 没被误删或隔离
• 别信“全局安装一次就够了”，VSCode 的语言服务只认当前工作区 node_modules

最容易被忽略的是：改完 tsconfig.json 或装完依赖后，不重启 TS Server，也不重启 VSCode 窗口——这两个动作缺一不可，否则所有配置都白调。