寻求支持Angular模板@Input()属性自动补全的VSCode智能提示扩展

实现Angular模板@Input()自动补全与校验方案 #

你对Angular Language Service的认知存在偏差，官方这个扩展本身就完整支持你需要的@Input()属性自动补全、必填属性校验能力，无需额外安装其他扩展，多数情况下是配置未正确开启导致功能无法使用：

配置步骤 #

1. 确认你已经安装了VSCode官方扩展「Angular Language Service」
2. 打开VSCode设置页面，搜索angular.langservice，调整以下配置：
   • angular.suggest.includeComponentInputCompletions 设为 true
   • angular.completion.strictTemplates 设为 true
3. 打开项目根目录的tsconfig.json，在angularCompilerOptions下新增以下配置开启严格模板校验：

{
  "angularCompilerOptions": {
    "strictTemplates": true,
    "strictInputAccessModifiers": true
  }
}

配置完成后重启VSCode即可获得和React完全一致的开发体验：

• 输入自定义组件标签后会自动弹出所有@Input()定义的属性补全列表
• 遗漏必填@Input()（未标记为可选属性）时，模板内的组件标签会被标红，报错逻辑和你举例的TS 2741报错完全一致

如果需要额外的模板片段补全能力，可以安装「Angular Snippets」扩展，和官方语言服务配合使用体验更佳。

内容的提问来源于stack exchange，提问作者Joel'-'