prettierの使い方

ということで、JavaScriptのフォーマッタのprettierの紹介です。
React Confで紹介されてたものを色々試してみようと思って、まずはprettierを試してみました。

追記

• 2017/4/14: Prettier1.0(とMinor fixあてた1.1.0)が出ました。本記事の内容は1.0でもそのまま問題なく適用できました。
• 2019/7/7: prettier-eslintよりもeslint-plugin-prettierを使ったほうが良さそうです

prettierとは

• JavaScriptのコードを整形してくれるフォーマッタ。他言語で言うとGolangのgofmtみたいなもの。
• 他のフォーマッタと比べて設定項目が少ないので開発者間で迷いなく共通のスタイルで統一される。
• まだベータ。
• 1月にリリースされてから2ヶ月ちょっとでスター数6000超え。例えばeslintは3年以上前のリリースで7000ちょっとなので、かなり成長早いと思われる。(star history)
• ES2017、JSX、Flowとかもサポートされてる。
• React本体にもこのPRで適用された。
• もちろんReact関係なく、普通のJavaScriptにも適用できる。(このポストにもReactは全く出てきません)
• eslintとの連携も可能。
• 色々なエディタ/IDEでサポートされてる。
• コードをもっとぷりてぃにしよう、みたいなおやぢギャグが言いたくなる。

使い方

単体で使う

とりあえずプロジェクトを初期化してprettierを入れてみます。

yarn init
yarn add -D prettier

次に適当にJavaScriptのファイルを作ります。

index.js

'use strict'

var foo = {
  bar: 'bar string',
  baz: 11
}

console.log(foo);

prettierしてみます。

$ prettier index.js
"use strict";

var foo = {
  bar: "bar string",
  baz: 11
};

console.log(foo);

コードが整形されました。

--writeを付けるとファイルを上書きします。

$ prettier --write index.js
index.js 63ms

eslintと合わせて使う。

(2019/7/7追記)
このissueとこの質問への回答を見る限り、現在はprettier-eslintよりもeslint-plugin-prettierが推奨のようです。
(追記ここまで)

既存のプロジェクトだと既にeslintが入っててprettierが整形する結果とconflictすることがあると思います。そんな場合はprettierのオフィシャルアカウントが提供しているprettier-eslintを使うことでprettierで整形した結果をeslint --fixに渡すことができるようになります。

コマンドラインから実行する場合にはprettier-eslint-cliも必要になります。

ということで、それぞれインストールしていきます。

yarn add -D eslint prettier-eslint prettier-eslint-cli

eslint --initはyarnに対応してないので、手動で設定ファイルを作ります。
eslintの設定ファイルはjson、yml、JavaScriptで書けますが、React本体に倣ってJavaScriptで書きます。

今回は簡単にprettierのデフォルトとconflictする設定を確認するために、クォートをシングルにする設定だけ入れてみました。

.eslintrc.js

'use strict';

const ERROR = 2;

module.exports = {
  rules: {
    'quotes': [ERROR, 'single']
  }
};

そしてprettier-eslintを実行してみます。

$ prettier-eslint index.js
'use strict';

var foo = {
  bar: 'bar string',
  baz: 11,
};

console.log(foo);

success formatting 1 file with prettier-eslint

これも--writeオプションを付けると上書きできます。

$ prettier-eslint --write index.js
success formatting 1 file with prettier-eslint

precommitフックを使う

gitのレポジトリには整形後のものだけを残しておきたいと思います。そんなときはprecommitフックでprettierを実行して整形したものをコミットするようにします。
prettierのREADMEにあるhuskyとlint-stagedを使えば、prettier-eslintの場合でも同じように実現できます。

yarn add -D husky lint-staged

そしてpackage.jsonに以下を追記します。(ちなみにgitのルートディレクトリから見てサブディレクトリにpackage.jsonがある場合は少し設定が変わります)

  "scripts": {
    "precommit": "lint-staged"
  },
  "lint-staged": {
    "*.js": [
      "prettier-eslint --write",
      "eslint", // これを入れないとエラーがあってもコミットされてしまう
      "git add"
    ]
  },

試しにindex.jsを以下のようにダブルクォートかつ末尾のセミコロン無しなものに書き換えます。

index.js

"use strict"

var foo = {
  bar: "bar string",
  baz: 11,
}

console.log(foo)

commitテスト用に同じ内容のファイルfoo.jsを作ります。

cp index.js foo.js

そしてindex.jsのみコミットします。

git add index.js
git commit -m 'added index.js'

するとprecommitに書いた処理が走って整形されたコードがコミットされます。

addしたindex.jsのみが整形された上でコミットされてます。(foo.jsは整形もコミットもされない)

$ git show --pretty="" --name-only  f83bc9b5a12f8a713
prettier/index.js

エディタ連携

prettierのREADMEには様々なエディタ/IDEで対応されているように書かれています。でもprettier-eslint-cliのREADMEにはVimのみ書かれているので、今回はvim連携を試します。

READMEにはautocmd BufWritePre *.js :normal gggqGでプラグイン無しでも保存時に自動整形できるよみたいな男らしいことが書かれていますが、カーソル位置が保存されないので、このissueにあるようにneoformatを使うと良いんじゃないかと思います。

設定はこんな感じです。インストール自体はdeinとかで適宜入れてください。

let g:neoformat_javascript_prettiereslint = {
      \ 'exe': './node_modules/.bin/prettier-eslint',
      \ 'args': ['--stdin'],
      \ 'stdin': 1,
      \ }
augroup fmt
  autocmd!
  autocmd BufWritePre * Neoformat
augroup END
let g:neoformat_enabled_javascript = ['prettiereslint']

最後に

今回試したものはここに置いてます。参考になれば幸いです。でもちょっとだけ設定変えちゃいました(てか、シングルクォートとダブルに戻したので紛らわしいかもです)。