prettierを導入してLefthookと連携した

前回の記事はこちら。

patorash.hatenablog.com

今回は、prettierを導入して、gitでcommitする際にrubocopだけでなくprettierでもフォーマットチェックをさせるようにした話です。

prettierとは？

prettierは、フロントエンド用のコードフォーマットツールです。特に設定しなくてもデフォルトでいい感じにフォーマットしてくれることを目指しているらしいです。

prettier.io

フロントエンドのフォーマッタは使ってなかったのですが、パートナーさんが使っているという話を聞いてました。なので自分も入れたいなぁとは思っていたけれど、どうせならチーム全体に使えるようにしたかったので、プロジェクトで設定しました。

導入

導入は簡単で、prettierの公式のインストールを参照するのがいいとは思う。yarn使ってるなら、こう。

yarn add --dev --exact prettier

設定

除外リスト

prettierは多機能で、放っておくとjs, ts, css以外にもmdやyamlファイルまでコードフォーマットしようとします。別にそれらもしてもらっても構わないということだったら問題ないのですが、設定ファイルとかもあるし、mdは微妙に読みにくくなったりしたので、対象外としたくなりました。

prettierの除外リストは、.prettierignoreで、これを設定していきました。プロジェクトで使っているツールのjs,cssまで変更しようとするので（minioとかgraphidocとかsimplecovとか）、それらは除外するようにしました。

# Ignore artifacts:
build
coverage
total_coverage
/public/assets
/public/packs
/public/packs-test
/node_modules

# Ignore project files:
/.idea
/.bundle
/doc/schema
/.docker/minio

# Ignore all HTML files:
*.html

# Ignore all md files:
*.md

# Ignore all yaml files:
*.yaml
*.yml

# Ignore setting json files:
schema.json
tsconfig.json

# Ignore config.js files:
*.config.js

フォーマット設定

デフォルトでいい感じにしてくれるprettierですが、そうはいっても多少はルールを決めたいわけです。とはいえ、どういうのがいいかはチームで決めたかったので、ルールを募集して、パートナーさんが設定しているものを採用しました。.prettierrc.jsonに以下を登録しました。

{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true
}

エディタの設定

エディタでprettierの設定をしておくと、ファイル保存時に自動でコードフォーマットしてくれるのですが、それは各自で設定が必要なので、README.mdにその案内を書いておきました。

#### prettierの設定

prettierはエディタの設定をしておくと、ファイル保存時に自動でコードをフォーマットしてくれます。
使用しているエディタは各人異なりますので、使用しているエディタに合わせて設定をしておくとよいでしょう。
RubyMineを使用している人は、WebStormの設定を参照してください。

https://prettier.io/docs/en/editors.html

Lefthookと連携する

ここ以降で、前回の記事でとりあげたLefthookが活きてきます。git commit時にrubocopでチェックするのと同様に、prettierでもチェックさせます。

lefthook.ymlを更新しました。

pre-commit

rubocopとprettierは対象のファイルが異なるので、並行に実行させても問題ないので、parallel: trueにしてチェックさせています。うちでは開発環境をdockerにしているので、そのあたりは適宜読み替えてください。

pre-commit:
  parallel: true
  commands:
    rubocop:
      glob: "*.{rb,rake}"
      exclude: "application.rb|routes.rb"
      run: docker-compose run --rm runner bundle exec rubocop -P {staged_files}
    prettier:
      glob: "*.{js,ts,json,css,scss,sass}"
      run: docker-compose run --rm runner yarn prettier --check {staged_files}

タスクを修正

前回、lefthook run fixerでrubocopのコード自動修正を実行させるようにしていたのですが、そこに、prettierでのコード自動修正の処理を追加しました。こちらも、並列実行させても問題ないので、parallel: trueに設定しています。

fixer:
  parallel: true
  commands:
    ruby-fixer:
      glob: "*.{rb,rake}"
      exclude: "application.rb|routes.rb"
      run: docker-compose run --rm runner bundle exec rubocop --force-exclusion --auto-correct {staged_files}
    prettier-fixer:
      glob: "*.{js,ts,json,css,scss,sass}"
      run: docker-compose run --rm runner yarn prettier --write {staged_files}

これで、コードフォーマットについてはだいぶ死角がなくなってきた！💪

rubocopのルール設定で放置しているのは、まだたくさんあるけれど…🤤まぁ.rubocop_todo.yml対応はボチボチやっていきます。

patorashのブログ

方向性はまだない