eslint-config-react-app 中的错误自动完成：react/cjs/react.development

Question

背景与介绍

对于一个非常简单的 ReactJS 项目，我想添加 ESLint 功能 :

npm install --save-dev eslint-config-react-app eslint@^8.0.0

如 ReadMe for eslint-config-react-app 所建议。

安装 ESLint 后我的 package.json :

{
  "name": "reactjs-app",
  "scripts": {
    "dev": "next dev"
  },
  "dependencies": {
    "next": "^12.1.4",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  },
  "devDependencies": {
    "eslint": "^8.12.0",
    "eslint-config-react-app": "7.0.0"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  }
}

在上面的package.json、none三个依赖中next、 react, react-dom, 依赖于 any ESLint 包 – 两者都不是直接或间接。
所以所有安装的 ESLint 包都是 eslint 的依赖 and/or eslint-config-react-app.

我的 index.js :

// index.js
import { useState } from 'react';

function HomePage() {
  const [showParagraph, setShowParagraph] = useState(true);
  const showParagraphHandler = useCallback(() => {
    setShowParagraph((prevToggle) => !prevToggle);
  }, []);
  console.log('App RUNNING');
  console.log(showParagraph);
  return (
    <div className='app'>
      <h1>Hi there!</h1>
      <button onClick={showParagraphHandler}>A button</button>
    </div>
  );
}
export default HomePage;

全部the files needed for the project are in a zip file 可供下载。
要试用它，只需下载、解压然后运行 npm install。 ¹

细心的 reader 可能会注意到 useCallback 的导入是失踪。
因此，尝试运行上述应用程序将导致出错了。

运行命令行中的 ESLint 确认错误。

npx eslint . --ext .js

结果：

  6:32  error  'useCallback' is not defined  no-undef

问题

到目前为止一切顺利，但是通过 Ctrl + 自动完成 space 错误地建议从 react/cjs/react.development、或来自 react/cjs/react.production.min，而不是来自 react 会更正确。

为什么会这样？ – 有错误修复吗？

参考资料

^{1个
对我来说，“npm install”命令大约需要 5 分钟才能完成。
`npm install` 命令下载并安装所有 Node.js 包
在“package.json”文件中——包括间接包。
运行 npm run dev 从命令行应该启动
应用程序在您的默认网络浏览器中。}

Answer 1

Why does this happen? – Is there a bug fix?

看来原因是 @types/react 是一个缺失的依赖项 eslint-config-react-app 所以明显的错误修复是添加 @types/react 通过运行手动添加到您的项目：

npm install @types/react

VS Code 通过 Ctrl + space 自动补全现在正确建议 react。 ¹

安装 @types/react 将 "@types/react": "^18.0.0", 添加到您的 package.json 在 "dependencies" 下：

{
  "name": "reactjs-app",
  "scripts": {
    "dev": "next dev"
  },
  "dependencies": {
    "@types/react": "^18.0.0",
    "next": "^12.1.4",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  },
  "devDependencies": {
    "eslint": "^8.12.0",
    "eslint-config-react-app": "7.0.0"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  }
}

^{1个
如果它不起作用，请尝试重新启动 VS Code。}

eslint-config-react-app 中的错误自动完成：react/cjs/react.development

Bad autocomplete in eslint-config-react-app: react/cjs/react.development

node.js

eslint

visual-studio-code

create-react-app

背景与介绍

问题

参考资料