Editor戦争ついに終結。

もうすぐ免許がとれるので今からどこに行くか楽しみでしょうがないひそかです、こんにちは。
ドライブ好きだからね～いろんなとこいきたいですね！
忙しくてもとりあえずペーパーにだけはならないように気をつけたいものです。。。

さて、そんなわけでEditorですが
以前SublimeTextを紹介していただいて、しばらくST3を利用していたのですが
なんか最近色々とEditorも増えてきたじゃない？ってことで
ふと思い立ってBracketsとAtomを試してみました。

まぁ、基本的にST3にはそこまで不満はなかったんですが
案件の都合上どうしてもShift-JISやEUCファイルをいじることがあって
でもたまにST3だとうまく変換できなくて文字化けになっちゃったりしてて
なのでそのへんも改善されるなら乗り換えちゃおうかな～と思ってました。

Brackets

まず入れてみたのがBrackets。

一番の売りはやっぱりAdobe製なこともあり、
Extractが使える！ってとこですかね。
Extractってなに？って方は以下の記事参照。
(多分私が説明するよりわかりやすい・・・笑)

——————————————————————————————————–
参考：
「Git、Sass／LESS、EmmetそしてExtractの拡張機能が便利なBracketsの使い方 」
http://www.atmarkit.co.jp/ait/articles/1411/17/news118.html

——————————————————————————————————–

これはわりとかなり便利機能だと思います。
画像のファイル名にマウスオーバーすると
その画像のプレビューが小さく表示されたり
(ChromeのDeveloperToolみたいなかんじで)
ビジュアル的な部分はかなり強いEditorって感じがしました。

触り始めた当時は「これだ！これしかない！！！」って感じで
かなりテンションも上がってたのですが
ちょっと残念なところがいくつか見つかってしまいました・・・

1つ目。好きなテーマがうまく適用できない(´･ω･`)

ST3の時から愛用してる大好きなテーマがあるんですが、
Brackets用もあったのでホクホクと適用してみたところ
配布元のやり方を読んでその通りに設定してみてもなんかうまくいかない。
結局その配色をベースにして自分でテーマを作ることに・・・

まぁ大したことじゃないといえば大したことじゃないんですが
いや、でも見た目って大事ですよね！？やる気に直結しますよね！？！？

2つ目。画像のサイズが自動挿入されない(´･ω･`)

Emmetを導入してコーディングをしてるんですが
imgタグを展開して画像を挿入しても、画像のサイズが自動で挿入されない。
画像サイズの更新をしてもダメ。
どうやらこの機能、Bracketsでは対応していないらしい？？
これはかなり辛い・・・

Atom

ということで、続いてAtomを導入。

Atomはまずロゴがいいよね！
あの細い感じがいいよね！

まぁ、結論から言えばしばらくはAtom使うことに決めました。

まず、前述の文字エンコードについてですが
特にpackageとか追加しなくてもShiftJISやEUCをちゃんと表示してくれる。
これは地味にありがたいです、ほんと。

もちろんEmmetの画像サイズ更新も普通に動くし
Markdownのプレビューも見やすいし
大好きなテーマのAtom版も問題なく動作しました。
あと、細かいとこですがカラーリングの分類がST3に近い(というか同じ？)なので
見た目があまり変わらないってとこもいいですね。
あとあと、さすがGitHub製なだけあって、それぞれのpackageに不具合があった時
Atomの画面上からボタン一つでそのpackageのrepositoryにIssueが投げられる！

■ 入れたパッケージ

備忘録的に導入したpackageを羅列しておきます。

• japanese-warp
• atom-color-highlight
• autocomplete-plus
• autocomplete-html
• autocomplete-snippets
• autocomplete-css
• autocomplete-paths
• color-picker
• emmet
• file-icons
• highlight-selected
• linter
• linter-csslint
• linter-jshint
• merge-conflicts
• minimap
• minimap-highlight-selected
• project-manager
• save-session
• tag

とりあえず入れてみたやつとかもあるので
今後使っていくうちに使わなくなるものとか逆に増えたりすることもあるとは思うけど
とりあえず最初に入れたのはこんなとこです。

——————————————————————————————————–
参考：
「Atomで利用しているパッケージ」
http://qiita.com/fukuiretu/items/bd233d38c92d99eb0684
「GitHub 製エディタ Atom入門」
http://qiita.com/k2works/items/1d25888fb3a05058e48f
「Atomへの誘い」
http://qiita.com/s-shin/items/203e0f8c0aa00cfacfc5
「オススメのatomパッケージ７選」
http://qiita.com/_wats/items/3ca273e158c3a32dbb92
「GithubのWeb開発用エディタ「Atom」が、いつの間にか進化し過ぎている件！」
http://plus.appgiga.jp/masatolan/2014/10/31/54305/

——————————————————————————————————–

■ テーマ変更

ST3の頃から愛用しているdracula-themeをAtomでも使用してます。

——————————————————————————————————–
「dracula-theme」
https://github.com/zenorocha/dracula-theme
——————————————————————————————————–

■ キーバインド変更

私のMac環境ではEmmetの展開はTabなんですが
文末に移動のキーバインドが指定されていなかったので
~/.atom/keymap.cson　に以下を追加しました。

※後日追記※
カーソルを文末に移動、文頭に移動、EmmetをTabで展開がいまいち不安定だったので
改めてキーバインドを修正しました。

  'atom-text-editor:not([mini])':
    #Ctrl+E line end
    'ctrl-e': 'unset!'
    'ctrl-e': 'editor:move-to-end-of-line'

 '.editor:not(.mini)':
   #Ctrl+Q line beginning
   'ctrl-q': 'editor:move-to-beginning-of-line'
   #Tabで展開
   'tab': 'emmet:expand-abbreviation-with-tab'

——————————————————————————————————–
参考：
「ATOMをMacにインストールしてやったこと」
http://totora0155.hatenablog.jp/entry/after-having-installed-the-atom-into-mac
——————————————————————————————————–

というわけで、紆余曲折あったEditor選びですが
どうやらAtomで落ち着きそうです。
とはいえBracketsもまだまだ進化し続けてるみたいなので
今後もちょいちょいチェックしていこうと思います。
(画像プレビューやAdobeとの連携はなかなか使い勝手良かったし)

Categories: WEB。