Git の変更内容をわかりやすく表示できる GitLens

Gitでソースコードを管理していると、どんな時系列で誰が変更したのか追ってみたくなることもあるかと思います。

そんなときGitLensというVisual Studio Codeの拡張機能を使用することで、Gitの変更内容をわかりやすく表示できるようになりますので、紹介します。

インストール方法

Visual Studio Codeの拡張機能画面から GitLens と検索します。

表示されたら Install をクリックで完了です。

インストール完了後、Quick Setup画面が表示されます。

サンプルソースの Clone

GitLensの使いかたをみていくために、GitLensのソースコードをGithubからCloneしてみましょう。

GitLensのソースコードは以下にあります。

https://github.com/Axosoft/vscode-gitlens

GitHub CLIを使ったCloneは以下のコマンドで実行できます。

gh repo clone Axosoft/vscode-gitlens

Current Line Blame と Git Code Lens

ソースコードの現在行やクラスの先頭に更新情報が表示されます。

タイムライン表示

ソースコードを右クリックすると、いくつかメニューが追加されています。

その中から「Open Timeline」をクリックすると、タイムラインが表示されます。

ファイル履歴表示

同じく右クリックメニューの中に「Open File History」というメニューがあります。

Tag View

コマンドパレットで「GitLens: Show Tags View」があります。

これを使うとタグに関連する履歴を表示できます。

変更したファイルを開く

コマンドパレットの「GitLens: Open Changed Files」を使用すると、変更したファイルのみ開くことができます。

変更していないファイルを閉じる

コマンドパレットの「GitLens: Close Unchanged Files」を使用すると、変更していないファイルを閉じることができます。

設定画面の表示方法

「GitLens: Open Settings」でずらずらずらっと表示されます。

これを一つ一つ解説するのは大変なので、割愛です。。。。。

コマンドパレット

「GitLens」から始まるものがたくさんあります。

公式ドキュメント

公式ドキュメントは以下にあります。

https://github.com/Axosoft/vscode-gitlens#readme

Visual Studio Codeは機能ありすぎ！

Visual Studio Codeはオープンソースのコードエディタです。

コードエディタと言いつつも、デバッグもできますし簡易Webサーバも立てられますし、ソースコード中のTODOを検索してツリー表示することもできます。

インストール可能な拡張機能の数は30,000以上と言われており、とても便利な機能が数多くあります。

そのため、Visual Studio Codeを使いこなすには、それなりの情報収集が必要です。

「Visual Studio Code実践ガイド」は、

• Visual Studio Codeの基本的な使い方
• TypeScriptやPythonなど、実際の開発を通した Visual Studio Code機能の紹介
• Visual Studio Code拡張機能の開発方法の紹介

などが収録されており、Visual Studio Codeの機能を体系的に理解するのに最適な書籍です。

電子書籍化されていますので、まずは kindleなどで試し読みしてみてはいかがでしょうか。