eslint を React 用に設定

対象読者

• TypeScript を使う方
• React を使う方

eslint を React 用に設定(TypeScript)して、いい感じにしたい方用の記事です。

今回は vite(ヴィート)でアプリケーションの雛形を生成してから設定を行っていきます。

この記事を読むと

React + TypeScript ＋ eslint ＋ prettier

の環境が完成します。

今回作成したコードは以下で確認できます。

• react-typescript-eslint-prettier

導入

vite(ヴィート)を使用した雛形作成

# インストール
npm create vite@latest my-react-app -- --template react-ts

# 作成されたディレクトリに移動
cd my-react-app

eslint のイニシャライズ

※設定についての説明は省略

$ npx eslint --init
You can also run this command directly using 'npm init @eslint/config'.
Need to install the following packages:
  @eslint/create-config
Ok to proceed? (y) y
√ How would you like to use ESLint? · style
√ What type of modules does your project use? · esm
√ Which framework does your project use? · react
√ Does your project use TypeScript? · No / Yes
√ Where does your code run? · browser
√ How would you like to define a style for your project? · guide
√ Which style guide do you want to follow? · standard
√ What format do you want your config file to be in? · JSON
Checking peerDependencies of eslint-config-standard@latest
Local ESLint installation not found.
The config that you've selected requires the following dependencies:

eslint-plugin-react@latest @typescript-eslint/eslint-plugin@latest eslint-config-standard@latest eslint@^8.0.1 eslint-plugin-import@^2.25.2 eslint-plugin-n@^15.0.0 eslint-plugin-promise@^6.0.0 @typescript-eslint/parser@latest
√ Would you like to install them now? · No / Yes
√ Which package manager do you want to use? · npm

eslint のイニシャライズ後の package.json は以下の通りです。

package.json

{
  "name": "my-react-app",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.15",
    "@types/react-dom": "^18.0.6",
    "@typescript-eslint/eslint-plugin": "^5.30.7",
    "@typescript-eslint/parser": "^5.30.7",
    "@vitejs/plugin-react": "^2.0.0",
    "eslint": "^8.20.0",
    "eslint-config-standard": "^17.0.0",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-n": "^15.2.4",
    "eslint-plugin-promise": "^6.0.0",
    "eslint-plugin-react": "^7.30.1",
    "typescript": "^4.6.4",
    "vite": "^3.0.0"
  }
}

prettier の設定

この記事はシリーズの 3 個目なので prettier の説明は当然のようにやっていきたいと思います。

※prettier はコードフォーマッターです。

prettier をインストール

npm i -D prettier eslint-config-prettier

インストールした後は eslint に設定を追加する必要があるので、以下の様に.eslintrc.json を設定していきたいと思います。

ついでにちょっとルールも設定していきます。(vite デフォルトではエラーになってしまうので)

※eslint のイニシャライズで生成されます。

.eslintrc.json

{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "plugin:react/recommended",
        "standard",
        "prettier" ★こちらを追記
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "react",
        "@typescript-eslint"
    ],
    "rules": {
        "react/react-in-jsx-scope": "off" ★こちらを追記
}
}

prettier おすすめ設定

僕のおすすめを prettier 設定を載せておきます。
そのままでも prettier は効くので以下はオプションです。

prettierrc.json

{
  "printWidth": 120,
  "singleQuote": true,
  "semi": false
}

上から

• 改行が１２０文字(デフォルト：100)
• 文字列はシングルクォーテーションで統一(デフォルト：ダブルクォーテーション)
• セミコンロンなし(デフォルト：あり)

という設定にしています。

eslint と prettier 用のスクリプトを追加

最後の仕上げとして、npm script にコマンド追加していきます。

package.json

{
  "name": "my-react-app",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "lint": "eslint --ext .ts,.tsx ./src",★こちらを追記
    "fix": "npm run format && npm run lint:fix",★こちらを追記
    "format": "prettier --write ./src",★こちらを追記
    "lint:fix": "eslint --fix --ext .ts,.tsx ./src"★こちらを追記
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.15",
    "@types/react-dom": "^18.0.6",
    "@typescript-eslint/eslint-plugin": "^5.30.7",
    "@typescript-eslint/parser": "^5.30.7",
    "@vitejs/plugin-react": "^2.0.0",
    "eslint": "^8.20.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-config-standard": "^17.0.0",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-n": "^15.2.4",
    "eslint-plugin-promise": "^6.0.0",
    "eslint-plugin-react": "^7.30.1",
    "prettier": "^2.7.1",
    "typescript": "^4.6.4",
    "vite": "^3.0.0"
  }
}

以上で React + TypeScript ＋ eslint ＋ prettier の設定は終わりです。

お疲れ様です。

おわりに

今回は vite で作成した React の雛形に eslint と prettier を追加しました。
これで react の開発環境もバッチリですね！