はじめまして。新卒のジラエルです。

私が開発するときによく使っているテキストエディタ「Atom」。
パッケージが豊富であったり自分でスタイルシートを編集出来たりと拡張性の高いエディタです。
ここでは私が現在使っているカスタマイズを紹介します。

設定紹介

パッケージ紹介

テーマ紹介

スタイル紹介

・設定紹介
※括弧内は日本語化している時の表記

「Allow Pending Pane Items(プレビュータブを使う)」
true→false

「Close Empty Windows(削除されたファイルのタブを閉じる)」
false→true

・パッケージ紹介

インストールするパッケージ

「japanese-menu」
メニューなどを日本語化してくれます。

「auto-encoding」
自動で適した文字のエンコードを選択してくれます。
ファイルを開くときにatomを起動すると適応されないことがありますが、一度タブを切り替えると適応されるようです。

「highlight-selected」
選択している変数名などをすべて強調表示してくれます。
個人的には必須だと思っていて、後述のminimapと組み合わせるととても便利です。

「atom-beautify」
インデントなどを自動でそろえてくれます。
よく使用される言語複数に対応していますが、幾つかの言語は別のプログラムを追加で用意する必要があります。
少し精度は落ちますが、atomデフォルトのオートインデントもあるので必須ではないです。

「minimap」
エディタ右側に、コード全体を縮小した「ミニマップ」を表示します。
sublime textなどのアレです。
横幅は狭くなってしまいますが、全体を把握しやすい上、スクロールも楽になるのでお勧めです。

「minimap-highlight-selected」
先述したhiglight-selectedをminimapでも強調表示してくれるものです。
どこで使われているかが一目瞭然になるのでminimapが気に入った方にはお勧めです。
お気に入りです。

「activate-power-mode」
ネタパッケージです。
文字を入力することでコンボを繋ぐことができ、コンボ数が増えてくると入力にエフェクトが付きます。
楽しくて見にくいです。
効率が上がるかどうかはその人次第なのでお勧めはできません。
私は眠気覚ましに使っています。

無効化するデフォルトパッケージ

「spell-check」
綴りの間違いなどを教えてくれるものですが、日本語に対応しておらず、赤い波線が付いて読みにくくなってしまいます。
日本語で書くことが少ないのであれば有効のままの方が便利だと思います。

「wrap-guide」
桁数を分かりやすくする為、縦線を表示してくれるものです。
気になってしまう人はこれを無効にすると表示されなくなります。

「deprecation-cop」
atomのアップデートによってパッケージに影響が出る場合などに右下に警告を出すものです。
自分が書いている内容に問題が無いのに、エラーマークがエディタ内に出ているのが気になる人にお勧めです。
多分問題はないと思います。

・テーマ紹介

インターフェース

「Atom Dark Clockwork」
エディタをwindows10のようなシンプルで透き通ったデザインに変更します。

シンタックス

「Atom Xoria」
他のシンタックスに比べ、鮮やか過ぎず、明るい。
白に色を付けたような色使いで、色によって読みにくいってことが無いです。

・スタイル紹介
デフォルトのツリービューがスペースを取りすぎている気がするので、フォントサイズを小さくしたり間隔を狭くして、コンパクトな見た目にします。

参考サイト

.tree-view {
  // background-color: whitesmoke;
  font-size: 10px;
}

.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: 0rem; /* お好みで */
}

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;
}

見た目はこんな感じになります。

紹介は以上です。
後日、導入編を書くかもしれません。