ソースコードフォーマッター「Prettier」を導入してみる

JavaScript

TypeScript

「Prettier」というツールの紹介です。コードフォーマッターと呼ばれるもので、ソースコードのインデントやスペースなどを整えてくれるものです。

https://prettier.io

以前「Expo JavaScript Style Guide」を読んでみるという記事で見つけてなんとなく利用していたのですが、改めて使い方をまとめておきます。

これ入れておけばソースコードのインデントやコーディングルールなどがある程度統一できるのでとても便利です。チーム開発でももちろんですし、個人で書いているコードも綺麗になるのでおすすめです。

概要

インストール
ルールを作成する
適用しないファイルの指定
実行してみる
pretty-quick でコミットのhookで実行
vimで利用する

インストール

npmでインストールするなら以下です。

npm install prettier --save-dev --save-exact

ルールを作成する

.prettierrcを作成して、例えば以下のようにします。Expoのリポジトリで使われているものを参考にコピーしました。

{
  "printWidth": 100,
  "tabWidth": 2,
  "singleQuote": true,
  "jsxBracketSameLine": true,
  "trailingComma": "es5"
}

指定できるパラメータの詳細

Print Width
行の折り返し、デフォルト80
Tab Width
インデントのスペースの数デフォルト2
Tabs
インデントをスペースでなくタブにするデフォルト false
Semicolons
ステートメントの最後にセミコロンデフォルト true
Quotes
“のかわりに’を使うデフォルト false
Quote Props
オブジェクトのプロパティにクオートする
JSX Quotes
jsxでは”のかわりに’を使うデフォルト false
Trailing Commas
最後の要素のコンマを出力デフォルト none
Bracket Spacing
オブジェクトリテラルの{}の間にスペースデフォルト true
JSX Brackets
jsxの最後の>を単独行でなく、最後の行末につけるデフォルト false
Arrow Function Parentheses
関数の引数が一つでも()を付けるデフォルト avoid
Range
対象とする範囲を指定
Require pragma
ファイル先頭にプラグマのあるファイルのみを対象にするデフォルトfalse
Insert Pragma
ファイル先頭にプラグマを追加デフォルトfalse
HTML Whitespace Sensitivity
HTMLのスペースの扱いを指定
Vue files script and style tags indentation
Vueファイルのタグ内のコードをインデントするかどうかデフォルト false
End of Line
改行コードの指定。改行コードは維持するか最初に出てきたコードに合わせるそうです。デフォルト auto
lfに設定することで、Linuxやmacの\nとWindowsの\r\nの違いをこれで統一できます。

適用しないファイルの指定

.prettierignoreにprettierによる整形の対象としないファイルを指定できます。指定の仕方はgitignoreと同じです。
/node_module/などはデフォルトで無視されるようになっているようです。

他にもコードの中で特別に整形したくない場合、コメントで指定することでそのブロックを対象から外すことができるようです。

// prettier-ignore

実行してみる

まずはルールに従っているかのチェックを行います。対象のファイルを指定して実行します。
All matched files use Prettier code style!と出力されればルールに従っており修正する箇所が必要ありません。
Code style issues found in the above file(s). Forgot to run Prettier?と出力される場合はルールに沿っていない箇所があり、prettierでformatできます。

prettier --check "src/**/*.js"

--writeをオプションで与えると整形してファイルを上書きできます。

prettier --write src/index.js

pretty-quick

pretty-quickはgitなどのバージョン管理でステージングにあるファイルを対象に、prettierを実行できるパッケージです。

husky と組み合わせる

huskyはgit のコミット時などに簡単にhooksを追加できるパッケージです。これを組み合わせれば、コミット時に対象ファイルにpretty-quickを実行できます。

まずはインストール

npm install husky --save-dev

package.jsonに以下を追加

{
  "husky": {
    "hooks": {
      "pre-commit": "pretty-quick --staged"
    }
  }
}

コミットするとprettierによるチェックが行われ結果が返されます。ルールに従っていた場合はコミットが通りますが、修正が必要な箇所がある場合はコミットが取りやめとなります。自分で修正するかprettierで整形をおこないコミットし直しましょう。

vimで利用する

いくつか利用可能なプラグインがあります。vim-prettierが良さそうでしたので私はこちらを利用しています。簡単に利用できます。

vimrcに以下を追加します。

NeoBundle 'prettier/vim-prettier'
let g:prettier#config#print_width = 100
let g:prettier#config#single_quote = 'true'
let g:prettier#config#jsx_bracket_same_line = 'true'
let g:prettier#config#bracket_spacing = 'true'
let g:prettier#config#trailing_comma = 'es5'