VSCode上でのPRレビューを使いやすくする

はじめに

最近、 VSCode 上でマルチラインコメントが使えるようになりました 🎉
これを機に、Github 上で行っていたレビューを VSCode に一本化したいなーと思った次第です。
ただ、標準の差分エディターの背景色が見づらいので、いい感じにカスタマイズしてみました。

前提

• VSCode に Github 拡張機能がインストール済み

マルチラインコメント機能

これは、Github UI 上で実装されている複数ラインに対してコメントを追加することができる機能です。（サンプルコードの元）

この機能が最近 VSCode でも使えるようになりました。
この機能に関する Issue は約 3 年前に起票されており、ついに実装が完了したようです。

画像のように、VSCode からでも UI 上と同じ操作感でマルチラインコメントを追加することができます。
この機能が実装されたことで VSCode 上でのレビューが格段に行いやすくなりました。

差分エディターの背景色をカスタマイズする

VSCode のデフォルトの背景色はこんな感じです。
個人的に、色調が強く目が疲れる配色です。

こちらに関して、背景色のカスタマイズに関する Issue が挙がっており、わりと最近対応されたようです。
VSCode の settings.json に以下の設定を追加すれば、背景色のカスタマイズが可能になります。Issue 上でコメントされている配色例と使用イメージがこちらです。

"workbench.colorCustomizations": {
    "diffEditor.insertedTextBackground": "#00ff007c",
    "diffEditor.removedTextBackground": "#ff00007c",

    "diffEditor.insertedLineBackground": "#22336866",
    "diffEditor.removedLineBackground": "#72336a66",

    "diffEditorGutter.insertedLineBackground": "#223368ff",
    "diffEditorGutter.removedLineBackground": "#72336aff",

    "diffEditorOverview.insertedForeground": "#02b40b",
    "diffEditorOverview.removedForeground": "#a10000"
}

さらに、個人用に試行錯誤を試した結果の配色がこちらになります。

"workbench.colorCustomizations": {
    "diffEditor.insertedTextBackground": "#090b12",
    "diffEditor.removedTextBackground": "#b205b57c",

    "diffEditor.insertedLineBackground": "#22336866",
    "diffEditor.removedLineBackground": "#72336a66",

    "diffEditorGutter.insertedLineBackground": "#223368ff",
    "diffEditorGutter.removedLineBackground": "#72336aff",

    "diffEditorOverview.insertedForeground": "#0296b4",
    "diffEditorOverview.removedForeground": "#82059e"
}

おわりに

これで、快適レビューライフをおくることができますね✨