Create React App + TypeScriptでESLintとPrettierを使う＆Gitコミット時にチェックする

Create React App + TypeScriptを作成

npx create-react-app my-ts-app --typescript
cd my-ts-app

ESLintとPrettierの設定

必要なパッケージをインストール。

yarn add -D prettier eslint-config-prettier eslint-plugin-prettier

.eslintrc.ymlを作成。

extends:
  - react-app
  - plugin:prettier/recommended
rules:
  prettier/prettier: # - error以下はお好みで
  - error
  - semi: false
    singleQuote: true

package.jsonの以下の部分を削除（上記.eslintrc.ymlとの重複を避けるため）

- "eslintConfig": {
-   "extends": "react-app"
- },

同じくpackage.jsonにESLintとfixのタスクを追加。

"scripts": {
+   "lint": "eslint './src/**/*.{ts,tsx}'",
+   "lint:fix": "eslint --fix './src/**/*.{ts,tsx}'"
}

Create React App + TypeScriptでESLintとPrettierを使うことができるようになりました。

Gitコミット時にチェックする

必要なパッケージをインストール。

console.log

yarn add -D pre-commit lint-staged && yarn add -D husky

package.jsonにコミット時のチェックを追加。

+ "husky": {
+   "hooks": {
+     "pre-commit": "lint-staged"
+   }
+ },
+ "lint-staged": {
+   "*.{ts,tsx}": [
+     "eslint './src/**/*.{ts,tsx}'"
+   ]
+ }

Gitコミット時にeslint './src/**/*.{ts,tsx}'が実行され、チェックしてくれます。

以上。