読者です 読者をやめる 読者になる 読者になる

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

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

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

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

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

f:id:iakio:20131220190021p:plain

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

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

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

f:id:iakio:20131220190848p:plain

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

// 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で書いてもいいんですが)。

f:id:iakio:20131220191325p:plain

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

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

f:id:iakio:20131220191531p:plain

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