Atom中React渲染h1元素触发JSHint E030报错问题咨询

1. JSHint默认仅支持标准ECMAScript语法校验，未开启JSX解析选项时，会把JSX语法的尖括号<>识别为JS中的比较运算符。解析到<h1>片段时，JSHint按比较运算逻辑预期<后跟随合法标识符，解析过程中碰到数字1不符合标识符命名规则，直接抛出E030错误。
2. 现有代码存在React版本API适配问题：如果导入的是React 18版本的react-dom/client入口，该版本已废弃旧版ReactDOM.render挂载方法，就算解决校验报错，代码也无法正常运行。
3. HTML部分的text/babel脚本类型配置是正确的，不需要修改，该配置用于告知浏览器端Babel转译脚本内的JSX语法。

• 首先给JSHint开启JSX支持，修改文件顶部的JSHint配置行，补充jsx: true参数，修改后配置为：

/*jshint esversion: 6, jsx: true */

添加该配置后JSHint可正常识别JSX语法，E030报错会直接消除。

• 修正React版本对应的挂载逻辑：

  • 如果你用的是React 18版本（对应导入路径react-dom/client），需要替换旧版render写法，使用createRoot挂载根节点，修改后的完整JS代码如下：

  /*jshint esversion: 6, jsx: true */
  
  import React from 'react';
  import ReactDOM from 'react-dom/client';
  
  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(<h1>Hello World</h1>);
  

  • 如果你使用React 17及更早版本，不需要修改渲染逻辑，只需要补充JSHint的jsx配置即可正常通过校验。

• （可选配置）如果不想在每个JS文件顶部重复写JSHint配置，可以在项目根目录新建.jshintrc文件，写入全局配置，项目内所有JS/JSX文件会自动读取该配置：

{
  "esversion": 6,
  "jsx": true
}

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