最近色んなところでBrackets使ってますの声を聞けて嬉しい感じなんですが、Bracketsのアドベントカレンダーも余裕で挫折しているのでまた仕切り直して、せっせと紹介記事書いていきますね。今回は新しく知った拡張機能のなかでコーディング関連のものを紹介します。これまでの紹介したものはいくつかありますので見てみてくださいー。

• Bracketsだって激しく進化してますよ！メインエディターとして1年使ってみて – WEBCRE8.jp
• PSDデザインカンプからのコーディングに超便利！Extract for Brackets – WEBCRE8.jp
• SVGをBracketsで使用・作成・編集するのに便利な拡張機能 – WEBCRE8.jp

Brackets CSS Class Code hint

便利過ぎワロタ系のやつです。編集中のHTMLが読み込んでいるCSSのセレクターに書かれているclassとIDが、属性値の記述時にコードヒントとして出てきます。前からずっと欲しかったです！

Brackets CSS Class Code hint

CSSFier

便利過ぎワロタその2。逆にHTMLに書いたclassやID、要素名のルールセットをCSSに作ってくれます。しかもこっちは、HTMLをコピーしてCSSに貼付けすると全ての空のルールセットをだーっと作ってくれます。入れ子にしまくる感じではなくちゃんとバラバラにしてくれます（入れ子にしたい場合は適宜移しましょう）。

CSSFier

ワークフロー変わりますねこれは…。まずデフォルトCSSを用意しておいて、HTMLをだーっと書いていって、HTML書けたらCSSにコピって持ってってルールセット生成、Extractで画像置きながら雑に書いていってAutoprefixerとbeautifyとかCSScombで整形。スムーズすぎる。

Brackets Tools

詳しいことはQiitaのBracketsの7つ道具的プラグイン Brackets Toolsに書いてありますが、色んなコーディングサポート機能が一つになったプラグインです。他のもので代用できるものもありますが、便利そうなのはいくつかの単語の羅列をそのままli要素にしてくれたり、選択範囲からHTMLタグを消してくれるもの。この辺は欲しかった機能です。

JavaScript & CSS CDN Suggestions

scriptタグやstyleタグを書くと主要なCDNにあるJSやCSSの名前をサジェストしてくれ、かつ選択したらバージョンを指定するとタグの記述が完成します。なにこれすごい。

JavaScript & CSS CDN Suggestions

とってくるのはGoogle APIやCDNJSなどからです。

More HTML5 Code Hints

HTML5のコードヒントを拡張します。Bracketsはデフォルトでも結構HTML5の要素や属性をカバーしてますが、更にpicture要素やsrcset属性までサジェストしてくれるようになります。あと、More CSS Code HintsというCSS版もあります。今のところ使う機会の少なそうなものばかりですけど一応。Media Queriesとか対応してくれると嬉しいなあ。

Minimap

もともとCodeOverviewというファイル全体を見渡すためのエクステンションがありましたが、私の環境だと1.1からうまく動かなくなっていたのでこれが代替になりそうです。こちらは拡大率を選ぶことができないようですが、使わないときは勝手に薄く小さくなってくれるという違いがあります。でも出しっ放しの方が便利な場合もある気がするので1.0を併用するというのもアリかもしれませんね。

Paste and Indent

コードをコピって貼付けると、貼付けた位置のインデントの深さと合わせて貼付けられます。コードの移動の他、他のファイルからまるまる持ってきたりするときに超便利です。

Shizimily Multi-Encoding for Brackets

遂にBracketsでも文字コードのエンコーディングができるようになりました。普通にShift_JISも開けるようになってます。今までnkfというコマンドラインツールを使って変換とかしてたんですが、もうこれでそのままいける。

その他おなじみのヤツとか

Bracketsがコーディングを加速する

一応他にも使ってるヤツを紹介します。

Adobe Edge Web Fonts

Webフォントを手軽に組み込める

Autoprefixer

保存時に必要なものに自動でプレフィックスを付加する

Autosave Files on Window Blur

Bracketsから離れるたびに自動保存する

Beautify

CSSを自動整形する

Brackets Editor Bookmarks

コード上にブックマークをつけてジャンプできる

Brackets Icons

サイドバーのファイル名にアイコンがつく

Code Folding

HTMLのタグ、CSSのルールセットを折り畳める

DEVimg for Brackets

プレースホルダー画像をランダムな画像で生成できる

Emmet

Emmetが使える

Extensions Rating

エクステンションのダウンロード数や評価を表示する

Extract for Brackets

前述の記事を参照

Gist Manager

Gistを呼び出したり投稿できる

ImageToData

画像をDataURIに変換できる

Indent Guides

インデントを縦線でわかりやすくする

Lorem Ipsum

ダミーテキストを挿入、色んなオプションもある

Markdown Preview

マークダウンをプレビューできる

おわりに

昨日1.2がリリースされたBracketsですが、どんどん生産性上がっていると思います。特に今回挙げたものは便利すぎるのでネイティブに取り込まれても良さそうですよね。Edge Codeがそういう役割をすると思ってたんですが、今後は多分Bracketsに取り込まれていったりするんですかね。

しかし、気になるのは開発の止まっているプラグインですね…。日本語テキストを読み出したりCSSを読み出すことのできないExtractはフォーラムに質問したけど華麗にスルーされたりしているのでこの辺どうなってくれるのか気になります…Edge Inspectとの連携とか、どうなってるんですかね…。あと、他のEdgeシリーズがなんかおとなしすぎるのであの辺が元気になってくれればもっとBracketsの使いでが上がっていいと思います！★