[Atom] Tree-Viewの使い方と設定



Nプログラマ(@Nprog128)です。

AtomにはTreeViewというパッケージがあり、これを使うとディレクトリやファイルを階層構造で表示することができます。

» tree-viewパッケージのサイトはこちら

これはデフォルトで入っているので、すぐに利用することができます。

これについての使い方や設定に関する備忘録を残しておきます。

環境情報

アプリ名 バージョン
Mac OS X
high sierra
10.13.6
Atom 1.34

使い方

TreeViewの表示の切り替え

まずはAtomの左側にTreeViewの表示してみます。

メニューから切り替え

Atomの上部メニューからPackage > Tree View > Toggle を選択します。

/img/article/2019/07/25/01.png
Tree Viewの切り替え

TreeViewが表示なら非表示、非表示なら表示に切り替わります。

ちなみに、上部メニューのViewからでも切り替えができます。

/img/article/2019/07/25/02.png
Viewからの切り替え
なプ

どちらから切り替えても結果は同じです。

ショートカットキーから切り替え

先程の画像に表示されているCmd K Cmd Bですね。

/img/article/2019/07/25/03.png
Toggleのショートカットキー

これは順番に押していきます。

具体的には、Cmdを押しながらKを押し、次にCmdを押しながらBを押すといった感じです。

なプ

Cmdは押しっぱなしでも大丈夫です。

また、Cmd + \でも同じ用に切り替えることができます。

自分はキーボードの設定がカオスなため、Cmd + K, Cmd + Bで切り替えています。。。

プロジェクトの開き方

先程開いたツリービューからプロジェクト(ディレクトリ)を開いてみます。

今回はこのようなプロジェクトを開いてみます。

1sample
2├── 01.txt
3└── files
4    ├── 01.txt
5    ├── 02.txt
6    └── 03.txt
なプ

各ファイルは空のテキストファイルです。

ツリービューの上にマウスカーソルを持っていき、右クリックを押します。

表示されたメニューの中に、Add Project Folderという項目があるので、それをクリックします。

/img/article/2019/07/25/06.png
メニュー > Add Project Folder

ファイルダイアログが開くので、そこから開きたいプロジェクトを選択して開きます。

開くとツリービューの中に、先程選択したプロジェクト配下のファイルやディレクトリが表示されるようになります。

/img/article/2019/07/25/07.png
Tree Viewに開いたプロジェクトが表示

複数のプロジェクトを開くこともできるので、作業しやすい状態にしておくといいです。

毎回プロジェクトを開くのが面倒であれば、Atomのproject-managerパッケージを使うといいと思います。

プロジェクトの消し方

追加したプロジェクトを消すには、TreeViewに表示されているプロジェクトの上にマウスカーソルを持っていきます。

右クリックを押してRemove Project Folderを押せば、追加したプロジェクトを削除することができます。

/img/article/2019/07/25/08.png
プロジェクトを削除
プロジェクト自体が削除されるわけではない

Remove Project Folderで削除したプロジェクトは、それ自身は削除されません。

ファイル削除とは違うので注意です。

先程の右クリックのメニューにDeleteが表示されていますが、これを押すと削除になります。

間違って大事なProjectを削除しないように注意しましょう。

設定

Atomの見た目は、Style.lessファイルに記述することでカスタマイズすることができます。

カスタマイズしたい要素は、Developer Toolsを使って調べます。

要素のクラス名が分かれば、そこに対してカスタマイズをしていく感じです。

設定するための準備

Style.lessを開く

Style.lessは、Atomの設定を開き(Cmd + ,) > Themes > Choose a Theme > your stylesheetで開くことができます。

/img/article/2019/07/25/04.png
Style.lessを開く

Developer Toolsを開く

Developer Toolsは、View > Developer > Toggle Developer Toolsで起動することができます。

/img/article/2019/07/25/05.png
Developer Toolsの起動

フォントサイズの変更

要素を調べたところ、cssのtree-viewというクラスがありました。

ここにfontサイズを指定すれば変更することができそうです。

atomの設定からstyles.lessファイルを開いて( 開き方 )、以下のように記述しました。

設定 コードを開く
設定
1.tree-view {
2  font-size: 14px;
3}

これで保存すれば、TreeViewに表示されているフォントのサイズが変わります。

なプ

変化が分かりづらい場合は、20pxなど大きな設定で試してみると分かりやすいです。

終わりに

今回は、TreeViewの使い方と設定、という内容でした。

エディタ内でディレクリやファイルの操作ができると、Finderなどのウィンドウ切り替えが少なくなり便利になります。

それでは、このへんで。
バイナリー!

\ ちょっとお買い物 /


関連した記事