⌨️

VSCodeでよくあるgit操作をキーボードだけでする(tigみたいに）

2021/09/24に公開

Git

VS Code

tech

私は普段VSCode + Neovim拡張を利用しています。

私自身似非vimmerなのですが、「vimの効率的なキーバインドで高速に業務を進める」という精神みたいなのものは凄く素敵だと思っています。

今回は私が頻繁に使っているgitの操作をキーボードだけで行えるようにショートカットを設定してみました（日々改善中です）

VSCodeのGit機能って凄く便利

VSCodeのサイドバーに配置してくれているgitの機能凄く便利じゃないですか？

編集したファイルや新規追加したファイルの差分を見れてとても便利です。

git add でステージングしたり、逆にステージングから戻したりという操作もマウス操作で簡単にできていいですよね。

コミットメッセージを入力してささっとコミットできるのも素敵です。

この辺りの操作をキーボードで行いたいと思ってキーボード設定を変更してみました。

keybinding.json

tigみたいな感覚でgit操作できるようにキーバインドを以下のように設定してみました。

[
  // Git管理
  // サイドバーのgitボタンクリックの動作
  {
    "key": "shift+cmd+g",
    "command": "workbench.view.scm"
  },
  // spaceでエディターにdiffを開きつつカーソルは残したまま
  {
    "key": "space",
    "command": "list.selectAndPreserveFocus",
    "when": "sideBarFocus && activeViewlet == 'workbench.view.scm'"
  },
  // uでステージング
  {
    "key": "u",
    "command": "git.stage",
    "when": "sideBarFocus && activeViewlet == 'workbench.view.scm'"
  },
  // shift + c でコミットメッセージの入力へ
  {
    "key": "shift+c",
    "command": "git.commitStaged",
    "when": "sideBarFocus && activeViewlet == 'workbench.view.scm'"
  },
  // shfit + p　でプッシュ
  {
    "key": "shift+p",
    "command": "git.push",
    "when": "sideBarFocus && activeViewlet == 'workbench.view.scm'"
  },
  // shift+u でステージングを戻す
  {
    "key": "shift+u",
    "command": "git.unstage",
    "when": "sideBarFocus && activeViewlet == 'workbench.view.scm'"
  }
]

デモ

これで大体いつもやるような操作をキーボードでやるとこんな感じになります。

※私はNeovim拡張を利用しているため上下カーソル移動は矢印キーではなく、hjklで行っています

プレビューを見てステージング
- じっくり見たいときはEnterなどでスクロール
ステージングしたものをやっぱり戻す

ステージングしたファイルのコミット

デモは省略しておりますが、gitのPush先を設定していれば shift + p でgit pushもできます。

おまけ

ファイラーの操作も vimっぽく y や p キーで操作できるようにしています。

cmd + 0 でファイラーを開き
j や k でカーソルを移動
vで分割して開く
lで分割せずに開く
yでファイルやディレクトリをコピー
pでペースト
shift + yで相対パスをコピー

  // サイドバーのファイラーへ移動
  {
    "key": "cmd+0",
    "command": "workbench.view.explorer"
  },
  {
    "key": "alt+cmd+[Semicolon]",
    "command": "workbench.action.terminal.new"
  },
  // 新規ファイル作成
  {
    "key": "shift+cmd+n",
    "command": "explorer.newFile"
  },
  // 新規フォルダ作成
  {
    "key": "shift+cmd+m",
    "command": "explorer.newFolder"
  },
  // dでファイルを削除
  {
    "key": "d",
    "command": "deleteFile",
    "when": "explorerViewletVisible && filesExplorerFocus && !explorerResourceReadonly && !inputFocus"
  },
  {
    "key": "alt+cmd+backspace",
    "command": "-deleteFile",
    "when": "explorerViewletVisible && filesExplorerFocus && !explorerResourceReadonly && !inputFocus"
  },
  // rでファイルのリネーム
  {
    "key": "r",
    "command": "renameFile",
    "when": "explorerViewletVisible && filesExplorerFocus && !explorerResourceIsRoot && !explorerResourceReadonly && !inputFocus"
  },
  {
    "key": "enter",
    "command": "-renameFile",
    "when": "explorerViewletVisible && filesExplorerFocus && !explorerResourceIsRoot && !explorerResourceReadonly && !inputFocus"
  },
  // vで分割して開く
  {
    "key": "v",
    "command": "explorer.openToSide",
    "when": "explorerViewletVisible && filesExplorerFocus && !explorerResourceIsRoot && !explorerResourceReadonly && !inputFocus"
  },
  // ファイルのコピー
  {
    "key": "y",
    "command": "filesExplorer.copy",
    "when": "explorerViewletVisible && filesExplorerFocus && !explorerResourceIsRoot && !explorerResourceReadonly && !inputFocus"
  },
  // ファイルのペースト
  {
    "key": "p",
    "command": "filesExplorer.paste",
    "when": "explorerViewletVisible && filesExplorerFocus && !explorerResourceIsRoot && !explorerResourceReadonly && !inputFocus"
  },
  // shift+y で相対パスをコピー
  {
    "key": "shift+y",
    "command": "copyRelativeFilePath",
    "when": "!editorFocus"
  },
  {
    "key": "shift+alt+cmd+c",
    "command": "-copyRelativeFilePath",
    "when": "!editorFocus"
  },

VSCodeのGit機能って凄く便利

keybinding.json

デモ

おまけ

Discussion