前回、無料エディター「Brackets」の素晴らしいデフォルト機能について書きました。
Bracketsは、デフォルトだけでも、良い機能がついているのですが、拡張をインストールすることによって、作業効率が良くなったり、できることの幅がより広がります。
ということで今回は、Bracketsを使い始めてから今まで、いろいろな拡張を試してみた結果、Wordpressのテーマ開発などに便利そうな拡張をいくつかまとめてみました。
目次
Emmet
強力なコーディング補助ツールです。
わずかなスニペットを入力し、tabキーなどで展開して入力することで、少ないコード量で多くの記述を行うことができます。正直これを使えないエディターだとやる気が出ません。
Brackets Snippets (by edc)
Sublime Textでは、PHPのスニペットは、デフォルトで用意されていましたが、Bracketsでは自前で用意する必要があります。僕が試してみたスニペット拡張の中では、これが最も使いやすかったです。
この拡張は、あらかじめライブラリとしてHTML、CSS、JavaScript、PHPのスニペットがある程度登録されています。
以下の手順で登録することで、コードを記入せずとも、基本的なPHPのスニペットを登録することができます。
WordHint
Sublime Textでいうところの、オートコンプリートに”近い”機能を追加できる拡張です。（※全く同じ動作ではありません）
PHP、Python、Perl他などで、現在のドキュメントの中からオートコンプリート機能のようにキーワードをヒント表示してくれます。
Brackets CSS Class Code hint
プロジェクト内のCSSファイルのCSSセレクターなどを読み込んで、クラス名や、IDの入力時に入力を補完してくれる機能を追加する拡張です。
CSSFier
HTMLのソースコードをコピーして、CSSファイルに貼り付けるだけで、全ての空のルールセットを自動で作成してくれる拡張です。
わざわざ、CSSセレクタを書き込む必要がなく楽です。
Brackets WordPress Hint
WordPressのコード補完をしてくれます。
Brackets WordPress Functions Hints
WordPressのテーマやプラグインのための関数やテンプレートタグのコードヒントです。
Brackets WordPress Hooks Hints
WordPressのテーマやプラグインのためのアクションフックやフィルターフックのコードヒントです。
PHP SmartHints
PHPのコードヒントを表示してくれます。
関数は以下のようにFで表示されます。
変数は以下のように表示されます。
ユーザー定義変数にも対応しています。
Simple JS Code Hints
JavaScriptのコードヒントです。
Brackets JavaScript Code Hints
More HTML5 Code Hints
Bracketsデフォルトでも、ある程度のタグはヒントは表示されますが、content、picture、templateといったタグや属性もカバーされます。
詳しいことは以下を参照してください。
右クリック拡張
Bracketsのデフォルトでは、右クリックメニューは以下のようになっています。
「右クリック拡張」をインストールすると、以下のようなメニューが変わります。
- 切り取り
- コピー
- 貼り付け
- いろいろな文字変換
- コメント機能など
拡張のメニューなどは、英語で表記されることも多いのですが、この拡張の場合は、すべて日本語で表示されます。URIエンコード・デコードなども手軽にできるのは便利です。
BluePrint Beta
JavaScript、HTML、CSS、LESS、SCSS、PHP、pythonで、アウトラインとミニマップを表示させることができます。
以下がCSSのアウトライン。
以下がCSSのミニマップ。
個人的に、アウトラインとミニマップは、この拡張が一番使いやすく感じます。ミニマップ表示も試した中では一番綺麗。
Minimap
Sublime Textのようなミニマップを表示してくれる拡張です。
このミニマップは、コードに重なってしまうのが、ちょっと難。
表示するには、「表示」メニューから「Show Minimap」を選択する必要があります。
WD Minimap
こちらもミニマップを表示してくれる拡張です。
Paste and Indent
インデントの異なるコードを貼り付けても、インデントを自動でそろえてくれます。
通常は、以下の上のif文を下のif文内に貼り付けたとしたら、
if (Life === Good) {
return true;
}
if (Brackets === Awesome) {
//ここにペースト
}
以下のようにインデントが崩れてしまいます。
if (Brackets === Awesome) {
if (Life === Good) {
return true;
}
}
この拡張を使うことで、ちゃんとインデントをそろえて貼り付けてくれます。
if (Brackets === Awesome) {
if (Life === Good) {
return true;
}
}
JavaScript & CSS CDN Suggestions
scriptタグやstyleタグを書くと、CDNが使えるJSファイルやCSSファイルの名前を提案してくれ、選んでいくだけでCDN呼び出しタグを書くことができます。これがあると、ネットで探し回る必要ないかも。
Brackets Extension: CDN Suggestions
CDN Finder
jsDelivrで公開されているCDNを検索し、URLを手軽に取得することができます。
Autoprefixer
名前の通り、ファイルの保存時に自動でプレフィックスを付与する拡張です。
Can I Useの情報から判断して、不要なものは取りのぞいてもくれます。
機能を有効にするには、「編集」メニューから「Auto prefix on save」にチェックをしておく必要があります。
「Auto prefix selection」を選択すると、選択しているテキストのプレフィックスを最適化してくれます。
Brackets Css Color Preview
CSSのファイル内でカラーコードを使用しているとき、行番号部分にその色を表示してくれます。
colorHints
CSSファイル内で、シャープキー（#）を押すと、これまでに使用したカラーコードを補完してくれます。
Beautify
JavaScript、CSS、HTMLのコードを綺麗に整形してくれる拡張です。
保存時に、自動で整形するには、「編集」メニューから「Beautify on save」にチェックをつけてください。
Minifier
JavaScriptとCSSで、コードの縮小化を手軽に行うことができるようになります。
Indent Guides
インデントのガイド線を表示してくれます。
拡張機能を有効にするには、「表示」メニューから「Indent Guides」のチェックをオンにしてください。
Show Whitespace
半角スペースを、Sublime Text風に表示してくれる拡張です。
Indent softwrapped lines
エディターの文字の折り返し部分を、自動で綺麗にインデントしてくれます。
デフォルトの折り返しだと以下のような表示になります。
インストールすると、Sublime Textのように、折り返し部分のインデントを自動で揃えてくれます。
JavaScript Globals
JavaScriptコードのグローバル変数が、下線つきの赤色にハイライト表示されます。
HTML Block Selector
開始タグか、終了タグにキャレットがある状態でCtrl+Shift+Tを押すと、そのタグ全体を選択してくれます。
タグが多数入れ子になっていると、どれがどのタグだかわからなくなるので、そんな時に便利。
Overscroll
ファイルのコード末尾より下に、ある程度スクロールできるようになる拡張です。地味に作業効率が上がります。
ImageToData
画像を手軽にDataURIに変換できる拡張です。
Alt+Shift+Gを押すと以下のようなダイアログが表示されるので、画像情報を入力します。（URLもしくはローカルから選択）
あとは「Convert it!」ボタンを押せばデータに変換できます。
Tabs Custom Working
Bracketsは、タブがありませんが、Sublime Textのようにタブ表示ができるようになる拡張です。
Bracketsには、サイドバーにタブの代わりとなる機能があるので、個人的にはタブは不要な気もしますが、タブ操作に慣れた人は利用するといいかも。
Brackets File Icons
ファイルの拡張子ごとにアイコンを表示してくれるので、どのようなファイルかパッと見でわかりやすくなります。
以下のような様々なファイルに対応しています。
Brackets Outline List
右のツールバーにある「Toggle Outline」ボタンをクリックすることで、左サイドバーにアウトラインを表示することができるようになります。
アウトラインは、JavaScript、CSS、HTML、PHPで有効です。
Display Shortcuts
「ヘルプ」メニューの「Show Shortcuts（Ctrl+Alt+/）」を選択することで、ショートカットリストを表示させることができます。
操作に慣れないうちはカンニングペーパー代わりに。
Extension Rating
通常は、こんな感じの必要最低限の情報しかない拡張導入画面に
以下の情報を付け加えて、拡張選びの参考情報を増やしてくれます。
- 並び替え機能
- 作者のアバター
- ダウンロード数
- スターの数
- 対応言語
- 追加情報
Shizimily Multiencoding for Brackets
BracketsデフォルトではUTF-8しか利用できませんが、それ以外のShift_JIS、EUC-JP、GB18030、European、UTF-16、その他様々な、エンコーディングに対応させてくれます。
Shizimily Multi-Encoding for Brackets
Windows10でBracketsを1.10にアップデートしたらフリーズする件 | カゴブロ
Windows10環境では、インストールしない方が無難かと思います。
Brackets Editor Bookmarks
コード上に自由にブックマークを付けることができ、それらの間をジャンプで移動することができます。
ブックマークは「ナビゲーション」メニューから「Toggle Bookmark」などを行うことでできます。
Various improvements
ファイルの更新日時や、サイズなどを表示してくれます。
CanIUse
Can I useで、ブラウザのサポート状況を手軽に調べることができます。
QuickDocsPHP
PHPのクイックドキュメントです。
QuickDocsJS
JavaScript、jQueryのクイックドキュメントです。
QuickDocsRegEx
正規表現のクイックドキュメントです。
以下は、URL正規表現のクイックドキュメント。
まとめ
Bracketsには、数百もの拡張があるので、まだまだ知らないだけで良い拡張は沢山あるかもしれません。
良い拡張を見つけたら、また追加していきたいと思います。何か他に良い拡張をご存知でしたら、コメントなどで教えていただけると幸いです。
Bracketsには、Sublime Textには存在しないような拡張もいろいろあります。（知らないだけかも）逆に、Sublime TextにはあってBracketsには無い拡張や機能もあるわけですが。
とはいえ、双方とも独特な進化をしている良いエディターだと思います。どちらとも、いじっていてとても楽しいですから。
javascript globalsを入れたのですがグローバル変数が赤色になりませんでした。
何かしないといけないのでしょうか？