AtomでESLintとPrettierをAirbnbルールで使う

##はじめに

この記事では、**エディタAtom**を使って**JavaScript**のコードを書くときに、**Airbnbのルールで構文エラー解析と自動フォーマット**する方法を**ザックリ**とまとめています。

細かい説明はせず、私のような初心者を対象に、**「ESLintって何？」**というところから説明します。

なお私は**詳しいことは理解できていなくて**、今後同様の設定をするときに困らないようにするためのメモなので、間違いなど多々あるかもしれません。
その時はご指摘いただけると大変助かります！

なお、ここでは`Atom`を使っていますが、`VSCode`でも同様のことができるようです。
主に「プロジェクトにパッケージをインストール」する箇所と「エディタのプラグインパッケージをインストールする」箇所に分かれるので、後者をVSCodeの方で実行してもらえれば良いかもしれません（試していないですが、プロジェクト内では私以外はVSCodeでした）。

また、私はReact Nativeプロジェクトのためにこれらを使っていますが、JavaScriptならなんでも適用できると思います。

##要約

話の流れの要約は以下です。

1. **ESLint**で構文エラーを見つけられるようにする
2. エラーの基準として**Airbnb**の基準を採用する(なんか皆がオススメって言うので)
3. エラーを一個一個手直しするのが面倒なので、**Prettier**を使ってオートフォーマットしてくれるようにする

##まずESLintって何

**[ESLint](https://eslint.org/docs/user-guide/getting-started)**はザックリ言うと、**JavaScriptの構文解析ツール**の１つです。
他にもあるらしいですが、これがよく使われているようです。

こいつがあると、コードを書いたときに、**「ここが間違ってるぞ！！」と指摘**してくれます。

例えば、

- 「シングルクオートを使うべきところでダブルクオートを使ってるぞ！」
- 「ここのスペースは余計だぞ！ここにスペース必要だぞ！」
- 「ここはアロー関数を使え！」

などです。

こうした**構文ルールをgitで管理してチームで共有**することで、**プロジェクト全体で構文の秩序を保つ**ことができます。

なお、**「何をもってして間違いとするかの基準」**は自分で定義することもできるし、ESLintオススメの基準や、**Airbnbが採用している基準を使う**こともできます。
そうした基準を部分的に変えたり、特定のファイルで特定のルールだけ無効にすることなどもできます。

Airbnbのルールは[こちら](https://github.com/airbnb/javascript)を参照ください。

##ESLintの導入

まずは、**パッケージをプロジェクトに追加**します。

プロジェクトのルート階層で以下を実行します。

```terminal
 yarn add eslint --dev
 //または
 npm install eslint --save-dev
```

##Airbnbのルールを使う

次に、**ESLintの初期設定**をします

```terminal
./node_modules/.bin/eslint --init
```

すると、

`How would you like to configure ESLint? `

と、**下記のいずれのルールを採用するか親切に聞いてくれます**

- Airbnb
- Standard
- Google

ここで、**Airbnbを選択**しましょう。

![img.jpeg](https://qiita-image-store.s3.amazonaws.com/0/214755/f62bc8f2-58a4-383e-32d3-474ef3680b78.jpeg)


そのほか、

- Reactは使う？
- 設定ファイルの形式(json, js, ...)はなににする？ <= 私は`json`にしました

などいくつか質問してくるので、環境に合わせて任意に答えてください。

ここで設定が終われば、 (先ほどjsonを指定した場合)`.eslintrc.json` というファイルが自動で生成され、中身は以下のようになっているはずです。

```json
{
    "extends": "airbnb"
}
```

設定の詳細は[公式](https://eslint.org/docs/user-guide/getting-started)をご覧ください。

なお、私の環境ではESLintは `v5.12.1`を使っています。

```terminal
./node_modules/.bin/eslint -v
```

##ESLintで構文チェックをしてみる

ここまで設定が終われば、以下のように構文チェックするファイルを指定してあげることで、**ターミナル上でエラー個所を指摘**してもらえます。
(今回は`index.js`をチェック)

```terminal
./node_modules/.bin/eslint index.js
```

<img width="709" alt="img2.png" src="https://qiita-image-store.s3.amazonaws.com/0/214755/7fdc4401-4ce5-a1d2-bcd1-59386d7064d7.png">


ただ毎回ターミナルで確認するのは面倒なので、ここでAtomにパッケージを追加して**Atom上でエラー個所を表示**できるようにします。

##Atom上でESLintのエラーを確認する

Atomに、以下のパッケージを追加します。これだけです。

- [linter](https://atom.io/packages/linter)
- [linter-eslint](https://atom.io/packages/linter-eslint)

ただ、私の環境ではこの2つだけではエラーが表示されなかったので、以下を追加しました。

- [linter-ui-default](https://atom.io/packages/linter-ui-default)

これで、Atom上でエラーが表示されるようになりました。
<img width="709" alt="img3.png" src="https://qiita-image-store.s3.amazonaws.com/0/214755/07ad59ef-af28-f72c-3ca6-78b0cb967ec7.png">



##Prettierで自動フォーマットをする

このままですと、エラー個所は表示されるのですが、**１つ１つ手動**で解決しなければなりません。

そこで、Prettierを使うことで、**変更を保存する度に自動でフォーマット**してくれるようになります。１つ１つ手動で変えるところを、保存するだけで一発で変えてくれます。

詳細は[Prettierの"Integrating with ESLint"](https://prettier.io/docs/en/eslint.html)で確認して欲しいですが、以下２つのコマンドを打ちます。

まずは、**ESLintのルールで自動フォーマットしてもらう**ために`eslint-plugin-prettier`を追加します。

```terminal
yarn add --dev prettier eslint-plugin-prettier
//または
npm install --save-dev --dev prettier eslint-plugin-prettier
```
※なお、先ほどの公式ガイドには.eslintrc.jsonにも変更を加えていますが、次にもう１つ別のパッケージを追加するので、ここでは無視して大丈夫だと思います。

次に、**ESLintのエラーとPrettierのエラーを重複させない**ために、 `eslint-config-prettier`を追加します。

```terminal
yarn add --dev eslint-config-prettier
//または
npm install --save-dev eslint-config-prettier
```
そして、`.eslintrc.json`に`"plugins": ["prettier"]`を追記します。

```diff
{
  "extends": ["airbnb"],
+ "plugins": ["prettier"]
}
```

ここまででPrettierの設定が終わったので、あとは**オートフォーマットをAtom上で実行**するために、**[prettier-atom](https://atom.io/packages/prettier-atom)をAtomに追加**します。

すると、**Atom内の下部に`Prettier`というボタンのようなものが表示**され、そこを押して横にチェックマークが入れば準備完了。

<img width="352" alt="img4.png" src="https://qiita-image-store.s3.amazonaws.com/0/214755/99bd720c-be55-a389-d87b-1a36169e198c.png">


任意のファイルで保存コマンド(Macなら`command + s`)を打てば、自動でフォーマットされるはずです。

自動フォーマットを解除したい時にはもう一度`Prettier`を押して非活性にします。

これで、目的だった「**エディタAtom**を使って**JavaScript**のコードを書くときに、**Airbnbのルールで構文解析と自動フォーマット**」が実現できたと思います！！


##最後に

以上が、「**エディタAtom**を使って**JavaScript**のコードを書くときに、**Airbnbのルールで構文エラー解析と自動フォーマット**」のためのザックリとした説明でした。

ただ、ここでご紹介したのは、本当に基本的な部分です。

あとは、各自で**ルールを一部変更**したり、**特定ファイルで特定のルールを無効**にしたりなど、各々調べて解決してもらいたいと思います。