Prettier とは

Emacser のみなさん、Prettier をご存知でしょうか？

Prettier とは、様々な言語に対応したコードフォーマッターです。2019年2月現在、次の言語に対応しています。

JavaScript（ES2017 含む）
JSX
Flow
TypeScript
CSS、Less、SCSS
JSON
GraphQL
Markdown（GFM 含む）

What is Prettier?

Prettier は

an opinionated code formatter

と謳っているように、デフォルト設定を推奨するフォーマッターです。
言い換えれば、Prettier のスタイルに関する意見を押しつけてくる（opinionated）、という特徴をもっています。

なぜこの特徴をもっているのかについては、こちらの公式ドキュメントをご覧ください。

Why Prettier?

簡単に言うと、スタイルに関する不毛な議論を止めるため、です。

また、ESLint や stylelint などの Linter と異なり、Prettier はコードスタイルに特化しています。

Prettier vs. Linters

インストール

インストールについては、公式インストールガイドを参照してください。
日本語ではこちらの記事が詳しいです。

prettierの使い方 - Qiita

Emacs との連携

公式パッケージ

Prettier が提供する公式パッケージがMELPA からダウンロードできます。
GitHub リポジトリはこちらになります。

prettier/prettier-emacs

関数を自作する

公式パッケージをインストールしてもいいですが、関数を自作する方法もカンタンです。
もちろん、公式パッケージと同じく prettier コマンドがインストールされていることが前提です。

Emacs Lisp コードはこちら。

(defun my/prettier ()
  (interactive)
  (shell-command
    (format "%s --write %s"
      (shell-quote-argument (executable-find "prettier"))
      (shell-quote-argument (expand-file-name buffer-file-name))))
  (revert-buffer t t t))

やっていることは、

shell-command 関数で prettier --write コマンドを現在のファイルバッファに対して実行。
revert-buffer 関数で現在のバッファの表示を更新。

だけです。

キー割り当て

キーに割り当てておくと便利です。次の例では C-c C-p に割り当てています。

(global-set-key (kbd "C-c C-p") 'my/prettier)

ファイル保存時の自動実行

ファイル保存時に自動実行することもできます。次の例では、markdown-mode でのファイル保存時に、自動で my/prettier 関数を実行するようにしています。

(add-hook 'markdown-mode-hook
  (lambda ()
    (add-hook 'after-save-hook 'my/prettier t t)))

`./node_modules/.bin/prettier` を使う

普通は、prettier コマンドをグローバルインストールしておくだけで十分だと思います。
しかし、プロジェクトによって違うバージョンの prettier を使いたくなるかもしれません。

そんなときは、add-node-modules-path パッケージを使うのがカンタンです。
この方法は、公式パッケージの README でも紹介されています。

codesuki/add-node-modules-path

Prettier のカスタマイズ

Prettier はデフォルト設定を推奨しますが、設定をカスタマイズすることも可能です。
設定方法は2つあります。

設定ファイル（推奨）
コマンドライン引数

設定ファイル

個人的には設定ファイルを推奨します。コマンドライン引数の方法では、Emacs にしか適用できませんが、設定ファイルであれば、ターミナル実行でも他のエディタでも適用できるからです。

グローバルインストールした場合は、ホームディレクトリ（~/ or $HOME/）に設定ファイルを置きます。
また、あるディレクトリに設定ファイルを置いた場合は、そのディレクトリ配下で設定が有効になります。
ファイル名は .prettierrc や prettier.config.js となります（YAMLやJSONフォーマットにも対応しています）。
詳細は、こちらの公式ドキュメントをご覧ください。

Configuration File

コマンドライン引数

例えば、セミコロン無しのルールにしたい場合は、--no-semi コマンドライン引数を追加します。

(shell-command
- (format "%s --write %s"
+ (format "%s --write --no-semi %s"
    (shell-quote-argument (executable-find "prettier"))
    (shell-quote-argument (expand-file-name buffer-file-name))))

どのコマンドライン引数が使えるか調べたいときは、prettier --help コマンドを実行するか、公式ドキュメントをご覧ください。

まとめ

Emacs と Prettier を連携させることで、自分の好きなタイミング（編集やファイル保存時など）でコードをフォーマットすることができます。
コードを整形するための無駄なキーストロークが不要になり、より本質的なプログラミングに貴重な時間を使えるようになります。
一度でいいので、ぜひ Prettier を試してみてください！

Emacs + Prettier = ❤️