はじめに

プロジェクトを開始するときに、まずコミット時に自動でlintが走ってくれる仕組みを作ろうとする人も多いかと思います。

今回の記事では、何も触っていないReact Typescriptのプロジェクトで出る React version not specified in eslint-plugin-react settings.の対処方法をまとめます

どんなエラーが出るの？

React Typescrptのデフォルトアプリにlintをかけると以下のWarningが出ます

$ lint-staged
✔ Preparing lint-staged...
❯ Running tasks for staged files...
  ❯ package.json — 5 files
    ❯ src/**/*.tsx — 1 file
      ✔ prettier --write
      ✖ eslint 'src/**/*.tsx' --fix [FAILED]
↓ Skipped because of errors from tasks. [SKIPPED]
✔ Reverting to original state because of errors...
✔ Cleaning up temporary files...

✖ eslint 'src/**/*.tsx' --fix:
Warning: React version not specified in eslint-plugin-react settings. See https://github.com/jsx-eslint/eslint-plugin-react#configuration .

React version not specified in eslint-plugin-react settings.ですね
怒られているコードを見てみると・・・

function App() { ⇦ ここ
  const [count, setCount] = useState(0);

  return (
    <div className="App">

確かに、Typescriptっぽくない
ということで修正します。
以下のようにします

const App: React.FunctionComponent = () => { この行を変えた
  const [count, setCount] = useState(0);

  return (
    <div className="App">

ではこれでもう一度コミットしてみましょう

yarn run v1.22.10
$ lint-staged
✔ Preparing lint-staged...
✔ Running tasks for staged files...
✔ Applying modifications from tasks...
✔ Cleaning up temporary files...
✨  Done in 2.62s.