このエントリーをはてなブックマークに追加

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 謹製。似てます。すごく似てます。 atom.png
見た目OK
軽さOK
EmmetXcode必要、tab展開できない?
CMD+DOK
複数カーソル簡単にはできない?
自動閉じカッコOK

Sublime Text より良いところ

  • 無償
  • MarkdownとGit関係は楽になりそう
うーん。Gitはそんなに使っていないので、乗り換えるほどではなさそうです。
やっぱり、Sublime Text 最高です。

Adobe Brackets

http://brackets.io/
Adobe 謹製。デフォルト白ですがプリインテーマのDarkに変えたらいい感じです。 brackets.png
見た目OK
軽さOK
EmmetOK
CMD+DOK(CMD+B)
複数カーソルOK
自動閉じカッコOK(編集>自動閉じカッコにチェック)

Sublime Text より良いところ

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

ライブプレビュー

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

クイック編集

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

使い方・拡張機能



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

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

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

追記

その後、乗り換えてしまいました。。
PSDを簡単にスライスできる Extract の紹介はこちら! Adobe Brackets Extract の使い方

追記2

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

WordPressテーマ配布しています

レスポンシブWordPressテーマ LIQUID PRESS

BLOGを購読する

Twitter