エディター難民中。「Brackets(ブラケッツ)」ってどうなの?

シェアする

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

使いやすいエディターを探して、難民状態になっています。

あー、早く理想のエディターさんに出会いたい。

ということで、今日もひとつ試してみました。

adobeが開発にかかわっているという「Brackets(ブラケッツ)」です。

「Brackets」は下記のサイトからダウンロードできます。無料です。

公式サイト(http://brackets.io/index.html

窓の杜ライブラリ(http://forest.watch.impress.co.jp/library/software/brackets/

オープンソースで開発されているWebアプリ開発向けのコードエディター。別のファイルに記述されたCSS/JavaScriptをHTMLタグから呼び 出し、その場でインライン編集できるようにする“クイック編集”や、「Google Chrome」をリモートデバッグモードで起動して、編集中のHTMLファイルのリアルタイムプレビューを行う“ライブプレビュー”といったユニークな機能を備える。-窓の杜

ということで、早速インストールして使ってみましょ。

インストール

上のどちらかのサイトからダウンロードして、インストールを開始します。

blog-brakets01

もしインストールフォルダを変更したい場合はここで変更して、そのまま「Next」で次へ。

blog-brakets02

「Install」をクリックでインストール開始します。

blog-brakets03

しばらくすると、インストール成功したよと言われますので「Finish」で完了!簡単!

blog-brakets04

そして、立ち上げてみるとすでにメニューが日本語になっていて、日本語にするのになんの設定もいらないです。あら、かーんたん!

自分用にカスタマイズも簡単

テーマ(画面やコードの色を変えたりする)や拡張機能を追加するには、

ファイル > 拡張機能マネージャー 、もしくは画面右側のフォルダマークから追加できます。

blog-brackets04

blog-brackets07

まず、拡張機能やテーマを探す前に、ぜひ入れたい拡張機能があります。

まず最初に入れるべき拡張機能:Extensions Rating

拡張機能をダウンロード数順や、最新更新日順に並べ替えてくれたり、ダウンロードの総数を教えてくれますので、人気のある拡張機能を選べるようになります。

人気がある=多くの人が使っている。トラブルがおきたときのヒントを得やすい。

ということで、ダウンロード数の多い機能を追加するのがよいです。

ちなみに、テーマについてはいろいろ見てみましたが、デフォルトで入っている「Brackets Dark」が気に入りました。すごく見やすいです。

表示 > テーマ 

で最初のデフォルト色と切り替えることができます。

すごいと思った機能

まず、感動したのは「クイック編集」機能。

htmlファイルの、CSSの上で右クリックすると「クイック編集」というメニューが現れますので、それをクリックする(もしくはショートカット「Ctrl+E」)と、その場でCSSが展開され、CSSファイルと行き来しなくても修正変更が容易にできます。

blog-brackets06

もうひとつ、htmlの画像のコード上にマウスをのせると、このようにどんな画像か確認できます( ゚Д゚)

実際の幅や高さも表示されますので、便利じゃないですか?

blog-brackets07

まだまだ便利機能がいっぱいあるのですけど、今後追記していきたいと思います。

シェアする

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

フォローする

スポンサーリンク