Angular12迁移ESLint后.ts文件不校验、HTML报Unexpected token <错误

1. 解决.ts文件无ESLint校验问题 #

• 首先删除TS配置块内的eslint-plugin-html插件引用：该插件用于处理普通HTML文件，放在*.ts对应的overrides配置中会干扰TypeScript解析器的正常工作，直接将其从ts配置的plugins数组中移除即可。
• 验证命令行执行结果：在项目根目录执行npx eslint src/**/*.ts，如果命令行能正常抛出ESLint错误，说明是WebStorm配置问题，否则继续排查配置文件。
• 检查WebStorm ESLint配置：进入设置 > 语言和框架 > JavaScript > 代码质量工具 > ESLint，确认选择「自动ESLint配置」，或手动指定正确的ESLint安装包路径、配置文件路径，同时确认校验范围包含了你的业务代码目录。
• 校验tsconfig配置：确认tsconfig.json的include字段包含了所有需要校验的.ts文件路径，没有被exclude字段屏蔽。

2. 解决HTML文件首行Unexpected token <报错问题 #

• 完全移除eslint-plugin-html插件：你已经使用@angular-eslint/template系列规则专门处理Angular模板文件，eslint-plugin-html会默认用JavaScript解析器处理HTML文件，碰到<开头的模板标签就会抛出解析错误，不需要同时引入两个HTML处理插件。
• 验证命令行执行结果：在项目根目录执行npx eslint src/**/*.html，如果命令行无报错，说明是WebStorm缓存或文件识别问题。
• 修正WebStorm配置：进入设置 > 编辑器 > 文件类型，找到「Angular HTML」文件类型，确认后缀名关联了.html，没有被普通HTML文件类型抢占；如果还是报错，执行文件 > 无效缓存 > 勾选清除文件系统缓存和本地历史，重启WebStorm即可。

修正后的plugins数组参考 #

"plugins": [
  "eslint-plugin-no-null",
  "eslint-plugin-unicorn"
]

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