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”という設定があるのでチェックを入れておくとファイル保存時に自動フォーマットされる。

参考記事