VSCode中JSHint提示标识符错误原因及.jshintrc配置方法

错误产生的原因 #

其实这个问题很常见——JSHint默认只认标准ECMAScript语法，而你写的<App />是React专属的JSX语法，它不属于原生JS的范畴。JSHint没被配置识别JSX的话，会把尖括号<当成了不符合语法规则的符号，自然就抛出了Expected an identifier and instead saw '>'这个错误。简单说就是：JSHint不知道你在写JSX，把它当成了非法代码。

如何在.jshintrc中配置解决 #

解决起来很简单，只需要告诉JSHint要启用JSX语法支持就行：

1. 先确认你的项目根目录有没有.jshintrc文件，没有的话直接新建一个（注意文件名开头有个点）
2. 在这个JSON文件里添加"jsx": true配置项，下面给你一个实用的完整配置示例：

{
  "esversion": 6,
  "jsx": true,
  "browser": true,
  "globals": {
    "React": true,
    "ReactDOM": true
  }
}

给你拆解一下这些配置的作用：

• "jsx": true：这是核心，直接告诉JSHint要解析JSX语法
• "esversion": 6：如果你用了ES6+的语法（比如箭头函数、let/const），这个配置能让JSHint正确识别它们
• "browser": true：因为React是在浏览器环境运行的，开启这个可以避免JSHint对浏览器全局变量（比如document）报错
• "globals"：声明React和ReactDOM是全局变量，防止JSHint报它们未定义的错误

如果只是单个文件需要临时启用JSX支持，也可以在文件最顶部加一行注释：/* jshint jsx: true */，不过全局配置.jshintrc显然更省心。

内容的提问来源于stack exchange，提问作者Pyae Phyoe Shein