VSCode中HTML文件Intellisense无法自动补全.ts变量如何解决？

排查步骤 #

• 校验Angular Language Service运行状态：打开任意组件对应的HTML文件，按Ctrl+Shift+P（Mac为Cmd+Shift+P）执行Angular: Open Angular Server Log，确认服务没有报错启动失败。如果服务启动失败，优先排查扩展版本与VSCode版本适配性。
• 检查扩展配置：打开Angular Language Service扩展的设置页，确认angular.languageService.enable处于开启状态，同时根据项目Angular版本调整angular.languageService.legacyViewEngine开关：Angular 9及以上版本使用Ivy编译，需关闭该开关；Angular 8及以下版本需开启该开关。
• 核对项目tsconfig配置：打开项目根目录的tsconfig.json或tsconfig.app.json，确认include数组包含.html文件匹配规则，示例配置如下：

  "include": [
    "src/**/*.ts",
    "src/**/*.html"
  ]
  

  同时确认compilerOptions.strictTemplates未被强制设置为false，该配置会关闭模板类型检查与关联补全。
• 排查扩展冲突：临时禁用所有非核心扩展（仅保留Angular Language Service、Visual Studio IntelliCode），重启VSCode验证补全是否恢复，逐一开启扩展定位冲突项。
• 校验编辑器补全配置：打开VSCode设置页，搜索editor.suggest.showVariables、editor.suggest.showProperties，确认两项配置均处于开启状态。

修复方案 #

• 重启Angular Language Service：按Ctrl+Shift+P执行Angular: Restart Angular Language server，等待服务重启完成后验证补全功能。
• 重新安装适配版本扩展：你使用的VSCode 1.60.2为 legacy 版本，需安装适配的Angular Language Service v12.x.x版本，不要安装最新版扩展，避免版本不兼容导致功能失效。
• 清理缓存：
  1. 删除Angular Language Service本地缓存：根据操作系统删除对应目录：
     • Windows：%APPDATA%\Code\User\globalStorage\angular.ng-template
     • Mac：~/Library/Application Support/Code/User/globalStorage/angular.ng-template
     • Linux：~/.config/Code/User/globalStorage/angular.ng-template
  2. 删除项目缓存：删除项目根目录下的.angular文件夹、node_modules/.cache文件夹，重启VSCode重新加载项目。
• 重置工作区配置：如果以上操作都无效，打开工作区.vscode/settings.json，删除所有和HTML、Angular、补全相关的自定义配置，重启窗口验证。

内容的提问来源于stack exchange，提问作者Usr