Edited at

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}'が実行され、チェックしてくれます。

以上。