Source Mapを使ってJSXで生成したJSファイルからJSXファイルの対応箇所にジャンプする
SourceMapについては以下の記事を参照してください。
http://maruta.be/intfloat_staff/144
基本的にブラウザに搭載されているデバッガで使用することを想定しているようですが、当然他のツールから使用することもできます。というわけで、タイトルの通りのプラグインを作ってみました。
インストール
GitHub - chikatoike/sourcemap.vim: Switch between generated file and orignal file using source map. をインストールしてください。
準備
Source Mapの情報を.mappingファイルに出力する必要があります。JSXファイルをコンパイルするときに、 --enable-source-map オプションを使用してください。
ちなみに、.mappingファイルに含まれるファイルパスが相対パスだと、うまく動作しないかもしれません（JSXコマンドが sourceRoot を出力してくれないため。ただ、spec 的には sourceRoot は optional）。そのため、絶対パスで出力したほうがいいかもしれません。絶対パスで出力するには、JSXコマンドに渡すファイル名を絶対パスにすればよいみたいです。
動作
JSXをコンパイルして出力されたJSファイルをVimで開いている状態で、 :SourceMapSwitch コマンドを実行すると、JSXファイルの対応箇所にジャンプします。ただし、JSXが自動的に挿入したコードなど、対応関係がない位置で実行してもジャンプしません。また、逆のJSXファイルからJSファイルへのジャンプはまだ出来るようになっていません(可能なのかもわかっていませんが)。
さらに、Source Mapとしては行内の桁位置を情報として持っていますが、手を抜いたため、行番号しか見ていません。なので、ジャンプする位置は行頭となっています。
実装
このプラグインは GitHub - mozilla/source-map: Consume and generate source maps. のコードを流用して作りました。javascriptのコードをVim scriptへベタ移植しています。vital.vimも使用しています。
また、この記事 source map generatorの使い方 - Islands in the byte stream も参考にしました。
