r7km/s

r7kamura per second.

Atom Git Integration

2014-08-01

※ http://blog.atom.io/2014/03/13/git-integration.html の編訳記事

Atomを使っていて、ファイル一覧やステータスバーの色が変わっていることに気付いたことはあるだろうか。 こいつの正体はGitだ。 Atomは標準でGitレポジトリを管理する機能を備えていて、Gitの一般的な操作は勿論それに関連した様々な機能を備えている。 今回はAtomのGitに関連する幾つかの機能を見ていきながら、それらがどういう風に動くのかを説明していこうと思う。

Git API

最初に言っておくと、この記事で触れるパッケージと機能は全てAtomのCore Git API上に実装されている。 atom.projectというグローバルにアクセスできるオブジェクトがgetRepo()というメソッドを持っており、 これが現在のプロジェクトのGitレポジトリを返すようになっている。 これを使えば、ファイルの状態や変更点など現在のレポジトリの状態を調べられる。 この機能には、git-utilsというlibgit2とのネイティブバインディングを行うライブラリが用いられている。

Checkout HEAD revision

まずは私のお気に入りのcmd-alt-zから見ていこう。 このキーボードショートカットは、現在エディタで開いているファイルをHEADリビジョンにcheckoutする。 つまり、保存してstageに載せた変更を取り消して、HEADのcommit時点の状態に戻すということだ。 これはコマンドラインからgit checkout HEAD -- <path>とgit reset HEAD -- <path>を実行するのと本質的には変わらない。 ちなみにこのコマンドはundoスタックに積まれるので、cmd-zを使えばコマンド実行前の状態に戻せる。

Git status list

Atomには標準でfuzzy-finderパッケージが付いており、cmd-tでプロジェクト内のファイルを開いたりcmd-bで他の画面に移動したりできる。 このパッケージにはcmd-shift-bというのも付いていて、変更のあったファイル一覧をポップアップすることができる。 これらのファイルはコマンドラインでgit statusを実行したときに表示されるものと同じものだ。 アイコンを見れば、ファイルがuntracked状態なのかそれとも変更されたのか分かるようになっている。

Commit editor

AtomはGit commit用のエディタとして使えるし、 language-gitというcommit、merge、rebase時のシンタックスハイライトを行うパッケージも備えている。 次のようなコマンドで、Git commit時のエディタとしてAtomを使うように設定できる。

git config --global core.editor "atom --wait"

50文字か65文字を超えたあたりでlanguage-gitパッケージが色付けしてくれるので、 より簡潔なcommitメッセージが書けるようになっている。 この辺の見た目は~/.atom/styles.lessを編集すれば変更できる。

.editor .git-commit.line-too-long.deprecated {
  color: orange;
  text-decoration: none;
}

.editor .git-commit.line-too-long.illegal {
  color: #fff;
  background: #DA2C43;
  opacity: 0.9;
}

Status bar icons

Atomにはstatus-barパッケージが最初から入っていて、ステータスバーの右側にGit関係の情報を表示してくれる。 例えば現在のブランチであったり、派生元ブランチから何commit離れているかというようなことも表示される。 加えて、現在のファイルがuntrackedなのか、変更されているのか、または無視されているのかといったことや、 最後のcommit以降何行変更されているのかということも表示してくれる。

Line diffs

標準で入っているgit-diffパッケージによって、追加、編集、削除された行の横には色が付く。 加えてalt-g downとalt-g upで前後の変更行に移動できる。

Tree view

tree-viewパッケージの機能で、ファイル一覧の中で変更されているものは色付けられる。 変更されたファイルは太字で表示したいって？ こういうコードを~/.atom/styles.lessに追加しよう。

.tree-view .entry.directory.status-modified > .header,
.tree-view .entry.file.status-modified {
  font-weight: bold;
}

.status-addedや.status-ignoredクラスも利用できる。 次のスクリーンショットでは、新規ファイルは緑、変更されたファイルはオレンジ、無視されているファイルはグレーで表示されている。

Further tweaks

cmd-ctrl-shift-gでstyleguideを開けば、更に利用可能なCSSクラスを調べられる。

Happy Hacking!