メニューを閉じる

テクノデジタルグループ

メニューを開く

2018.01.05

開発環境・ツール

自分の使っているatomのパッケージやカスタマイズ ~紹介編~

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

私が開発するときによく使っているテキストエディタ「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;
}

 


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

 

 

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


【記事への感想募集中!】

記事への感想・ご意見がありましたら、ぜひフォームからご投稿ください!
  • こんな記事が読んでみたい、こんなことが知りたい、調べてほしい!という意見も募集中!
  • いただいた感想は今後の記事に活かしたいと思います!

感想フォームはこちら


【テクノデジタルではエンジニア/デザイナーを積極採用中です!】

下記項目に1つでも当てはまる方は是非、詳細ページへ!
  • 自分でアプリを作ってみたい
  • ITで世の中にワクワクを生み出したい
  • 使いやすさ、デザインにこだわったWebサイトを開発したい

採用情報の詳細はこちら


Qangaroo(カンガルー)

  • 徹底した見やすさと優れた操作性で、テストの「見える化」を実現。
  • テストの進捗が見える。開発がスマートに進む。
  • クラウド型テスト管理ツール『Qangaroo(カンガルー)』

【テクノデジタルのインフラサービス】

当社では、多数のサービスの開発実績を活かし、
アプリケーションのパフォーマンスを最大限に引き出すインフラ設計・構築を行います。
AWSなどへのクラウド移行、既存インフラの監視・運用保守も承りますので、ぜひご相談ください。
詳細は下記ページをご覧ください。

https://www.tcdigital.jp/infrastructure/

最近の記事