Go to Qiita Advent Calendar 2024 Top
LoginSignup
591
661

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@spiegel-im-spiegel(im Spiegel Der Spiegel)

ATOM Editor をそろそろ始めようか

Last updated at Posted at 2015-05-28

私は20年来の「秀丸」ユーザでかつ重度の秀丸依存症なのだが，今まではともかく，これからも「Windows で秀丸」というわけには恐らくいかないので，マルチプラットフォームで使えるエディタを探している。

いくつか試してみたが，やはり ATOM Editor が相当だろう，と思うようになった1。 Visual Studio Code は MS 製品にしては面白いと思うし， .NET 5 のリリース時期あたりにはかなり良くなってる可能性もあるのだが，まだできないことのほうが多い。 Sublime Text は（Windows 版はあるけど）なんとなく Mac 用という印象。

そこで， ATOM Editor を実用性の観点から評価してみる。観点は以下のとおり。

  1. Windows 環境でのインストールや運用の簡易さ
  2. できるだけ少ない機能拡張（基本機能でどこまでできるか）
  3. 秀丸との比較

ATOM Editor のインストール

  • ATOM （2017年2月8日に 1.14 stable がリリース）

Windows 版は，インストールパッケージ（実行形式）をダウンロードしてインストールすればよい。

2015年6月25日に 1.0 が出た。おめでたう！

Beta Channel が登場。

2017年2月8日 に出た 1.14 stable の Windows 版で64ビットバージョンが登場した。

Proxy 設定

Firewall/Proxy で囲まれている環境ではパッケージの検索・インストールがうまくいかないので， HTTPS の Proxy サーバを指定する必要がある。指定には apm コマンドを使う。

C:>apm config list -l
; cli configs
globalconfig = "C:\\Users\\username\\.atom\\.apm\\.apmrc"
user-agent = "npm/2.5.1 node/v0.10.35 win32 ia32"
userconfig = "C:\\Users\\username\\.atom\\.apmrc"

; globalconfig C:\Users\username\.atom\.apm\.apmrc
cache = "C:\\Users\\username\\.atom\\.apm"

; node bin location = C:\Users\username\AppData\Local\atom\app-1.0.0\resources\app\apm\bin\node.exe
; cwd = C:\Users\username
; HOME = C:\Users\username
; 'npm config ls -l' to show all defaults.

C:>apm config set https-proxy http://username:[email protected]:8080

C:>apm config list -l
; cli configs
globalconfig = "C:\\Users\\username\\.atom\\.apm\\.apmrc"
user-agent = "npm/2.5.1 node/v0.10.35 win32 ia32"
userconfig = "C:\\Users\\username\\.atom\\.apmrc"

; userconfig C:\Users\username\.atom\.apmrc
https-proxy = "http://username:[email protected]:8080"

; globalconfig C:\Users\username\.atom\.apm\.apmrc
cache = "C:\\Users\\username\\.atom\\.apm"

; node bin location = C:\Users\username\AppData\Local\atom\app-1.0.0\resources\app\apm\bin\node.exe
; cwd = C:\Users\username
; HOME = C:\Users\username
; 'npm config ls -l' to show all defaults.

多分 Windows 特有の問題だと思うけど，同じツールをあちこちにインストールさせるのは何とかならないのだろうか。 node.js は既にインストール済みやっちうねん。少なくとも PATH 上に存在してるなら存在の有無とバージョンは確認できるんだから確認しろよ。だれがバージョン管理すると思うとるんや。あと，アプリケーションごとに Proxy の設定をさせるのもウザい。 Windows の設定を使えよ。この辺 Linux や Mac の人とかどうしてるの。

参考： プロキシで苦しむ人へ　プロキシ設定チートシート - Qiita

機能の詳細

Font Family の選択

エディタのフォントは作業効率に大きく影響する。これは私個人の感覚だが，日本語の地の文章がゴシック体なのは辛い。いくら綺麗だからといって Meiryo フォントをエディタに使う気にはならない。ただし，コードに関しては視認性が一番重要。ということで， “Font Family” の項目に以下を指定してみる。

Inconsolata, "MS Mincho"

Inconsolata は何かと便利なので OpenType フォントを取ってきて「インストール」してしまえばよい。「游ゴシック 游明朝フォントパック」が使える場合にはこれを使う手もある。この場合は

Inconsolata, "Yu Mincho"

とすればよい。ちなみに IPA 明朝は線が細すぎて不向きだった（まぁ印刷用に特化したフォントだからね。 IPA は Web Font 用の IPA 明朝/ゴシックフォントを開発すべき）。

Windows では Tree View のフォントが汚いので、ここは素直に Meiryo UI フォントに変える。 %USERPROFILE%\.atom\styles.less を以下のように変更する。

styles.less
.tree-view {
	font-family: "Meiryo UI";
}

また

styles.less
atom-workspace {
  font-family: "Meiryo UI";
}

とすればタブや Settings 画面のフォントも変えられる。

Soft Wrap が CJK に対応した

ATOM 1.2 から Soft Wrap が CJK に対応した。ので japanese-wrap はなくても大丈夫になった。なお， japanese-wrap と同じ作者による wrap-style では wrap style を細かく制御できる。お勧めである。

Markdown ファイルの場合は Soft Wrap を無効にしても， Preferred Line Length を 1024 とか大きい値にしても，アプリケーションの Window 幅で折り返してしまう（プレビューで折り返しが必要だから？）。

EditorConfig のススメ

EditorConfig は今やコード書きには必須の機能だが，それ以外の人にも是非使って欲しい。人によって手持ちのプラットフォームが異なるのはもはや当たり前なので， EditorConfig でスタイルを統一することはとても重要。 ATOM では以下のパッケージがある。公開してくださった方に感謝。

ちなみに秀丸でもマクロで EditorConfig を読み込み可能。

私は，仕事以外の環境での EditorConfig 設定を以下のようにしている。

.editorconfig
root = true

[*]
end_of_line = lf
charset = utf-8
indent_style = tab
indent_size = 4
trim_trailing_whitespace = false
insert_final_newline = false

[*.md]
insert_final_newline = true

[*.{js,java,go,c,cpp,tex}]
trim_trailing_whitespace = true
insert_final_newline = true

[*.{md,c,cpp,tex}]
indent_style = space
indent_size = 4

Theme について

個人的に Dark Theme は見づらい。かといって地が真っ白なのも目に痛いので， UI Theme は “One Light”， Syntax Theme は “Solarize Light” にしている。わざわざ Theme をダウンロードする必要はなく、 Core の Theme で充分。まぁ仕事で使う場合は Theme を統一させられるかもしれないけど。

ただし弱視の人や色覚障害の人はそれなりの Theme を導入する必要があるかもしれない。

Tree View のファイルのアイコンがそっけないので， file-icons を入れる手もある。公開してくださった方に感謝。

（追記：atom-monokai Syntax Theme というのがあって， UI Theme によって Dark と Light を自動的に切り替えてくれるようだ。最近はこっちを使っている → 更に追記：atom-monokai は Light の対応を止めてしまったようだ。まぁ最近は Dark にも目が慣れてきたのでいいんだけど）

Git 関連機能

GitHub が作ったという割には git 機能が貧弱なのは何故なのだろう。特に git-plus 相当の機能が Core パッケージに入ってないのは解せぬ。というわけで以下をインストールした。公開してくださった方に感謝。

git-plus は主にコマンドパレットで操作するが（メニューの「Packages」からも辿れる），コマンドパレットの呼び出しを f1 キーに割り当てたらだいぶ使いやすくなった。

git-control は GUI で最初の頃は便利だったのだが， [git-plus] が手に馴染んできたら使わなくなった。 git-control が， submodule の処理が得意ではないっぽいのもマイナス。

矩形選択

矩形選択用に %USERPROFILE%\.atom\keymap.cson ファイルに対して以下のキー設定を行った

keymap.cson
'body':
  'alt-shift-down': 'editor:add-selection-below'
  'alt-shift-left': 'core:select-left'
  'alt-shift-right': 'core:select-right'
  'alt-shift-up': 'editor:add-selection-above'

これで Alt+Shift キーを押しながらカーソルを上下左右に動かせば矩形選択ができる。実はこれらの操作のキー割り当ては元々こうなっている。

Keybind コマンド
ctrl-alt-down editor:add-selection-below
ctrl-alt-up editor:add-selection-above
shift-left core:select-left
shift-right core:select-right

ただし，うちのパソコンでは Ctrl+Alt キーを押しながらカーソルを動かすと（Windows がキーを横取りして）ディスプレイの向きが変わってしまうので，かなり切ないことになってしまう。

実際には editor:add-selection-below および editor:add-selection-above はマルチカーソル・モードのコマンドである。マルチカーソル・モードは癖がある感じだが慣れれば結構使えるかも。

キーボード操作ではなく，マウス操作で矩形選択がしたい場合は sublime-style-column-selection を導入するとよい。 Windows ではマウスのセンターボタンを押しながらマウスを動かす。

いずれのやり方でも，日本語混じりのテキストではうまくいかない。これは上述した行の折り返しの問題と同じと思われる。やれやれ。

その他 既存パッケージによる操作

私がよく使うコマンドを挙げておく。（個人的な都合で一部 keybind を変更している）

Keybind コマンド 内容 変更した keybind
f3 find-and-replace:find-next 次を検索
shift-f3 find-and-replace:find-previous 前を検索
ctrl-, application:show-settings 設定画面
ctrl-f find-and-replace:show 検索と置換
ctrl-g go-to-line:toggle 行番号を指定してジャンプ
ctrl-k ctrl-l editor:lower-case 小文字に変換
ctrl-k ctrl-u editor:upper-case 大文字に変換
ctrl-p fuzzy-finder:toggle-file-finder ファイル検索
alt-delete editor:delete-to-end-of-subword 単語を削除 ctrl-delete
alt-backspace editor:delete-to-beginning-of-subword 直前の単語を削除 ctrl-backspace
alt-left editor:move-to-previous-subword-boundary 直前の単語区切りまで移動 ctrl-left
alt-right editor:move-to-next-subword-boundary 直前の単語区切りまで移動 ctrl-right
ctrl-shift-D editor:duplicate-lines 行の二重化 shift-f10
ctrl-shift-K editor:delete-line 行を削除
ctrl-shift-F project-find:show grep 相当のファイル検索
ctrl-shift-P command-palette:toggle コマンドパレット f1

もともと ctrl-delete に割り当てられている editor:delete-to-end-of-word は挙動が大雑把すぎて使いづらいので，（もともと alt-delete に割り当てられてる）editor:delete-to-end-of-subword に機能を振りなおした。同様に ctrl-backspace, ctrl-left, ctrl-right も alt-* の機能を振りなおした。いや， alt キーって押しにくいのよ。

最終的なキー設定は Gist に貼り付けたので，よろしかったら参考にどうぞ。

  1. 自動保存を行う Core パッケージ autosave は既定で無効になってる。私は git-plus で commit する前に保存するのをどうしても忘れるので，これを有効にしておくと吉。
  2. Core パッケージ tabs の設定で “Enable VCS Coloring” を有効にするとタブに表示されているファイル名が色分けされて表示される。ブラボー！
  3. Core パッケージ git-diff の設定で “Show Icons In Editor Gutter” を有効にすると差分情報がちょっとだけ見やすくなる。
  4. インデントをそろえるために highlight-column を紹介しているページを見かけたけど，インデントをそろえる目的なら，標準の Settings（ctrl-,）で “Show Indent Guide” にチェックを入れておく方が吉。

not([mini]) ?

最近の ATOM で、以前は atom-text-editor カテゴリだった keybind 設定が atom-text-editor:not([mini]) とかなっているものがある。 not([mini]) って何？ と思ってググったら

The :not([mini]) part tells Atom not to use the keybinding on atom-text-editor elements with a mini attribute. Mini text editors are the one-line text inputs found in the settings view (and other places). So you use atom-text-editor:not([mini]) when you want a keybinding to apply only to code text editors.

なんだそうだ。 %USERPROFILE%\.atom\keymap.cson の設定を見直さないと。

その他 不足機能の追加

「秀丸にあるのに ATOM にねーよ」とかいった機能を追加していく。公開してくださった方に感謝。

  1. 秀丸では大変重宝したアウトライン解析。symbols-tree-view があればアウトライン解析を行って右側のサイドバーに表示する。
  2. japan-util : 全角・半角変換機能。英数字を全角で書いたり仮名文字を半角で書いたりするバカがいるので，意外と使うのよ，これ。
  3. highlight-line でカーソル行をハイライトにしたり下線を引いたりできる。色のカスタマイズは %USERPROFILE%\.atom\styles.less ファイルで行う。
  4. open-recent は最近開いたファイルやフォルダを覚えておいてくれる便利なやつ。てか，なぜこれが標準で搭載されてないのだ。
  5. show-ideographic-space : いわゆる「全角空白」を視覚化してくれる。見せ方は %USERPROFILE%\.atom\styles.less ファイルでカスタマイズ可能。実際には IME のプロパティでスペース・キー押下で常に「半角空白」を入力するように設定すればほとんど防げるんだどね（全角空白を入力する場合は shift-space 押下）。

その他 追加したい便利な機能

これまで述べた機能以外で「これあったら便利かなぁ」という機能を挙げてみる。実際に入れるかどうかは別。

  • autocomplete-paths は結構便利だったが必須というほどではないな。
  • autoclose-html : HTML 入力でタグを入力すると自動的に閉じタグを補完してくれる。自動補完の機能は色々あって，大抵は autocomplete-plus のサブパッケージだったりするのだが，これだけは毛色が違う（笑）
  • linter : lint ツール。多くの言語に対応しているが，実際に動かすには lint 本体を導入する必要あり。
  • merge-conflicts : conflict 時のヘルパーツール。
  • term2 : タブ内にターミナルを起動できる。内部で pty.js をビルドしようとするが， Windows 環境では Visual Studio 等の開発環境が必要らしい？
  • web-view : タブ内にブラウザを起動できる。
  • スクラッチパッドみたいなんないのん？ と思って探していたのだが， tempfile というパッケージが登場した。ファイルタイプを指定できる。またファイルの保存先を指定できるため，適当に書き散らしたものを保存することも可能。
  • 特定の単語をマークしておける quick-highlight が結構使える。 Windows だとキーに割り当てられないので、 toggle を適当なファンクションキーとかに割り当てておくとめっさ便利。
  • tablr : CSV Editor。なにこれ素敵！
  • markdown-pdf : markdown 文書を PDF に変換してくれるらしい

継続調査（欲しい機能）

順次更新予定。

  • grep。 project-find ではなくて普通の grep。 Windows には grep は標準ではないので，今まではエディタ内蔵の grep を使ってた。
  • 結城浩さんの amazon.mac が結構便利でよく使うのだが，同等の機能のものがないだろうか。処理自体は簡単だし自前で作る手もあるが，それならちゃんとパッケージについて勉強しないとなぁ。 → 自作しました
  • ファイル読み込み時の文字エンコーディング自動判別は自前で何とかできたが，あとは文字エンコード変換かぁ → auto-encoding パッケージで自動判別できるようだ

ちなみに，10万行の CSV ファイル（Shit-JIS エンコード）を読み込ませたら，文字エンコード変換中にハングアップした。たかだかそれくらいで動かなくなるとか，まだまだ秀丸は手放せないなぁ sigh...

ブックマーク

設定全般（みんな設定ってどうやってるの？）

各種パッケージ設定

パッケージを作ってみた

テーマを作ってみた

ATOM で開発環境を整える

ATOM TeX 環境を整える

その他 四方山話

  1. 前にも書いたが，テキストエディタは機能云々以前に手に馴染むかどうかが絶対的に重要。そのへん分かってない人がライセンスがどうのとか煩すぎる（有料ライセンスにはちゃんとお金を払いましょう。お金払えば気兼ねなく使えるんだから）。秀丸依存症の私が秀丸の劣化コピーでしかないサクラエディタに乗り換えることはないし， GUI でマウスも使えるのが当たり前の環境で（VT 端末を使ってた頃のトラウマがフラッシュバックしそうな） vi/vim に戻る理由もない。 ↩

591
661
4

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
591
661

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?