かめ。ブログ

フロントエンドエンジニアが「Web」「Youtube」「3D」「お金」「お買い物情報」など、興味があることについて深堀っていくブログです。

VScode ChatGPT genieでコミットメッセージ作成やレビューをしてもらう

1 分前

GPT-3.5系を使うとあまりうまくレビューしてくれないことが多かったです。GTP-4を使いましょう。

それでも完璧なレビューをしてくれるとは限らないので参考程度に考えるとよかなと思います。

-U10で前後の変更箇所を広げて、diff.txtに吐きだす

git diff  -U10 > ./tmp/diff.txt

広げておくと、周りの情報を加味したコミットメッセージを作ってくれます。 コミットの内容にもよるので、-U10の部分はそのときどきで変更してください。

吐き出し先はtmpとしています。tmpフォルダは作っておかないとエラーになります。

vscodeのユーザー設定にGenieのカスタムプロンプトを追加する

commit messageを書いてもらう

"genieai.promptPrefix.customPrompt1": "あなたはプロのエンジニアです。今回の変更・追加箇所に対してコミットメッセージを日本語で考えてください",
"genieai.promptPrefix.customPrompt1-enabled": true,

レビューをしてもらう

"genieai.promptPrefix.customPrompt2": "あなたはプロのエンジニアです。今回の変更・追加箇所に対して日本語でレビューを行ってください",
"genieai.promptPrefix.customPrompt2-enabled": true,

英語が良い場合は日本語での部分を消すなどすると良いかと思います。

promptは完璧なものではないと思うので、うまくいかない場合や、さらによいpromptがある場合は差し替えて使ってください。(教えてくれたらさらに嬉しいです)

レビューしてほしい観点をさらに細かく書いておくと、それあわせて詳細に書いてくれます。

前提: 
* プロのフロントエンドエンジニアです。
* これからレビューを行うという視点で、diffの解析を行なってください。
* 今回の変更・追加箇所を意識してください。
* コードの説明は不要です。
* 問題がない旨の記載不要です。
* 全体のコードの記載は不要です。

変更に対して、下記の観点でレビューを行なってください。
* コードエラーの確認
* 文法エラーの確認
* 単語、タグ名、属性名のミスの確認
* より良いコード、リファクタの提案
* より良い関数名の提案
* 閉じタグの有無

日本語で記載してください。

使い方

customPromptを追加すると、他と同様左クリックに表示されるので、テキストを選択してからGenie: Custom prompt 1 or 2を選択してください。

ほかのpromptも日本語化しておくと便利

"genieai.promptPrefix.addTests": "次のコードに対するテストを実装してください",
"genieai.promptPrefix.findProblems": "次のコードの問題点を見つけてください",
"genieai.promptPrefix.optimize": "次のコードを最適化してください",
"genieai.promptPrefix.explain": "次のコードを説明してください",
"genieai.promptPrefix.addComments": "次のコードにコメントを追加してください",
"genieai.promptPrefix.completeCode": "次のコードを完成させてください",

参考

VSCode 拡張機能 ChatGPT - Genie AI を使用するための下準備。モデル選択や日本語化等(Windows版 gpt-4対応) - Qiita

まとめ

copilotやchatgptの進化も早いので、今後この辺りもサクッと気軽にできる時代になってくるとは思います。 現状の一つのやり方の提案として。

おすすめの本

Javascriptを勉強する際に読んでおくと良いなと思った本たちです。
特にリーダブルコードは綺麗なコードを書く考え方が身に付きます。いまでもその考え方が根付いています。

{}
{}
{}

よくみられてる記事