Help us understand the problem. What is going on with this article?

Brackets の拡張機能を作る

はじめに

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

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

スクリーンショット 2019-12-18 22.03.09.png

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

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

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

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

スクリーンショット 2019-12-18 22.08.50.png

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

できること

UI 要素の追加

  • メニュー
  • ショートカットキー
  • ツールバーのアイコン
  • パネル

言語サポート

  • クイック編集
  • クイックドキュメント
  • 定義をクイック検索
  • コードヒント
  • 定義にジャンプ
  • 構文ハイライト
  • Lint

その他

  • ライブプレビュー
  • ファイルツリー
  • 設定

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

より詳しいリンク

おわりに

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした