Zenn
🍣

VS codeの拡張機能「Claude Code Chat」のEnter送信を無効化してCtrl+Enterに変更する方法

に公開
JavaScript
TypeScript
VS Code
Claude Code
Vibe Coding
tech

はじめに

Claude Code Chatは、VS Code内でClaude AIと美しいチャットインターフェースで対話できる素晴らしい拡張機能です。しかし、デフォルトではEnterキーでメッセージが送信されてしまい、改行したい時に不便を感じることがあります。

この記事では、Enter送信を無効化してCtrl+Enter（MacではCmd+Enter）で送信するように修正する方法を紹介します。

修正内容

変更するファイル

src/ui.ts の1547行目付近

修正前のコード

messageInput.addEventListener('keydown', (e) => {
    if (e.key === 'Enter' && !e.shiftKey) {
        e.preventDefault();
        sendMessage();
    } else if (e.key === '@' && !e.ctrlKey && !e.metaKey) {

修正後のコード

messageInput.addEventListener('keydown', (e) => {
    if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
        e.preventDefault();
        sendMessage();
    } else if (e.key === '@' && !e.ctrlKey && !e.metaKey) {

変更点の説明

  • 修正前: !e.shiftKey - Shiftキーが押されていない時にEnterでメッセージ送信
  • 修正後: (e.ctrlKey || e.metaKey) - Ctrl（Windows/Linux）またはCmd（Mac）キーと一緒にEnterを押した時のみ送信

これにより、通常のEnterキーは改行として機能し、Ctrl+EnterまたはCmd+Enterでメッセージを送信できるようになります。

インストール方法

1. リポジトリのクローン

git clone https://github.com/andrepimenta/claude-code-chat.git
cd claude-code-chat

2. 依存関係のインストール

npm install

3. コードの修正

上記の修正をsrc/ui.tsファイルに適用します。

4. ビルド

npm run compile

5. VSIXファイルの作成

npm install -g @vscode/vsce  # vsce がインストールされていない場合
vsce package

これでclaude-code-chat-x.x.x.vsixファイルが生成されます。

6. VS Codeにインストール

code --install-extension claude-code-chat-x.x.x.vsix

または、VS Codeの拡張機能ビューから「Install from VSIX...」を選択してインストールすることもできます。

使い方

修正版をインストール後：

  • 改行: 通常のEnterキー
  • 送信:
    • Windows/Linux: Ctrl + Enter
    • Mac: Cmd + Enter

まとめ

この簡単な修正により、Claude Code Chatがより使いやすくなります。長いコードやマークダウンを入力する際に、誤って送信してしまうことなく、快適に複数行のメッセージを作成できるようになります。

参考リンク

Discussion