はじめに

Brackets の拡張機能を作る話は資料が少ないので書いてみる。

ミニマムなコードとできることを書きます。

開発環境は Mac の想定。

（軽く書いたのであとで書き足すかもしれない。）

おおまかなこと

HTML, CSS, JS (Browser, Node) で作ります。Web屋万歳。

フレームワークっぽいのは次が使えます。

/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 にします。

少なくとも次のファイルが必要です。

これらを新しいディレクトリに置きます。

拡張機能マネージャの検索や表示などに使うメタ情報を書きます。

{
    "name": "yourname.hello-world",
    "version": "1.0.0"
}

メイン処理を書きます。

define(function (require, exports, module) {

    console.log("こんにちは世界");

});

もう動きます。

Brackets の中身はブラウザなのでリロードができます。

Brackets のメニュー「デバッグ」→「拡張機能付きでリロード」
またはショートカットキー Command + R

拡張機能マネージャーを開くと、作った拡張機能を確認できます。

今回はコンソールに出力するので、コンソールを見てみます。

Brackets のメニュー「デバッグ」→「開発者ツールを表示」
またはショートカットキー Option + Command + I

Chrome でよく見る開発者ツールが開きます。

Console タブを開くと、「こんにちは世界」が出力されていることを確認できます。

開発者ツールは Brackets のメニュー「デバッグ」→「ステータスバーにエラーを表示」にチェックを入れておくと、Brackets 下部の「エラー：XX」からワンクリックで開くこともできます。

DOM 操作や Node API も使えるので、ほかにもいろいろできます。

意外と簡単に始められて、できることも多い。