Ubuntu 20.04 LTS git VSCode

VSCode設定: VSCodeとGitの連携

Ubuntu Desktop環境構築 Part 14

公開日: 2021-01-02
更新日: 2022-08-01

  Table of Contents

Overview

VSCode Extension List

Git Graph Workspace観点のBranch/Commit変更履歴の確認
Git History ファイル観点のCommit履歴の確認

Write a commit/merge message via VSCode

What I Want

  • git commit or git merge コマンド入力時にVSCodeが立ち上がり, commit template画面が表示される
  • commit message記載後, Ctrl + Enterで内容の保存とcommit編集画面の終了が実行される

How

  1. .gitconfigに以下の記述を追加
1
2

[core]
	editor = code --wait
  1. shortcuts.jsonに以下の記述を追加
1
2
3
4
5
6
7
8
9
10

    {
        "key": "ctrl+enter",
        "command": "git.commitMessageAccept",
        "when": "editorFocus && !isInDiffEditor && resourceDirname =~ /.git$/ && resourceFilename == COMMIT_EDITMSG"
    },
    {
        "key": "ctrl+enter",
        "command": "git.commitMessageAccept",
        "when": "editorFocus && resourceDirname =~ /.git$/ && resourceFilename == MERGE_MSG"
    },
設定 意味
<args> =~ <pattern> argsが<pattern>にマッチした際にTrueを変えす
resourceDirname 編集ファイルのdirectory名
resourceFilename 編集ファイル名

Viewing diffs with the previous commit in VS Code

What I Want?

  • Git: Open Changes と ファイル編集画面をトグルできるようにしたい
  • トグルの際は同じコマンドでon-offの切り替えができるようにしたい
  • diffのinline viewのトグルもできるようにしたい

Implementation

  • ステージング前に変更点を確認したい場合は確認したいファイルを開いた状態でGit: Open Changes実行すると, 直前のcommit時のファイルの状態との比較をハイライト付きで確認することができる
  • コンフリクト発生時における,該当箇所の確認も同様の方法で可能

Setup

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

    {
        "key": "ctrl+alt+h",
        "command": "git.openChange",
        "when": "editorFocus && !isInDiffEditor",
        "description": "Open Git Open Changes"
    },
    {
        "key": "ctrl+alt+h",
        "command": "workbench.action.closeActiveEditor",
        "when": "editorFocus && isInDiffEditor",
        "description": "Close Git Open Changes"
    },
    {
        "key": "ctrl+alt+i",
        "command": "toggle.diff.renderSideBySide",
        "when": "editorFocus && !isInDiffEditor",
    },

Quick-Viewing diffs Between the current file and the previous commit in VS Code

What I Want?

  • 編集中ファイルについて前回Commitとの差分をクイックにEditor内部で確認する
  • Editor画面のみに修正/変更/削除箇所のインジケーターが表示される(minimapには表示させない)

Setup

  • VSCodeの「Gutter Indicator」というデフォルト機能をOnにする
  • settings.jsonファイルを以下のように指定
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

{
    // Controls diff decorations in the editor.
    //  - all: Show the diff decorations in all available locations.
    //  - gutter: Show the diff decorations only in the editor gutter.
    //  - overview: Show the diff decorations only in the overview ruler.
    //  - minimap: Show the diff decorations only in the minimap.
    //  - none: Do not show the diff decorations.
    "scm.diffDecorations": "gutter",

    // Controls the visibility of the Source Control diff decorator in the gutter.
    //  - always: Show the diff decorator in the gutter at all times.
    //  - hover: Show the diff decorator in the gutter only on hover.
    "scm.diffDecorationsGutterVisibility": "always",
    
    // https://stackoverflow.com/questions/43969277/how-can-you-disable-gutter-indicators-in-vs-code
    //"scm.diffDecorationsGutterAction": "none",
}

REMARKS

非表示にしたい場合は以下のように指定

1

  "scm.diffDecorations": "none"

Viewing diffs Between the active file and the selected

What I Want?

  • Git: Open Changes と同じ形式で2つのファイル間のdiffを確認したい

Implementation

  • 比較元のファイルの内容がエディタの左側に, 比較対象のファイルの内容が右側に表示
  • 上で設定したtoggle.diff.renderSideBySideのショートカットコマンドでinline viewのToggleも可能

Setup

1
2
3
4
5
6

    {
        "key": "ctrl+alt+c",
        "command": "workbench.files.action.compareFileWith",
        "when": "editorFocus && !isInDiffEditor",
        "description": "Compare the active file with the selected"
    },

Checking Commit Graph with Git Graph

What I Want

  • Workspace観点でLocal & Remote Branchesの変更履歴がグラフで見れる
  • Commitの詳細情報がGUIで確認できる
  • ショートカットコマンドはいつでも実行できるようにする

Install

Command Palleteにて以下のコマンドを実行

1

ext install mhutchie.git-graph

Setup

1
2
3
4

    {
        "key": "ctrl+shift+g",
        "command": "git-graph.view"
    },
  • ショートカットコマンドを任意のタイミングで実行したいのでwhen keyを設定しない

Checking Commit History with Git History

What I Want

  • ファイル観点でCommit履歴と差分確認

Install

Command Palleteにて以下のコマンドを実行

1

ext install donjayamanne.githistory

Setup

1
2
3
4
5

    {
        "key": "alt+h",
        "command": "git.viewFileHistory",
        "when": "editorFocus && !isInDiffEditor"
    },

Quick-Checking Which File Causes Conflict

What I Want

  • Confictを引き起こすファイル一覧をEditorの中から確認したい

How to Check

  • 「ソースコントロールビュー」経由でChanges一覧が確認可能

アルファベットの意味

アルファベット 説明
U git管理下にないファイル（untracked）
A added
M modified
D deleted
R renamed
C conflictしたファイル

References

関連ポスト

VSCode公式ドキュメント/Marketplace

VSCodeショートカット設定参考

その他VSCode設定

Share Buttons
 Share on:
Feature Tags
Leave a Comment
(注意：GitHub Accountが必要となります）
CONTENTS