eslint vscode插件未生成掛鈎警告

Question

我使用npx create-react-app my-app創建了一個react應用，並進行了yarn安裝。 將以下內容添加到App.js：

const a = () => 1,
  b = () => 2,
  c = () => 3;

function App() {
  const wut = useMemo(() => {
    return { a: a(), b: b(), c: c() };
  }, [a]);
  useEffect(() => {
    console.log(a(), b(), c());
  }, [a]);

紗線啟動會給我警告，但vscode不會。

我添加了.eslintrc.js並包含以下內容：

module.exports = {
  env: {
    browser: true,
    es6: true
  },
  extends: ["eslint:recommended", "plugin:react/recommended"],
  globals: {
    Atomics: "readonly",
    SharedArrayBuffer: "readonly"
  },
  parserOptions: {
    ecmaFeatures: {
      jsx: true
    },
    ecmaVersion: 2018,
    sourceType: "module"
  },
  plugins: ["react"],
  rules: {
    "react/prop-types": [0],
    "no-console": [0],
    "react-hooks/exhaustive-deps": "warn"
  }
};

Answer 1

react/recommended的規則清單不包括react-hooks/exhaustive-deps 。

您可能沒有安裝eslint-plugin-react-hooks 。

它包含一個注釋：

注意：如果您使用的是Create React App，請等待包含此規則的相應版本的react-scripts，而不是直接添加它。

您使用的是哪個版本的cra？ 理論上是通過此PR添加的。

Answer 2

如果我在干凈的create-react-app中有以下代碼：

function App(props) {
  const {a,b,c}=props;
  const wut = useMemo(() => {
    console.log("this should not happen multiple times");
    return { a: a(), b: b(), c: c() };
  }, [a]);
  useEffect(() => {
    console.log(a(), b(), c());
  }, [a]);

然后刪除.eslintrc.js將使我的React Hook useMemo has missing dependencies:警告和自動修復選項。

當我在項目根目錄中具有.eslintrc.js ，出現錯誤Definition for rule 'react-hooks/exhaustive-deps' was not found. 這是因為.eslintrc.js缺少一個插件，並且沒有plugins: ["react", "react-hooks"],解決。

然而; 現在默認情況下規則已關閉，因此它不會發出警告，需要在.eslintrc.js中顯式添加規則並將其設置為警告（或錯誤）：

  rules: {
    "react-hooks/exhaustive-deps": "error"
  }