gladevise Logo
HomeAboutContact

【Vim】変更履歴をツリー状に遡れるプラグインundotreeのススメ


下の動画のようにundoしてから何かを編集し、やっぱりundo前に戻したいと思った時、undoが上書きされてしまって戻れない、という状況に出くわしたことはありませんか?

例えば、 hogeと書いてから、undoしてhageと書き直します。 この状態からundoしてもhogeには戻れません。そう、もうあのフサフサの頃には戻れない!!

多くのエディタでは変更履歴を直線的に管理するため、undoを使って変更履歴を遡ってから編集してしまうと、undo前の状態に戻れません。

Vimは変更履歴をツリー状に管理するため、変更履歴を上書きするような操作をしても、undo前の状態に戻すことができます。

undotreeはこのツリーを見やすく、使いやすくしてくれるプラグインです。

Install

Vim-plugの場合

 Plug 'mbbill/undotree'

Settings

あくまで一例ですが、私は以下のように設定して<leader>uでUndotreeToggleが起動するようにしています。

nnoremap <leader>u :UndotreeToggle<cr>

Usage

UndotreeToggleでundotreeが開きます。 J,KでTreeを移動、<,>で保存時の状態に移動できます。

?でキーバインドが確認できるので、忘れても安心です。

Reference

https://github.com/mbbill/undotree

Recent Posts

Next.jsでsitemap.xml生成する

Next.jsでSSRやnext-sitemapを用いてsitemap.xmlを生成する方法を紹介します。

Rust製の爆速端末Alacrittyのインストールと設定方法

Rust製のGPUで高速レンダリングするターミナルエミュレータAlacrittyのインストール方法、tmux、NeoVimでのTrue Color、カラースキーム、Font、デフォルトの端末の設定などの紹介をします。

react-modalを使ってModalコンポーネントを作る

react-modalを使ってModalコンポーネントを作る方法を解説します。モーダルの外側をクリックして閉じる、アニメーションを付ける等の基本的な機能から、CSS-in-JS(Emotion)を使ってタイリングの方法を説明します。

Emotionを使ってGatsbyでtailwindを使う方法

Gatsby & Emotion & tailwindの環境構築、スタイリング方法についてまとめました。twin.macroを使えば、classNameだけでなく、Styled Componentsやcss propでスタイリングできます。

GatsbyのLinter/Formatter, CSS-in-JS環境構築

Gatsbyのインストール方法、プロジェクトの作り方、Linter(ESLint, stylelint)/Formatter(prettier)、CSS-in-JS(styled-components, Emotion)、tailwindの設定方法を説明します。