Macのテキストエディタ「Atom」の設定とパッケージ

2015年3月16日

ウェブブラウザ(Chromium)ベースのテキストエディタ。Jedit(主にメモとマルチファイル検索&置換で使用)とCoda2で十分なのでオーバースペックになりそうですが、Coda2の機能と見た目(Panic Palette)を意識しつつ試してみました。インストール環境はOSX Yosemiteです。

2016年10月4日 記事をアップデートしました。

Atomについて

Atom (テキストエディタ) Wikipedia

Atomは、GitHub社が開発したテキストエディタである。ChromiumとNode.jsをベースとしたAtom Shellで動作するようにつくられており、JavaScript、HTML、CSSをインタフェースとして用いたデスクトップアプリケーションである。

Atom – Documentation

Our goal is a zero-compromise combination of hackability and usability: an editor that will be welcoming to an elementary school student on their first day learning to code

フィロソフィーがいいですね。

公式ウェブサイト

ATOM 正しい表記は「ATOM」「Atom」のどっちなんだろう。
公式ウェブサイトからファイルをダウンロードしてインストール。対応プラットフォームは、OS X 10.8 or later, Windows 7 & 8, RedHat Linux, and Ubuntu Linuxです。↓インストール後にAtomを立ち上げた場合に表示されるウェルカムスクリーン。

Atom Welcome Screen

Atom Welcome Screen

基本設定をカスタマイズ

早速使いやすいようにざっくりと基本設定をいじります。
Atomのメニューから「Atom – Preferences」か ショートカットキー「commandキーと ,」で設定画面(Settings)が開きます。インストールや設定関連をGUIで変更できるのは良いですね。

Atom 設定画面(Settings)

Atom 設定画面(Settings)

「Settings」の「Editor」の項目を変更しました。
・font family → Hiragino Kaku Gothic Pro
・Font Size → 14
・Preferred Line Length → 180
・Scroll Sensitivity → 20
・Show Indent Guide → オン
・Soft Wrap → オン

インストールしたパッケージ

パッケージのリンク先にスクリーンショットや説明(英語)があります。

メニューの日本語化

Atom パッケージ 日本語化 Japanese-menu

Atom パッケージ 日本語化 Japanese-menu


japanese-menu
Atomのメニュー、設定画面、コンテキストメニューが日本語化します。
使い勝手が大幅にアップしますね!

日本語の折り返し

デフォルトでは2バイト文字(日本語)の折り返しができないためインストールしました。※事前にAtom本体の設定(settings)で「softwrap」をオン。
japanese-wrap
※2016年9月1日追記 Atom 1.2.0で、2バイト文字のソフトラップがサポートされましたので、1.2.0以降のバージョンではこのプラグインのインストールの必要はありません。

単語(日本語)の選択をし易く

japanese-word-selection
日本語の文章中の単語をダブルクリックで選択できるようになります。

全角空白を表示

show-ideographic-space
全角空白は、半角スペース2つと区別がつかないので、全角の空白部分に記号を表示します。

CSS カラーコード値のハイライト

Atom パッケージ cssカラーリング pigments

Atom パッケージ cssカラーリング pigments

Atom Color Highlightの紹介をしていましたが、abe33/atom-color-highlightは開発を終了し、pigmentsに移行しています。

CSS カラーコード値の入力

Atom パッケージ カラー選択 color-picker

Atom パッケージ カラー選択 color-picker

color-picker
右クリックでコンテキストメニューを表示し、「color picker」を選択するか、「コマンド」「シフト」「C」キーの同時押しで表示されます。

入力をアグレッシブに

activate-power-mode
ネタ要素が強いですが、入力時のエフェクトが凄いのでお試しください。

アイコンの見た目をリッチに

Atom パッケージ アイコン変更 file-icons

Atom パッケージ アイコン変更 file-icons


file-icons
デフォルトでは、アイコンがカラーですが「file-icons」の設定画面からカラー無しにすることが可能です。

マークダウンをAtom上でブレビュー

Markdown Preview
Day Oneやブログはマークダウンで書いているので探してみましたが、デフォルトでインストールされていました。ショートカットキー「ctrl-shift-M」でブレビューされます。

Atom マークダウン プレビュー

Atom マークダウン プレビュー

設定が完了した画面

Atom カスタマイズ

Atom カスタマイズ

Atomの使用状況の報告を停止

Atomは、Google Analyticsでユーザの使用状況を収集しています
Metrics package から引用

Report Atom usage metrics to the team by way of Google Analytics.
If you do not want this information reported, you can disable this package. Open the Settings View by running the Settings View: Open command from the Command Palette, go to the Packages section, and then find and disable the Metrics package.

停止するには、パッケージ「Metrics」の設定画面からを行えます。

Atom パッケージ 解析 metrics

Atom パッケージ 解析 metrics

ちょっとしたTips

サイドバーを非表示

デフォルトで右側に表示されるサイドバー(ツリービュー)。
サイドバーを非表示にするには、「コマンド」と「\」キーの同時押しで表示/非表示を切り替えることができます。

サイドバーを右側に表示

Atomのメニュー「パッケージ」にある項目「Tree View」の「Toggle Tree Side」を選択するとサイドバーが右側に表示されるようになります。左側に戻すには、再度選択すると元に戻ります。

Atomの雑記

Atom フルスクリーン

Atom フルスクリーン

Coda2で満足(タブのフォーカスだけは分かりにくい!)しているので、すぐにAtomに移行するまでの魅力は感じられなかった(まだ使いこなせていない)ですが、GUIで設定できて初心者の私でもカスタマイズはしやすいです。

ブログやメモはMarkdownで書いているので、まずはそれらを書く時に使用していきたいと思います!
フルスクリーンにすると集中できていい感じですね。