TypeScript + React のモダン ESLint 設定を爆速で済ませる
4936 ワード
毎回調べるのが面倒なので、まとめてみました。
前提は以下です。
- TypeScript を使う
- React アプリケーション
- テストには Jest を使う
- コードのフォーマットは prettier に任せる
こうしたら良いのでは
yarn add -D @typescript-eslint/parser @typescript-eslint/eslint-plugin prettier eslint-config-prettier eslint-plugin-jest eslint-plugin-react
そしてプロジェクト直下に .eslintrc.json を配置。
{
"env": {
"es2020": true,
"jest/globals": true
},
"parser": "@typescript-eslint/parser",
"parserOptions": {
"project": "./tsconfig.json",
"ecmaFeatures": {
"jsx": true
}
},
"plugins": [
"react",
"jest",
"@typescript-eslint"
],
"settings": {
"react": {
"version": "detect"
}
},
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/eslint-recommended",
"plugin:@typescript-eslint/recommended",
"plugin:react/recommended",
"plugin:jest/recommended",
"prettier",
"prettier/@typescript-eslint"
]
}
配列の並び順にはある程度意味がありますので、 prettier を先に書かないようにしましょう！
そして、スクリプトを追加
package.json
"scripts": {
//省略
"fmt": "prettier --write ./src && eslint ./src"
},
これで完成です。
あとはお好みでルールを調整していきましょう。
すごく簡単ですが、どなたかの役に立てば幸いです。
今回の記事は こちら のクラスメソッド様の記事を参考に自分なりにまとめたものです。いつも助かっております。本当にありがとうございます🙌
Author And Source
この問題について(TypeScript + React のモダン ESLint 設定を爆速で済ませる), 我々は、より多くの情報をここで見つけました https://zenn.dev/tatsurom/articles/ac7ca21069488198627c著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Collection and Share based on the CC protocol