新建React项目出现标签和import导入报错但可正常运行构建如何解决

问题原因 #

该报错属于编辑器代码检测工具的误报，和项目本身的代码逻辑无关：
你的项目devDependencies中安装了jshint依赖，但JSHint本身不支持React JSX语法、ES6+的import模块导入语法，因此编辑器调用JSHint做代码检查时会抛出错误。而项目运行、打包时用的是react-scripts自带的Babel和ESLint校验规则，完全适配React语法，所以不会报错。

修复方案 #

方案1（推荐）：卸载冗余的JSHint依赖 #

React官方脚手架自带的ESLint已经完全覆盖React开发的代码校验需求，不需要额外安装JSHint，直接执行以下命令卸载即可：

npm uninstall jshint --save-dev

执行完成后重启VS（或重启编辑器的代码检测服务），报错就会消失。

方案2：禁用编辑器的JSHint校验 #

如果你需要保留JSHint依赖，可以直接在VS的设置项中搜索JSHint: Enable，关闭该选项即可，编辑器会停止调用JSHint检查JS/JSX文件，不会再出现误报。

方案3（不推荐）：配置JSHint兼容现代JS特性 #

如果必须保留JSHint，可在项目根目录新建.jshintrc配置文件，写入以下内容：

{
  "esversion": 6,
  "mozilla": true,
  "expr": true
}

该配置可以让JSHint兼容部分ES6+语法，但还是会存在JSX校验的适配问题，优先推荐使用方案1。

内容的提问来源于stack exchange，提问作者José Carlos