VS Code中如何高亮HTML内未在TS声明的Angular变量

要达到和WebStorm一致的、模板内未在对应TS声明的变量标红提示效果，按以下步骤配置即可：

1. 安装官方Angular语言服务插件 #

直接在VS Code插件市场搜索安装Angular Language Service，这是Angular官方维护的语法校验插件，是实现模板类型检查的基础，不要使用第三方同类型替代插件，避免校验规则冲突。

2. 开启Angular严格模板类型检查 #

VS Code的模板错误提示依赖Angular编译器的类型检查能力，默认非严格模式下不会上报未声明变量类的错误，需要修改项目根目录的tsconfig.json文件，添加/修改对应配置：

{
  "compilerOptions": {
    // 保留原有compilerOptions配置即可，建议同步开启全局严格模式
    "strict": true
  },
  "angularCompilerOptions": {
    "strictTemplates": true,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true
  }
}

其中strictTemplates: true是核心配置，开启后编译器会完整校验模板里的变量、方法、输入输出属性是否和TS类中声明的一致。

3. 调整VS Code本地设置 #

• 打开VS Code设置面板，搜索angularLanguageService.enable，确认配置项为勾选状态
• 打开任意组件的html文件，查看VS Code右下角的语言模式，确认是Angular HTML而非普通HTML，如果不对手动切换即可
• 搜索files.associations配置，添加规则*.component.html: angular-html，避免普通HTML校验插件抢占Angular模板的校验权
• 如果你之前安装过第三方Angular语法提示、片段类插件，建议临时禁用做排查，这类插件经常会和官方语言服务冲突导致校验失效

4. 重载窗口生效 #

配置完成后打开命令面板（快捷键Ctrl+Shift+P/Cmd+Shift+P），执行Reload Window重载窗口，之后在模板中写未在TS类中声明的变量、不存在的方法时，就会出现和WebStorm一致的红色错误波浪线提示。

常见问题排查 #

• 如果你的项目是Angular 9以下的老版本（未启用Ivy渲染引擎），需要安装适配老版本的Angular Language Service v12及以下版本，高版本插件不再支持老渲染引擎的校验
• 如果是多项目工作区，要确认修改的是当前启动项目对应的tsconfig.json，不要改到根目录冗余的配置文件
• 不要在angularCompilerOptions中手动添加fullTemplateTypeCheck: false这类关闭校验的配置

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