JavaScriptフォーマッターであるprettierを最近導入したので、備忘録も兼ねてprettierをESLintと併用する場合の導入方法と、Atomと連携してファイル保存時に自動的に処理が走る環境の構築方法を紹介します。

この記事の想定対象読者

• prettierを導入してみたい人
• ESLintを併用して、コードを整形しつつ文法チェックしたい人

この記事で達成する目標

• prettierとESLintの役割を理解する
• エディタ（Atom）と連携し、保存時に自動でprettierとESLintの処理が走る環境を作る

prettierとはコード整形（フォーマット）ツール

prettierとはコード整形（フォーマット）ツールです。JavaScriptの他にもさまざまな言語に対応していて、また主要なエディタと連携できるサポートもあります。

prettierの特徴

• JavaScriptをはじめ、様々な言語に対応したコード整形（フォーマット）ツール
• ESLintと連携可能
• さまざまなIDEをサポート

ESLintとはJavaScriptの文法チェックツール

ESLintとはJavaScriptのコードを文法チェックをしてくれて、かつ文法エラーとなった箇所を教えてくれるツールです。
ルールは細かく設定が可能です。

prettierとESLintを使用するメリット

• 複数人で開発してもコーディングスタイルが一定に保たれる
• 手動で整形する必要がなく、作業時間が短縮される
• リアルタイムでミスを指摘してくれる
• 細かくルールを設定できる

prettierで綺麗なコードを保ちつつ、ESLintでエラーがないかをチェックするといった具合です。整形とエラーチェックを自動化することによって、よりコードを書くことだけに集中でき、ミスも減らすことができます。

prettierとESLintの設定方法

ここから具体的な設定方法の説明をしていきたいと思います。

0.前提条件

• npmが使える
• エディタはAtom

1.必要なnpmモジュールのインストール

必要なnpmモジュールを一式インストールします。

インストールするnpmモジュール一覧

• eslint
• eslint-config-prettier
• eslint-plugin-prettier
• babel-eslint
• prettier

下記コマンドでインストールします。

npm i -D eslint eslint-config-prettier eslint-plugin-prettier babel-eslint prettier

各npmモジュールの役割

eslint	ESLint本体
eslint-config-prettier	ESLintとprettierの処理で重複する項目について無効化してくれる
eslint-plugin-prettier	prettierで設定できるルールをESLintのルールとして処理できるようにする
babel-eslint	ESLint標準のパーサーではES6以降の文法をサポートしていないので、babel-eslintをパーサーとして用いることでES6以降の文法に対応させる
prettier	prettier本体

2..eslintrc.jsonの設定

.eslintrc.jsonはeslintの設定を記述するファイルです。

{
  "parser": "babel-eslint",
  "env": {
    "browser": true,
    "node": true,
    "commonjs": true
  },
  "extends": ["prettier"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": [
      "error",
      {
        "singleQuote": true
      }
    ]
  }
}

今回のキモはeslint-plugin-prettierを導入することで、.eslintrc内にprettierの設定を記述できるようにするところ。

本来であればpackage.json内か.prettierrcを作成してprettierの記述する必要があり、設定箇所がバラバラになってしまいますが、この方法だと.eslintrcで一元管理ができるので便利です。

Atomとの連携方法

今回エディタはAtomを用いていますので、Atom用のパッケージも合わせてインストールしましょう。

1.必要なapmパッケージのインストール

Atomとの連携は、ESLintを動かすための下記のapmパッケージが必要です。

インストールするapmパッケージ一覧

• linter
• linter-eslint

下記コマンドでインストールします。

apm install linter linter-eslint

各パッケージの役割

linter	linter-eslintに依存
linter-eslint	Atom上でeslintを使えるようにする

今回の方法ではエディタにprettierプラグインを入れる必要はない

prettierにはprettierとエディタと連携させる際の連携用のプラグインであるprettier-atomが用意されていますが、今回はeslint-plugin-prettierを使ってESLintのルールとして処理してprettierを実行するように設定しているので、エディタにはprettierプラグインを入れる必要はありません。

prettier単体で使用する場合は使用を検討しても良いと思います。

2.linter-eslintの設定（ファイル保存時に処理が走るようにする）

パッケージをインストールしたら、ファイル保存時に処理が走るように設定をします。
[Atom] > [環境設定] > [パッケージ] からlinter-eslintの「設定」をクリックして、「Fix errors on save」にチェックを入れます。

おわり

以上で設定は終了です。
Atom上でコードを書いてみて動作の確認をしてみてください。