Edited at

atom tree-view を全体的にタイトにする

More than 3 years have passed since last update.


概要

Atom エディタでディレクトリを開いた際、左ペインに表示されるツリービューを全体的に縮めるというか、もうちょっとタイトに表示したいなと思ったのでしました。


どのぐらいタイトになるか

このぐらいタイトになります。


やり方


style.less をいじる

[Atom]-[Open Your Stylesheet] で style.less を開き、以下をコピペして保存します。


style.less

.list-group li:not(.list-nested-item),

.list-tree li:not(.list-nested-item),
.list-group li.list-nested-item > .list-item,
.list-tree li.list-nested-item > .list-item {
line-height: 21px; /* 同じ値 */
letter-spacing: -0.1rem; /* お好みで */
}

li.directory.entry.list-nested-item.project-root.selected::before {
height: 31px; /* ディレクトリのハイライトはそのまま */
}

.list-group .selected::before,
.list-tree .selected::before {
height: 21px; /* 同じ値 */
}

/* 一部の icomoon アイコンに top が指定されていてズレるため調整 */
.icon-file-text[data-name$=".scss"]:before,
.icon-file-text[data-name$=".sass"]:before,
.icon-file-text[data-name$=".npm"]:before,
.icon-file-text[data-name$=".gulp"]:before {
font-family: "icomoon";
font-size: small;
text-align: center;
content: "\e603";
color: #825078;
}



反映

style.less 保存時に反映されるので、ベストな値を探してみて下さい。letter-spacing はお好みで。