情弱エンジニアのなかのblog

一人前のエンジニアになる為のブログです

Atomの便利なパッケージ minimapの紹介

Atomでいくつかのパッケージを入れてみて便利なものがあったので記載いたします。

minimap

前々から気になっていたのですが、スクロールバーが小さくて使いにくかったので 「minimap」というパッケージを入れてみました。

f:id:nonaka-katuma-hal:20171107172914j:plain

右側の赤い枠の中の半透明部分がスクロールバーになっていてこれだけでだいぶ助かります またコードを縮小表示しているのでそちらも便利です。 これがミニマップということでしょう。

この「minimap」の機能を増やすパッケージもあります。

minimap-find-and-replace

右側のミニマップに検索文字列を強調して表示します。

f:id:nonaka-katuma-hal:20171107173402j:plain

「FORMAT」という検索文字が存在する部分がミニマップで白く塗りつぶされています。

minimap-bookmarks

Atomでブックマークした場所がミニマップで表示されます。 ちなみにブックマークは「ctrl」+「alt」+「F2」になります。

f:id:nonaka-katuma-hal:20171107174526j:plain

minimap-autohide

スクロールしている時以外はじゃまなので非表示にしたいときは「minimap-autohide」を入れれば スクロールしていないときはミニマップが消えるようになります。

minimap-cursorline

カーソルの位置をミニマップで表示することができます。 早速入れてみますと

f:id:nonaka-katuma-hal:20171107181238j:plain

この赤い枠の中の半透明のバーがカーソル位置なのですが、、、 このままでは分かりにくいのでカーソルに色をつけます。

「minimap-cursorline」のパッケージにも書いてあるのですが以下のcssをユーザーのスタイルシートに記述します。

.minimap .cursor-line {
  background: green;
}

Settingsの「Themes」を選択して一番上の「Choose a Theme」の下に記載されています [You can also style Atom by editing your stylesheet] の[your stylesheet]がリンクっぽくなっているので押します。 ファイルが開くので末尾にでもコピペすればカーソル位置が色付きで表示されます。

f:id:nonaka-katuma-hal:20171107182158j:plain

これで先ほどよりは見やすくなりました。

Atomのショートカットキーやスタイルシートの表示方法は以下のサイトを参考にしました。

Atomショートカットキー一覧(for Windows) | パソラボ

Atomエディタのスタイルシート - Qiita