Honmushi blog
ソースコードフォーマッター「Prettier」を導入してみる2020/01/16

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

「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'

おわりに

簡単に導入でき、コードのフォーマットが自動で行われるので便利でした。ソースコードのルールが統一され見やすくなります。 ソースコードを書くときはもちろんですがそれ以外の手順書などのテキストを書くときにも役に立つと思います。

コミット時に自動で実行できるようにしたり、とても便利なのでプロジェクトに導入してみてはいかがでしょうか。 わたしもこれからは積極的に導入していこうと思います。

  • このエントリーをはてなブックマークに追加