Emacs + Prettier = ❤️

# Prettier とは

Emacser のみなさん、[Prettier](https://prettier.io) をご存知でしょうか？

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

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

[What is Prettier?](https://prettier.io/docs/en/index.html)

Prettier は

> an opinionated code formatter

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

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

[Why Prettier?](https://prettier.io/docs/en/why-prettier.html)

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

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

[Prettier vs. Linters](https://prettier.io/docs/en/comparison.html)

# インストール

インストールについては、[公式インストールガイド](https://prettier.io/docs/en/install.html)を参照してください。
日本語ではこちらの記事が詳しいです。

[prettierの使い方 - Qiita](https://qiita.com/kiida/items/405bb07c4b52bfee0219)

# Emacs との連携

## 公式パッケージ

Prettier が提供する公式パッケージがMELPA から[ダウンロード](http://melpa.org/#/prettier-js)できます。
GitHub リポジトリはこちらになります。

[prettier/prettier-emacs](https://github.com/prettier/prettier-emacs)

## 関数を自作する

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

Emacs Lisp コードはこちら。

```elisp
(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))
```

やっていることは、

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

だけです。

### キー割り当て

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

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

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

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

```elisp
(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`](http://melpa.org/#/add-node-modules-path) パッケージを使うのがカンタンです。
この方法は、公式パッケージの [README](https://github.com/prettier/prettier-emacs#using-node_modulesbinprettier) でも紹介されています。

[codesuki/add-node-modules-path](https://github.com/codesuki/add-node-modules-path)

# Prettier のカスタマイズ

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

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

## 設定ファイル

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

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

[Configuration File](https://prettier.io/docs/en/configuration.html)

## コマンドライン引数

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

```diff
(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` コマンドを実行するか、[公式ドキュメント](https://prettier.io/docs/en/cli.html)をご覧ください。

# まとめ

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

Emacs + Prettier = ❤️