チーム開発をちょっと便利にする設定小ネタ集（VSCode/Git/GitHub/Slack/Figma）

キカガクプラットフォーム部のエンジニアの岸です。
キカガクのプラットフォーム部で設定している、チーム開発をちょっと便利にする設定をいくつかまとめてみました（一部は個人での設定もあります）。同様のツールを使っている方の参考になれば幸いです！

VSCode のウィンドウに色をつけてリポジトリを区別
VSCode の推奨拡張機能を設定する
VSCode でコンフリクトしたファイル名をコミットメッセージに入れる
GitHub の Slack 通知（チャンネル編）
GitHub の Slack 通知（個人通知編）
Figma の Slack 通知
おわりに

VSCode のウィンドウに色をつけてリポジトリを区別

プラットフォーム部で管理しているリポジトリは複数あり、私がよく触るリポジトリだけでも 6 前後あります（フロントエンド・バックエンド合わせて）。たまに参照する他チームのリポジトリも含めると 10 以上になります。
複数のリポジトリで並行して作業していると、今どのリポジトリを開いているかわかりにくくなります。ウィンドウを切り替えるときも、どれがどれだかわからなくなりがちです。

そこで、VSCode の設定を利用してリポジトリごとにウィンドウの色を変えるように設定することで、リポジトリを区別しやすくしています。

リポジトリの .vscode/settings.json に以下のように設定を追加します。

{
  "workbench.colorCustomizations": {
    "titleBar.activeBackground": "#347ae2",
    "titleBar.activeForeground": "#f7f7f7",
    "titleBar.inactiveBackground": "#347ae2dd",
    "titleBar.inactiveForeground": "#f7f7f7dd"
  }
}

これにより、ウィンドウの行き来をする際に目的のリポジトリを探しやすくなり作業がスムーズになりました！
（ちなみに、タイトルバーの他にもサイドバーの色など他の領域の色も変更できますが、あまり色を入れすぎても目がチカチカしてしまうので、タイトルバーだけにしています。）

スクリーンショット。6 個のウィンドウが並んでおり、それぞれのタイトルバーは異なる色で表示されている。

それぞれに設定する色はある程度ルールを設けたほうがわかりやすいと考え、フロントエンドは濃いめの色、バックエンドは薄い色というざっくりとしたルールを設けています。また、フロントエンドアプリケーションについては、各アプリケーションの UI 上のテーマカラーがあるためそれを採用しました。
その他、リポジトリで主に使っている言語やフレームワークによって色を変えるなど、連想しやすい色を設定するとわかりやすくなると思います。

VSCode の推奨拡張機能を設定する

開発を進めるにあたって、「このリポジトリではこの拡張機能が必須（もしくはあると便利）」 ということがあります。
たとえば、以下のようなケースです。

リンターやフォーマッタを設定しているリポジトリでは、拡張機能を入れることでエディタ上での編集中にエラーに気づいてほしい・修正されるようにしてほしい
- ESLint
- Prettier
- EditorConfig
- Code Spell Checker
デフォルトでシンタックスハイライトがされないファイルタイプをシンタックスハイライトするために特定の拡張機能が必要
- Terraform（.tf ファイル）
- Prisma（.prisma ファイル）

こういった、みんなに入れほしい VSCode の拡張機能は、.vscode/extensions.json に以下のように設定を追加します。

{
  "recommendations": [
    "prisma.prisma",
    "dbaeumer.vscode-eslint",
    "streetsidesoftware.code-spell-checker",
    "editorconfig.editorconfig"
  ]
}

これにより、インストールしていない拡張機能がある場合、以下のスクリーンショットのようにメッセージが表示され、VSCode が自動でインストールを促してくれます。

スクリーンショット。「このリポジトリ用のおすすめ拡張機能'Prisma'拡張機能提供元: Prisma をインストールしますか？」と表示されている。

新メンバーが入るたびに説明する手間を省くことができますし、なにが必要だったかを忘れてしまうこともなくなります。

VSCode でコンフリクトしたファイル名をコミットメッセージに入れる

複数人で開発を進めていると、しばしば Git でコンフリクトが発生します。コンフリクトの解消を失敗すると、それが原因でバグが発生してしまうこともあります。
もしもコンフリクトによって不具合が発生してしまった場合、どのコミットの時点でコンフリクトしたかわかると原因が追いやすくなります。

コンフリクトが発生すると、本来、自動で生成されるマージコミットのメッセージにコンフリクトしたファイル名が出力されます。¹

しかし、VSCode の Git 機能では # から始まるコメントは無視されてしまうため、コンフリクトしたファイル名が消されてしまいます。

そこで Git の設定を変更して、コメントの記号を変えることでコンフリクトしたファイルをコミットメッセージに入れるようにしました。
以下のコマンドを実行することで、コメントに使用する記号を # から > に変更できます。

git config --global core.commentChar '>'

コメントに使用する記号を変更することで、VSCode の Git 機能でもコンフリクトしたファイル名が以下の例のようにコミットメッセージに入るようになります。

Merge remote-tracking branch 'origin/main' into feature/articles

> Conflicts:
> src/pages/articles/index.tsx
> yarn.lock

GitHub の Slack 通知（チャンネル編）

キカガクでは GitHub でリポジトリを管理しています。

GitHub の通知を流す専用のチャンネルを作り、Issue の追加やプルリクエストの追加やマージなど、リポジトリに関する変更があるとそこに通知を流すようにしています。
これにより、自分が関係しているリポジトリや他のリポジトリの状況を把握しやすくなります。

設定方法については詳しく解説されている記事があるので、そちらを参考にしてください。
https://zenn.dev/easy_easy/articles/298c9728e01819db9f50

GitHub の Slack 通知（個人通知編）

前述の、チャンネルに投稿される通知では、自分にも関係のない通知が流れてくることになります。そうすると、自分に関係のある通知が埋もれてしまい、見逃してしまうことがあります。
そのため、自分が見るべき通知は別で受け取るため、私は個人通知を設定しています。

GitHub の Scheduled reminders の設定ページから、目的の Organization の編集ページへ進み、以下のスクリーンショットのように Enable real-time alerts を有効にします。
なお、CI が失敗したときの通知 (Your PR has failed CI checks) は、どのワークフローを対象にするかを明示的に指定する必要があります。

個人的に特に便利に感じているのは、以下の 2 つです。

PR がコンフリクトしたときの通知 (Your PR has merge conflicts)
CI（ワークフロー）が失敗したときの通知 (Your PR has failed CI checks)

これらに気づけるようにしていないと、レビュアーの確認時に「コンフリクトしているので解消してください！」「ビルドエラー起きているので修正してください！」とコメントさせることになってしまい、お互いの時間を無駄にしてしまいます。これらの通知を受け取ることで、すぐに対応できるようになりました。

Figma の Slack 通知

キカガクではデザインツールとして Figma を使っています。デザインに関するやり取りは Figma 上で行うことが多いです。 Figma にも GitHub と同じような Slack 連携機能があり、Figma のコメント通知を Slack で受け取ることが可能です。コメントに気づきやすくなり、デザイナーとエンジニア間のコミュニケーションもスムーズになります。

設定方法について詳しくは Figma のヘルプを参照してください。

https://help.figma.com/hc/ja/articles/360039829154-Slack%E3%81%A7%E3%81%AEFigma%E3%81%8B%E3%82%89%E3%81%AE%E9%80%9A%E7%9F%A5%E3%81%AE%E5%8F%97%E3%81%91%E5%8F%96%E3%82%8A