Sublime Text から Adobe Brackets に浮気してみた

こんにちは。
この記事は Sublime Text Advent Calendar 2014 20日目の記事です。

しばらくブログを放置していて、ずっと何か書きたいなと思っていたところ、楽しそうなイベントがあったので参加させていただきました。
かこつけた他エディターの紹介もOKそうでしたので、他のエディタに浮気してみた件について書いてしまおうと思います。

浮気したワケ

Sublime Text との出会いから2年くらい経っていまして、今でも特に不満はないのですが、自宅のMacを買い換えて環境を作り直しているうちに、なんとなく他のエディタにも目が行ってしまった次第です。

Sublime Text の良いところ

軽いコーディングをするだけなので、個人的には下記が気に入っている点です。

• 見た目
• 軽さ
• Emmet
• CMD+D
• 複数カーソル
• 自動閉じカッコ

では、他のエディタを見てみましょう。

Atom

https://atom.io/
GitHub 謹製。似てます。すごく似てます。

Sublime Text より良いところ

• 無償
• MarkdownとGit関係は楽になりそう

うーん。Gitはそんなに使っていないので、乗り換えるほどではなさそうです。
やっぱり、Sublime Text 最高です。

Adobe Brackets

http://brackets.io/
Adobe 謹製。デフォルト白ですがプリインテーマのDarkに変えたらいい感じです。

Sublime Text より良いところ

• 無償
• ライブプレビュー
• クイック編集
• Photoshop連携
• プラグイン追加簡単
• 日本語対応

おや？これは、やばい・・・いいかも///

特にライブプレビューとクイック編集がいい感じです。ライブプレビューは Sublime Text でも Emmet LiveStyle などのプラグインできますが、まだ不安定な印象があり、あまり使っていませんでした。
Brackets で使ってみると安定していて、絶対パスでもローカルでパスが通るので、それだけでもすごく便利です。クイック編集は、HTMLファイル編集中にCSSをインラインで表示・編集できるものでこちらも便利です。

ライブプレビュー

標準で Node.js が同梱されており、右上のアイコンを押すとサーバが立ち上がります。HTML、CSS編集がリアルタイムでプレビューできます。カーソル位置もハイライト表示されます。

クイック編集

CMD+E で、HTML要素に適用されているCSSがインラインで展開されます。直接編集したり、新規ルールを作成することができます。

使い方・拡張機能

• Sublime Text2との恋を見送り、Adobe Bracketsに巡り会いました
• Brackets おすすめプラグイン集・解説

ちなみに、
タブ 表示がないのでプラグインの Documents Toolbar を入れました。
私の場合、これで今のところ困ることはありません。

ということで、今もちょっとBracketsに浮気中です。Sublime Text を愛している方すみません・・・（もちろん Sublime Text も使っています！）
でも、たまには他のエディタに浮気してみると、新しい発見があったり、改めて Sublime Text の素晴らしさが分かったりして良いかもしれません。

明日は @hori.godai さんです。よろしくお願いします！

追記

その後、乗り換えてしまいました。。

PSDを簡単にスライスできる Extract の紹介はこちら！
Adobe Brackets Extract の使い方

追記2

レバテックキャリアさんの企画でこの記事が紹介されました！
自分にあったエディタが見つかる！Web制作向けエディタのレビューまとめ