MENU
  1. ホーム
  2. プログラミング
  3. React
  4. Reactでeslintとprettierを使用する

Reactでeslintとprettierを使用する

React
目次

方針

今回はReactでeslintとprettierを使用する手順について説明します。
eslint-plugin-prettierは現在非推奨のため使いません。

手順

create-react-appでプロジェクトを作成する

yarn create react-app my-app

上記のコマンドでプロジェクトを作成しましょう。

eslintの設定

以下のようにファイルを修正しましょう

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^13.0.0",
    "@testing-library/user-event": "^13.2.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
+    "lint": "eslint --fix --ext .jsx,.js ."
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest",
+     "prettier"
    ],
+    "rules": {
+      "no-console": "error",
+      "indent": ["error", 2]
+    }
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

①「”lint”: “eslint –fix –ext .jsx,.js .”,」の追加
「yarn lint」でeslintが起動するようになります。

②「”prettier”」の追加
今回はprettierを併用するため必要です。
「extends」の配列の最後に追加することがポイントです。上から順に上書きされます。

③”rules”」の追加
今回は「console.logを使用したらエラー」「インデントは2つでなければエラー」というルールを設定しました。

prettierの設定

prettierのインストール

yarn add -D prettier

上記のコマンドでprettierをインストールしましょう。

コマンドと設定の追加

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^13.0.0",
    "@testing-library/user-event": "^13.2.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "lint": "eslint --fix --ext .jsx,.js .",
+    "format": "prettier --write src",
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest",
      "prettier"
    ],
    "rules": {
      "no-console": "error",
      "indent": ["error", 2]
    }
  },
+  "prettier": {
+    "tabWidth": 2
+  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "prettier": "^2.8.4"
  }
}

今回は「インデントは4つでなければエラー」というルールを設定しました。

あえてeslintで設定した「インデントは2つでなければエラー」というルールと衝突するようにしています。
後で修正しましょう。

eslintとprettierを連携させるライブラリの設定

eslint-config-prettierのインストール

yarn add -D eslint-config-prettier

上記のコマンドでeslintとprettierを連携させるライブラリをインストールしましょう。

コマンドの追加

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^13.0.0",
    "@testing-library/user-event": "^13.2.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "lint": "eslint --fix --ext .jsx,.js .",
    "format": "prettier --write src",
+    "conflict": "eslint-config-prettier 'src/**/*.{js,jsx}'"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest",
      "prettier"
    ],
    "rules": {
      "no-console": "error",
      "indent": ["error", 2]
    }
  },
  "prettier": {
    "tabWidth": 2
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "eslint-config-prettier": "^8.7.0",
    "prettier": "^2.8.4"
  }
}

「yarn conflict」でeslintとprettierの設定に重複（衝突）するものはないかを確認してくれます。

全てを実行するコマンドの追加

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^13.0.0",
    "@testing-library/user-event": "^13.2.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "lint": "eslint --fix --ext .jsx,.js .",
    "format": "prettier --write src",
    "conflict": "eslint-config-prettier 'src/**/*.{js,jsx}'",
+    "fix": "yarn conflict && yarn lint && yarn format",
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest",
      "prettier"
    ],
    "rules": {
      "no-console": "error",
      "indent": ["error", 2]
    }
  },
  "prettier": {
    "tabWidth": 2
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "eslint-config-prettier": "^8.7.0",
    "prettier": "^2.8.4"
  }
}

これで「yarn fix」を行うと以下を行ってくれます。

①eslintとprettierの設定に重複（衝突）するものはないかを確認
②eslintでコードを確認し、修正可能なものは修正する
③prettierでコードをフォーマットする

確認

import logo from './logo.svg';
import './App.css';

function App() {
+  console.log('hoge');
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

今回はeslintエラーを表示させるためにあえて、上記のように修正します。

yarn fix

上記のコマンドで確認しましょう。

うまくいけばeslintとprettierの設定が衝突していることを教えてくれます。
今回はeslintのindentが衝突しているようです。
下記のように修正しましょう。

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^13.0.0",
    "@testing-library/user-event": "^13.2.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "lint": "eslint --fix --ext .jsx,.js .",
    "format": "prettier --write src",
    "conflict": "eslint-config-prettier 'src/**/*.{js,jsx}'",
    "fix": "yarn conflict && yarn lint && yarn format"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest",
      "prettier"
    ],
    "rules": {
      "no-console": "error",
-      "indent": ["error", 2]
    }
  },
  "prettier": {
    "tabWidth": 2
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "eslint-config-prettier": "^8.7.0",
    "prettier": "^2.8.4"
  }
}

修正が済んだら再び下記のコマンドを叩きます。

yarn fix

今度は下記のようなエラーが出るはずです。

これは「eslintとprettierは衝突していませんが、/src/App.jsの5行目にconsole.logがあるので削除してください」って言われてます。
下記のように修正しましょう。

import logo from './logo.svg';
import './App.css';

function App() {
-  console.log('hoge');
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

修正が済んだらもう一度下記のコマンドを叩きます。

yarn fix

うまくいけば下記のようにファイルが自動で修正されているはずです。

おまけ

あわせて読みたい
Reactでeslintを使用してみる 【eslintのメリット】 eslintを使用するメリットは「チーム内でコーディングのルールが統一される」ということです。これによって「こういう時はシングルクオートではな...
あわせて読みたい
Reactでprettierを使用してみる 【prettierのメリット】 prettierを使用するメリットは「チーム内でコーディングのルールが統一される」ということです。これによって「こういう時はシングルクオートで...
独学に限界を感じたら、プログラミング教室がお勧めです。
エージェントは複数登録することをお勧めします。カウンセリングを通して、業界について勉強することができます。
フリーランス転職希望の方はフリーランス専門のエージェントを利用しましょう。
独学に限界を感じたら、プログラミング教室がお勧めです。
エージェントは複数登録することをお勧めします。
カウンセリングを通して、業界について勉強することができます。
フリーランス転職希望の方はフリーランス専門のエージェントを利用しましょう
React
eslint prettier react
よかったらシェアしてね！
  • URLをコピーしました！

関連記事

目次