🐻

GitHub で Flutter のコードの差分を見やすくする

2023/02/14に公開

こんにちは。やまたつです。

Flutter のコードレビューをするときに Padding を追加しただけなのに、大量の差分が出てどこの変更か分かりずらい時はありませんか?

GitHub にはインデントやスペースによるズレの変更は表示しない方法があるので紹介します。

Before

https://github.com/yamatatsu10969/playground-flutter/pull/1/files

After

https://github.com/yamatatsu10969/playground-flutter/pull/1/files?w=1

いかがでしょうか。
どちらも Padding を追加しただけですが、 After の方が差分がわかりやすくなっていると思います。

適用方法

手動で適用

  1. 歯車マークをクリック
  2. Hide whitespace にチェックを入れる

もしくは、URL の末尾に ?w=1 を追加すると同様のことができます。

自動で適用(※ chrome 環境のみ)

(他の環境にも同じような extension があると思いますが、私は chrome しか使わないので chrome のみの紹介とさせていただきます🙏)

  1. chrome extension の GitHub Whitespace を追加する
  2. GitHub のレビューページを開くと勝手に適用される
    仕組み的には URL の末尾に ?w=1 が自動で追加されるようです。

※自動で適用の注意点

Python のようにインデントがコードに直接影響が出るような環境ではこの extension は向いていないと思います。
また、Flutter でもインデントのズレに気付きにくくなる可能性が高くなるので CI などで検知できる仕組みを導入しておくと良いと思います。

おわりに

快適な Flutter のコードレビューライフを送りましょう!

Discussion

ログインするとコメントできます