create-react-app新建项目打开index.html报eslint parsing error意外令牌错误

这个报错的本质是 ESLint被错误配置为对HTML文件执行语法校验，ESLint本身默认仅支持JS/TS类语法文件的校验，无法解析HTML的<!DOCTYPE html>标签语法，因此在第一行就抛出解析错误。

常见触发原因 #

• 项目根目录留存了之前其他项目的.eslintrc、.eslintignore等ESLint配置文件，create-react-app内置的ESLint校验逻辑优先读取了外置的旧配置，没有将HTML文件加入校验忽略列表
• 本地IDE（如VSCode）的ESLint插件全局开启了HTML文件校验开关，插件配置覆盖了项目默认的校验范围规则
• 创建项目时如果手动自定义了ESLint规则，可能误装了eslint-plugin-html这类HTML校验插件但未做适配配置

修复步骤 #

1. 优先测试项目配置问题：在项目根目录新建.eslintignore文件，添加以下内容：

*.html
public/

保存后重启ESLint服务/IDE，确认报错是否消失。
2. 如果上述操作无效，检查本地IDE的ESLint插件配置，删除Validate配置项中的html类型校验规则，或选择仅使用项目内的ESLint配置。
3. 仍有报错的话，备份后删除项目根目录下非本项目生成的ESLint相关配置文件，让create-react-app使用内置的默认校验规则即可。

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