Edited at

Github製エディタ ATOMをカスタマイズしてみた

More than 5 years have passed since last update.

先日ベータ版がローンチされたGithub製のエディタ、ATOM

Web開発に必要な知識でカスタマイズが可能なので、すこし試してみました。

スタイルの設定は CSS(less)

挙動の設定は Javascript(CoffeeScript)

で定義します。

ファイルは ~/.atom 下に style.less, init.coffee があるのでこのファイルを編集してください。

cmd+alt+i で Chrome の Webインスペクタが起動します。

編集対象のエレメントはこれで確認してください。

#ss 2014-03-01 at 23.25.56 .png

今回は以下のような感じでスタイルを変更してみました。


style.less

body, html {

// 全体のフォントの設定
font-family: 'Ricty';
}

.tree-view {
ol.entries.list-tree li {
// ファイルツリーのフォントサイズが大きすぎるので変更
font-size: 8pt;

span.icon:before {
// フォルダ・ファイルアイコンは8ptだとつぶれるので 10pt に
font-size: 10pt;
}
}
}

.vertical {
// パネルを分割するとアクティブになっているパネルがわかりにくいので、非アクティブのパネルは透過
.pane {
opacity:0.40;

&.active {
opacity: 1.0;
}
}

// パネルの境界がわかりにくいのでborderの色を変更
.panes .pane-row > *,
.panes .pane-column > * {
border-right: 1px solid rgba(150, 150, 150, 0.2);
}
}

.editor {
.line.cursor-line {
background: #1F2224;
}

.cursor {
}
}


変更後は以下のようになります

#ss 2014-03-02 at 1.03.55 .png

簡単なので、皆さんも試してみてください


追記

ATOMおすすめパッケージ もご一緒にどうぞ