引数が関数だらけの時に便利なjsコードフォーマッター「prettier」

JavaScriptフォーマッター「prettier」の紹介です。

テキストエディタでJavascriptのコードを書く時には " eslint " のルールに沿って、
Atomエディタであれば " beautify " 等のフォーマッターを使ってコーディングいる人も多いと思われます。

予めルールを定義していると コーディングが楽になるのは事実ですが、
下のスニペットのように、関数内の引数に関数が混ざっていると、思っていたフォーマットと違う整形がされる時もあります。

/* prettierのレポジトリページから */

// 規約的な扱い
foo(arg1, arg2, arg3);
// 実際にされたフォーマット
foo(reallyLongArg(), omgSoManyParameters(), IShouldRefactorThis(), isThereSeriouslyAnotherOne());

// 思っていたフォーマット 
foo(
  reallyLongArg(),
  omgSoManyParameters(),
  IShouldRefactorThis(),
  isThereSeriouslyAnotherOne()
);

上のスニペットはコード規約的には問題ありませんが、コード規約が 時としてソースコード全体を見辛くしてしまうケースもあります。

そんな時に便利に使えそうなコードフォーマッターが「prettier」で、
prettierは関数の引数内に関数が混ざっている時に、改行を挟んで見易くしてくれます。

prettierはnode.jsで作られているので、パッケージマネージャーを使って行っていきます。
( CLI版の他に、テキストエディタの Emacs, Atom, Vim, Visual Studio Code用のプラグインも用意されています )

# npmを使ってインストールする場合
npm install -g prettier
# yarnを使ってインストールする場合
yarn global add prettier

# 正しくインストールされていると 'prettier'コマンドラインが使えるようになります
➜  prettier
Usage: prettier [opts] [filename ...]

Available options:
  --write              Edit the file in-place (beware!)
  --stdin              Read input from stdin
  --print-width   Specify the length of line that the printer will wrap on. Defaults to 80.
  --tab-width     Specify the number of spaces per indentation-level. Defaults to 2.
  --flow-parser        Use the flow parser instead of babylon
  --single-quote       Use single quotes instead of double
  --trailing-comma     Print trailing commas wherever possible
  --bracket-spacing    Put spaces between brackets. Defaults to true, set false to turn off

# Atomエディタ　( Alt + Ctrl + F で使えるようになります )
apm install prettier-atom
# VSコード (CMD + Shift + P -> Prettier)
ext install prettier-vscode

基本的な使い方は、コマンドライン上で' prettier --write ファイル名 ' という形になります。

# js/test.jsをリフォーマットする場合
prettier --write js/test.js

その他にもワイルドカードを噛ませることで、ファオルダ全体を一括で成形したり、フォーマットするパーサーを変更することも可能です。
( デフォルトではbabylonとうパーサーが使われており、' flow 'にも変更が可能 )

# 'js'フォルダの拡張子が'.js'のファイルを成形
prettier --write js/*.js

# ダブルクオーテーションをシングルクォーテーションに変換... 
#  flowにパーサーを変更し、'.jsx'のファイルを成形
prettier --single-quote　--flow-parser --write react/*.jsx

下のスニペットがAtomエディタのBeautifyを使った場合とprettierを使ってコードを成形した場合の比較です。

// *date-fnsのライブラリから

/* AtomエディタのBeautifyを使ってフォーマットした場合 */
const isWithinRange = require('date-fns/is_within_range');

const result = isWithinRange(new Date(2014, 0, 3), new Date(2014, 0, 1), new Date(2014, 0, 7),);

console.log(result);

/* prettierを使ってフォーマットした場合 */
const isWithinRange = require('date-fns/is_within_range');

const result = isWithinRange(
  new Date(2014, 0, 3),
  new Date(2014, 0, 1),
  new Date(2014, 0, 7),
);

console.log(result);

次は関数型に書けるライブラリ、Ramda.jsの関数で幾つか検証してみましたが、可視性は一目瞭然です。

// Ramda.jsから

/* AtomエディタのBeautifyを使ってフォーマットした場合 */
// http://ramdajs.com/docs/#pipeK
var getStateCode = R.pipeK(parseJson, get("user"), get("address"), get("state"), R.compose(Maybe.of, R.toUpper));

// http://ramdajs.com/docs/#ifElse
var incCount = R.ifElse(R.has("count"), R.over(R.lensProp("count"), R.inc), R.assoc("count", 1));

//  http://ramdajs.com/docs/#when
var truncate = R.when(R.propSatisfies(R.gt(R.__, 10), "length"), R.pipe(R.take(10), R.append("…"), R.join("")));
truncate("12345"); //=> '12345'
truncate("0123456789ABC"); //=> '0123456789…'

/* prettierを使ってフォーマットした場合 */
// http://ramdajs.com/docs/#pipeK
var getStateCode = R.pipeK(
  parseJson,
  get('user'),
  get('address'),
  get('state'),
  R.compose(Maybe.of, R.toUpper),
);

// http://ramdajs.com/docs/#ifElse
var incCount = R.ifElse(
  R.has('count'),
  R.over(R.lensProp('count'), R.inc),
  R.assoc('count', 1),
);

//  http://ramdajs.com/docs/#when
var truncate = R.when(
  R.propSatisfies(R.gt(R.__, 10), 'length'),
  R.pipe(R.take(10), R.append('…'), R.join('')),
);
truncate('12345'); //=> '12345'
truncate('0123456789ABC'); //=> '0123456789…'

以上がprettierの紹介でした。

各種テキストエディタ用のプラグインも用意されているので、node.jsを使うプロジェクトや、フロントエンドエンジニアさんには活躍する場面が多そうです。

Javascriptの全てのコードフォーマットを置き換えるわけではありませんが、部分的に使うとコードの可視性を劇的にあげることができそうなので、気になった人はチェックしてください！

Github : jlongster/prettier