Brackets - エディタとしては正直まだまだ、だけど、、、

最近、HTML、CSS、JavaScriptを書くときはBracketsを使っています。JSLintは最初から入ってるし（JSHintは拡張でインストール可能）、どういう仕組みかわからないけど何となく補完は効くし、ライブプレビューやクイックエディットは便利です。とにかく割と気軽にサクサク使える感じです。

• 【オープンソース】Adobe Brackets を使ってみたよ【テキストエディタ】 ｜ Developers.IO
• [報告]Chrome即反映が魅力の快適テキストエディタ『Adobe Brackets』がなかなか良い感じだったよ｜ウェビメモ
• Sublime Text2との恋を見送り、Adobe Bracketsに巡り会いました - WEBCRE8.jp

テキストエディタととして見れば、正直結構不満です。他のテキストエディタとの比較をやれば足りないものだらけでしょう。改行コードも文字コードも指定できないし、タブやスペースは表示できないし。

そしてEmacsやVimなどを使っている人には信じられないでしょうが、このエディタには設定ファイルがありません。というか設定そのものがほぼ無いです。

設定が無いならどうやってカスタマイズすればよいのか。そうですね。拡張を書けばいいんです。そのそもこのエディタ、たいしたキーバインド割り当ててないくせに、F5はBrackets自体のリロード、F12はBrackets自体のデバッグに割り当ててやがります。デバッグさせる気満々です。俺らの扱いよくわかってんじゃねーか。

拡張の書き方はとても簡単です。「ヘルプ」-「拡張機能のフォルダーを開く」で開いたディレクトリの下のuserディレクトリの下に任意のフォルダを作って、そこにmain.jsを置くだけです。最小構成はこう。

define(function (require, exports, module) {
    alert("hello");
});

で、F5キーを押すとalertが表示されます。重要なのは、Brackets自体がHTML、JavaScript、CSSで作られているということです。F12キーを押すとChrome Developer Toolsでデバッグとかインスペクトができます。

背景画像を変えてみましょう。

// main.js
define(function (require, exports, module) {
    var ExtensionUtils = brackets.getModule("utils/ExtensionUtils");
    ExtensionUtils.loadStyleSheet(module, "style.less");
});

// style.less
.CodeMirror-scroll {
    background: url("background.jpg");
}

ExtensionUtils.loadStyleSheet()がlessをコンパイルしてcssを埋め込んでくれます（もちろんcssで書いてもいいんですが）。

はい。見づらいです。適当に直しましょう。

// style.less
.CodeMirror-wrap {
    background: url("background.jpg");
}
.CodeMirror-scroll {
    background: rgba(255, 255, 255, 0.7);
}

こんな風に、HTML、JavaScript、CSSの知識でいじれるのが面白いなーと思うのです。Brackets自体のソースも、結構素朴な（むしろこんなんで良いのって思うくらい素朴な）JavaScriptです。先ほどのコードのExtensionUtils.loadStyleSheet()が何をやっているかは、src/utils/ExtensionUtils.jsを見れば一目瞭然です（そしてこのファイルの場所も、brackets.getModule("utils/ExtensionUtils")からすぐわかります）。