adobe製のオープンソースなエディタbracketsやばない？と思ったお話
adobe社製のオープンソースエディタ「Brackets」の存在は知っておりました。brackets.io
ですが統合開発環境とまでは行かないエディタの最強はsublimetextが完成域に入っていると信じて疑っていなかったので試した事すら無かった。
だがしかし、結構bracketsすごかった。コーディングだけなら乗り換え検討をしているレベルに凄かった。
特に便利な機能を紹介
前回のエントリーで新しいサービスのデザイン案を掲載した訳ですが、そのコーディングにも実はbracketsを使っていました。
その時に便利だった機能をピックアップ。
クラス情報のポップアップ
HTMLのIDやクラスの中にカーソルがある時にCtrl+Eを押すと対象のクラスが書かれたCSSがポップアップ表示される。勿論そのまま編集も出来る。まずこれで既に感動しました。
Extract for Brackets
やばいのはこれやねん。なんとpsdファイルのレイヤー情報からfont-sizeやfont-weightは愚か、幅等何からなにまで勝手にCSSにしてくれる。画像ベースのサイトやフォントを特殊なものを使っている場合は逆に手間なので、普通にスライスをした方が良いと思いますが今回のように文字中心だと神速でコーディングが出来ました。
詳しくは公式のこの辺がわかりやすいです。
プレビューモードが便利
sublimetextにもchromeとの連携等出来るのですが、結構動いたり動いてくれなかったり動作がおかしな事がある。結局保存の際にブラウザが自動で更新されるという微妙なマクロで確実な動作をさせていたのですが、それも万事解決。しかもHTMLやCSSでカーソルがあたっているクラスやIDの領域が自動で青のボーダーで囲まれる。これのおかげでたまに表示が思ったとおりに行かない時もデバッグツールを起動する必要がない。
環境構築が簡単
基本的にコーディングに必要なものを既に一式揃っています。ですがタブ周りが最初は弱いので
もはや説明のしようがない。無かったらコーディングは外注に投げるレベル。
デフォルトでは分割したウィンドウ等の際にタブの移動が出来ません。これを入れるとドラッグして左右に分割したウィンドウの移動等も可能になります
ソースコードの整形に
HTML構造をアウトラインで表示してくれます。1から自分で作った場合は特に必要ありませんが、第三者のコードをメンタナンスするとかいう時に便利
サンプル等からコピペした際に自動できっちり整形してくれる。僕みたいなgoogle先生に頼るどころか体ごと預ける方には必需品
このぐらいでしょうか。既にこの段階で快適なコーディングが可能になっていると思います。
ですが難点もあって、長時間起動していると急激に重たくなる。テキストを打っても反映に1秒かかる…等。今回はwindows環境でしたがメモリ32Gのi7のマシンなので特にスペックがーというのも考えられないでしょう多分。エディタ自体を再起動すれば治るので、内部でなんかアレがアレしてコレな事になってるんでしょうか。
というワケでコーディングにはとても便利だなーと感じました。デザイナーとコーダーをどっちもどっちでちょくちょくやらされるよ…という社内の便利屋になってしまった方に向いてそう。
