执行ng add @angular/material后VSCode无Material CSS类智能提示

执行ng add @angular/material后没有mat-前缀类名补全，核心原因是VSCode默认不会主动扫描node_modules下的第三方库样式文件，按以下步骤配置即可修复：

• 安装基础补全扩展
  在VSCode扩展商店搜索安装HTML CSS Support，这是HTML中class属性智能补全的基础依赖。
• 配置样式扫描路径
  按Ctrl+,（macOS为Cmd+,）打开设置，点击右上角的打开设置JSON按钮，在配置项中添加如下内容，让扩展识别Angular Material的样式文件：

  "css.styleSheets": [
    // 替换成你实际使用的Material预构建主题名，可选值：indigo-pink、deeppurple-amber、pink-bluegrey、purple-green
    "node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
    "node_modules/@angular/material/**/*.css",
    // 如果使用自定义Material主题，追加你全局主题文件的相对路径即可
    "src/styles.scss"
  ]
  

• 适配Angular语言服务配置
  如果安装了官方Angular Language Service扩展，额外在settings.json中添加以下配置，开启外部样式类补全能力：

  "angularLanguageService.enableStyleClassCompletions": true,
  "angularLanguageService.scanExternalStylesheets": true
  

• 重载窗口生效
  按Ctrl+Shift+P（macOS为Cmd+Shift+P）调出命令面板，执行Developer: Reload Window重载VSCode窗口，回到HTML文件输入class="mat-即可看到所有Material相关CSS类的智能提示，包括mat-display-*排版类、mat-elevation-*阴影类等。

注意：如果补全依然不生效，检查angular.json中是否已经正确把Material主题文件加入到了build.options.styles配置数组中，路径配置错误也会导致扩展无法读取样式内容。

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