VSCode中Angular新控制流语法高亮与缩进失效求助

• 检查ESLint与Nx的新控制流支持

  • 确保@angular-eslint/eslint-plugin、@angular-eslint/eslint-plugin-template、@angular-eslint/template-parser为适配Angular 17+的最新版本，执行npm update @angular-eslint/*完成更新
  • 运行nx migrate latest升级Nx Angular插件，保证Nx的lint配置能识别新控制流语法
  • 在项目根目录的.eslintrc.json中，确认HTML模板解析配置正确：

    {
      "overrides": [
        {
          "files": ["*.html"],
          "parser": "@angular-eslint/template-parser",
          "plugins": ["@angular-eslint/template"]
        }
      ]
    }
    

• 调整VSCode扩展与编辑器配置

  • 禁用可能冲突的原生HTML Language Features扩展，仅保留vscode-angular-html-inline和Angular官方扩展（Angular Language Service）
  • 在VSCode的settings.json中指定HTML文件的格式化器与自动修复规则：

    "[html]": {
      "editor.defaultFormatter": "dbaeumer.vscode-eslint",
      "editor.formatOnSave": true,
      "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
      }
    }
    

  • 执行Ctrl+Shift+P -> Developer: Reload Window重启VSCode，清除扩展缓存

• 配置Prettier兼容新控制流

  • 安装最新版prettier-plugin-angular：npm install prettier-plugin-angular --save-dev
  • 在.prettierrc.js中指定插件与Angular模板解析器：

    module.exports = {
      plugins: ['prettier-plugin-angular'],
      overrides: [
        {
          files: "*.html",
          options: {
            parser: "angular"
          }
        }
      ]
    }
    

• 修复依赖缓存问题

  • 删除node_modules、package-lock.json（或yarn.lock），重新执行npm install安装依赖
  • 运行nx lint <project-name>验证语法检查是否正常识别新控制流

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