brackets

Bracketsの主な機能とプラグインのまとめ

最近、Bracketsというエディタを使ってます。
PSDファイルの情報を抽出してくれるという話を聞き、それが目当てで使い始めたものの、他にもいいなぁと思うところがあったのでまとめてみました。

ちなみに、自分のエディタ歴…

DreamweaverCodaSublimeTextAtom → Sublime という感じです。

※ 最近はほとんど使ってないですが、面倒なテーブルコーディングがある場合は、Dreamweaverを使うこともあります。
※ 私はまだがっつりとは触ったことがないですが、Webstormか、PhpStormあたりもファンが多いですよね。

Bracketsの主な機能

1.ライブプレビュー機能

デフォルトでライブプレビューがついてます。
右上にある稲妻アイコンを押すと、起動して開いてるファイルをChromeで開いてくれます。

ブラウザのデフォルトはChromeですが、Firefoxも設定ファイルをいじれば確認できます。(※IEのことはよくわかりません。)
今までタスクランナーでやってましたが、デフォルトで使えるのは良いですね。

JSファイルについては保存が必要ですが、HTMLとCSSファイルについては、+Sで保存しなくてもリアルタイムでプレビューできます。

また、ソース上にカーソルを持って行くと、プレビューでどの部分かを教えてくれます。

2.サブエディタ

htmlファイル上で、タグ、クラス、IDのとこにカーソルを置いて+Eを押すと、サブエディタが開き、そこでCSSを確認・編集することができます。ちょっとした編集に便利。

JSファイル上だと、関数名のとこにカーソルをもっていくと、関数の処理を展開してくれるます。

3.プレビュー機能

HTMLファイル上で、画像のファイル名のところにカーソルを持ってくと、該当する画像が表示されます。

CSSファイル上では、プロパティ上で ⌘+E を押すとカラーピッカーがでたり、アニメーションまわりの編集ができます。

4.PSDファイルの読み込み

まだ、プレビュー版での機能ですが、PSDファイルからデザイン情報とアセットを抽出することができます。

下準備

拡張機能の Extract for Brackets (Preview) をインストール。
インストールすると、右端にアイコンが出るので、それをクリック。

Creative Cloudにファイルをアップ。
(もしくは、ウィンドウにPSDファイルをドラックアンドドロップで放り込みます。)
PSDデータは、レイヤー構造もそのまま持ってこれるので、できたらレイヤーは綺麗にして持ってくるのをおすすめします。(後で更新もできますが、解析処理が結構重たいです…)

アップしたファイルをクリックすると、PSDの解析します。

テキストの取得

レイヤーをクリックすると、画像サイズや位置情報、テキスト情報を取得することができます。

テキストについては、日本語だとHTMLエンコードされているので注意が必要です。
拡張機能の Brackets Tools などで、HTML デコードしたりして、修正する必要があります。
(まだプレビュー版なので、そのうち直してくれるとは思いますが、ちょっと面倒ですね…)

画像の抽出(スライス)

書き出したい画像レイヤーを選択し、imgのsrc属性のところにカーソルを当てると該当の画像ファイルが表示されます。
ファイルのパスを確定すると、そのままレイヤー名に応じてファイルを書き出してくれます。

画像サイズもコードヒントとして出してくれます。

要素間の幅を取得

レイヤーをクリックした状態でも座標位置を確認できますが、Shiftを押しながら複数のレイヤーを選択すると、要素間の幅が表示されるようになります。

brackets_14

ただ、「そこの距離じゃなくて、ここの値が知りたいんだけどな…」と若干もやもやするところはあるので、サイズ計測用に背景レイヤーをしいとくといいかもです。

色の取得

色を取得したいレイヤーを選択し、CSSファイル上でカラーを入力しようとすると、コードヒントを出してくれます。

brackets_15

PSDファイルの連携はざっとこんなかんじです。
プレビュー版なので、ややモヤモヤするところはありますが、今後に期待しましょう…!

拡張機能

Bracketsはコードヒント周りなどデフォルトの状態だと弱いので、拡張機能をガンガン、インストールしていきます。
拡張機能は右のレゴブロックみやいなアイコンをクリックして、インストールできます。

以下、オススメの拡張機能をリストアップしてみました。

コーディングする人におすすめ

  • Emmet
    • いつもお世話になってます
  • Brackets Snippets (by edc)
    • HTML/JS/PHPのスニペット
    • 基本的なスニペットは初期段階でいくつか登録されてる
  • Brackets CSS Class Code hint
    • CSSのクラスとIDのコードヒント
  • Paste and Indent
    • 自動的に貼り付けたテキストに対して、自動でインデントしてくれる
  • More HTML5 Code Hints + Fat-Free Framework Template Tags
    • HTMLのコードヒント
  • JavaScript & CSS CDN Suggestions
    • CDNが使えるCSSやJSを教えてくれる
  • CanIUse
    • CanIUse.comデータを表示できる
  • CSSFier
    • HTMLのブロックをCSS/SCSファイルにを貼り付けると空のルールセットを作成できる
    • SASSの場合はネストまでしてくれる
  • Autoprefixer
    • CSSを解析し、自動的にベンダープレフィックスを追加
    • 保存時に実行したい場合は、メニューの[編集]にある「Auto prefix on save」をチェック
  • Indent Guides
    • インデントのガイド線を表示
    • 使用するときは、メニューの「表示」にある「Indent Guides」をチェック
  • Beautify
    • HTML、CSS、JavaScriptのコードを綺麗にしてくれる
    • ショートカット: Cmd + Shift + L
    • 保存時に整形したい場合は、メニューの[編集]にある「Beautify on save」にチェック
  • SASSHints
    • SASS変数のヒント
  • brackets-compare
    • ファイルの比較ができる

Javascriptをさわる人におすすめ

WordPressをさわる人におすすめ

Bracketsをさらに使いやすく

  • Brackets File Icons
    • 左メニューのリストで、ファイル名に応じてアイコンを表示してくれる
  • 右クリック拡張
    • 右クリックのダイアログにカット、コピペ、保存、ケース変換などの機能を追加できる
  • Extension Rating
    • 拡張機能のインストール画面でソートしたり、ダウンロード数などを表示する
  • Overscroll
    • ファイルの最終行より下にスクロールできるようになる
  • Brackets Tools
    • 空白行や改行の削除、大文字・小文字の変換、エンコード・デコード、HTMLタグの削除などいろいろできる
  • Shizimily Multiencoding for Brackets
    • UTF-8以外で使用したいときに使用
  • Highlight Multibyte Symbols
    • 全角英数字・記号をハイライト表示してくれる
  • Various improvements
    • 画面下部にファイルの最終更新日やサイズを表示してくれる
  • Todo
    • .todoファイルを設置することでToDo管理ができるようになる
  • Unused Files
    • 使ってないファイルを検出できる
    • 使用するときは、メニューの[編集]にある「Find unused files」をクリック
  • Markdown Preview
    • マークダウンをプレビューできる
    • プレビューは画面右端のアイコン一覧にある M↓ というアイコンをクリック
    • 標準的なMarkdownと、GitHubスタイルでのMarkdownを切り換えられる
    • 画面下に配置されるのにちょっとモヤモヤする

拡張機能をインストールしておかしなことになった…そんなときは…

上記の拡張機能については、現状大丈夫なのですが、別のプラグインいれて見事にバグりました…。
(インストール数も結構多いし大丈夫だろうと思ったのですが。)

Macの場合、/Users/ユーザー名/Library/Application Support/Brackets/extensions/user から該当のプラグインを削除したら復活しました。

自分用に使うやつをまとめようと思ったら、長くなってしまいました…。
他にも良いのがあれば随時更新していこうと思います。

参考サイト

Pocket