Create-react-appでAirbnbのESLintを使う方法

create-react-app で新しいプロジェクトを作る

まずは、ターミナルから create-react-app で新しいプロジェクトを作ります。

npx create-react-app my-app

※ my-app 部分はお好きなプロジェクト名に変更してください。
※ Node >= 8.10 及び npm >= 5.6 の環境が必要です。
※ 一番最初の npx は npm 5.2 から利用できるパッケージランナーツールです。

そして、作成したプロジェクトフォルダに移動します。

cd my-app

Airbnb の Eslint 関連パッケージをインストール

ターミナルから devDependencies に Airbnb の React 用 Eslint 関連パッケージをインストールします。

npm i -D eslint-config-airbnb eslint-plugin-import eslint-plugin-react

インストール後、 package.json 内に下記の 3 つのパッケージが追加されているのが確認できます。

{
  "devDependencies": {
    "eslint-config-airbnb": "^17.1.0",
    "eslint-plugin-import": "^2.17.3",
    "eslint-plugin-react": "^7.13.0"
  }
}

参考 :
eslint-config-airbnb - GitHub

eslintrc ファイルを作成

.eslintrc ファイルを、プロジェクトのルートフォルダ直下に作り、下記を追加します。

{
  "extends": ["react-app", "airbnb"],
  "parser": "babel-eslint",
  "env": {
    "browser": true,
    "node": true
  }
}

ESLint のルールは自分に合わせて追加していきましょう 👍
インターネットで検索すると、いろんな人がおすすめルールを公開しているので参考になります。

参考 :
wesbos/dotfiles: Hey wes what settings do you use? - GitHub

.eslintignore ファイルを作成

.eslintignore ファイルを、プロジェクトのルートフォルダ直下に作り、下記を追加します。

src / serviceWorker.js

これで完成 🙌

私のエディタは Visual Studio Code なので、ESLint エクステンションをインストールして使用しています。
ルールに沿わないコードには赤い波線が付き、 常に PROBLEMS タブでに怒られつつ、保存時に自動で Lint してくれるように設定しているので、非常にコーディングが捗りますよ 😉

📁 最終的なプロジェクトのファイル構成

my-app/
  ├── .eslintignore  <= 追加
  ├── .eslintrc      <= 追加
  ├── README.md
  ├── node_modules/
  ├── package.json
  ├── public/
  │   ├── index.html
  │   └── favicon.ico
  └── src/
      ├── App.css
      ├── App.js
      ├── App.test.js
      ├── index.css
      ├── index.js
      └── logo.svg