はじめに
Brackets の拡張機能を作る話は資料が少ないので書いてみる。
ミニマムなコードとできることを書きます。
開発環境は Mac の想定。
（軽く書いたので あとで書き足すかもしれない。）
おおまかなこと
HTML, CSS, JS (Browser, Node) で作ります。Web屋万歳。
フレームワークっぽいのは次が使えます。
- Bootstrap
- RequireJS
- jQuery
ディレクトリ
- /Users/
ユーザ名/Library/Application Support/Brackets/extensions/- 拡張機能マネージャからインストールした拡張機能がある
- Brackets の「ヘルプ」メニュー →「拡張機能のフォルダーを開く」で確認できる
- 「無効」にした拡張機能は disabled に、「有効」は user にある
- /Applications/Brackets.app/Contents/www/extensions/default
- プリインストールの拡張機能がある
- /Applications/Brackets.app/Contents/www/extensions/dev
- 開発中の拡張機能を置ける
- Brackets をアップデートすると /Applications/Brackets.app を上書いて拡張機能が消えるので注意
- /Applications/Brackets.app/Contents/www/extensions/samples
- サンプルの拡張機能がある
- インストールはされない
- 開発の参考になるかも
今回は /Applications/Brackets.app/Contents/www/extensions/dev に新しいディレクトリを置きます。
新しいディレクトリの名前は yourname.hello-world にします。
ファイルを置く
少なくとも次のファイルが必要です。
- package.json
- main.js
これらを新しいディレクトリに置きます。
package.json
拡張機能マネージャの検索や表示などに使うメタ情報を書きます。
{
"name": "yourname.hello-world",
"version": "1.0.0"
}
main.js
メイン処理を書きます。
define(function (require, exports, module) {
console.log("こんにちは世界");
});
デバッグ
もう動きます。
Brackets の中身はブラウザなのでリロードができます。
Brackets のメニュー「デバッグ」→「拡張機能付きでリロード」
またはショートカットキー Command + R
拡張機能マネージャーを開くと、作った拡張機能を確認できます。
今回はコンソールに出力するので、コンソールを見てみます。
Brackets のメニュー「デバッグ」→「開発者ツールを表示」
またはショートカットキー Option + Command + I
Chrome でよく見る開発者ツールが開きます。
Console タブを開くと、「こんにちは世界」が出力されていることを確認できます。
開発者ツールは Brackets のメニュー「デバッグ」→「ステータスバーにエラーを表示」にチェックを入れておくと、Brackets 下部の「エラー：XX」からワンクリックで開くこともできます。
できること
UI 要素の追加
- メニュー
- ショートカットキー
- ツールバーのアイコン
- パネル
言語サポート
- クイック編集
- クイックドキュメント
- 定義をクイック検索
- コードヒント
- 定義にジャンプ
- 構文ハイライト
- Lint
その他
- ライブプレビュー
- ファイルツリー
- 設定
DOM 操作や Node API も使えるので、ほかにもいろいろできます。
より詳しいリンク
おわりに
意外と簡単に始められて、できることも多い。