ESLintを使ってるプロジェクトにPrettierを導入した

January 31, 2018

ESLint を使ってるプロジェクトに code formatter のPrettierを導入した。参考記事の寄せ集めに過ぎない感があるが、自分の備忘録ということでメモしておく。

やりたいこと

Prettier を使ってコードを自動フォーマットしたい
ESLint を導入してるのでルールがかち合わないようにしたい
エディタは Atom を使っていてうまく連携したい

Prettier インストール

$ yarn add prettier --dev --exact
$ yarn add eslint-plugin-prettier eslint-config-prettier --dev

eslint-plugin-prettierは eslint 実行時に prettier も実行するプラグインで、 eslint-config-prettierは不要・競合する可能性のある prettier のルールを無効化するもの。

設定を書く

.eslintrcはこんな感じ。

{
  "extends": [
    "plugin:react/recommended",
    "plugin:flowtype/recommended",
    "prettier",
    "prettier/react"
  ],
  "env": {
    "browser": true,
    "jest/globals": true
  },
  "parser": "babel-eslint",
  "plugins": [
    "jest",
    "react",
    "prettier",
    "flowtype"
  ],
  "rules": {
    "prettier/prettier": [
      "error",
      {
        printWidth: 100,
        trailingComma: none,
        singleQuote: true,
        semi: false
      }
    ],
    "no-mixed-operators": 0
    // ...
  }
}

ここまででyarn eslint src/app.js --fixなどとすると prettier が効くと思う。 no-mixed-operatorsのルールは prettier といっしょに使うとちょっとコードを修正しないといけないので、面倒で off にしておいた。

参考: https://github.com/prettier/eslint-config-prettier#no-mixed-operators

Atom のパッケージインストール

prettier-atomというパッケージがあるのでインストール。 “Format Files on Save”という設定があるのでチェックを入れておくとファイル保存時に自動フォーマットされる。