【React】‘React‘ must be in scope when using JSX react/react-in-jsx-scope

React报错：

'React' must be in scope when using JSX react/react-in-jsx-scope

意思是在使用JSX时，没有引入React，比如像这样：

import { useState } from 'react';

const App = () => {

	const [count, setCount] = useState(0);
	
	return <>
		<h3>点击了{count}次</h3>
		<button onClick={() => {setCount(count + 1)}>click me</button>
	</>
}

在使用import引入时，没有引入React。所以在被Eslint的"plugin:react/recommended"检查时，就会报错。

于是很多人就选择引入的时候加上React，这样

import React, { useState } from 'react';

这样确实不报错了，但是他们忽略了一个版本事实：

在React@17以后，是不需要再手动去引入React的。因为该版本之后加入了react/jsx-runtime，会自动对JSX进行解析。

现在报错，就是因为eslint中的extends中没有加入这个runtime，加上就可以了

// .eslintrc.js

module.exports = {
	// ...
	extends: [
		"eslint:recommended",
        "plugin:react/recommended",
        // 加上这一条
        "plugin:react/jsx-runtime"
	]
	// ...
}

问题解决。