はじめに
プロジェクトを開始するときに、まずコミット時に自動で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.
- 今度は無事に通りました