React で展開された HTML 要素から vscode の生成元コードに飛ぶ 方法

自分が欲しかったから作ったシリーズ 説明しづらいので下記の動画を見たほうが速いです。 Shift を押している間だけオーバレイが有効になり、要素名をクリックすると vscode の該当行に飛びます。 今のところ vite + react のみの対応ですが、仕組み上、あらゆる UI フレームワークに適応可能です。 何が起きているか TypeScript transformer の仕組みで *.tsx の jsx 要素に data-sj-path="vscode://file/..." を付与する TypeScript AST は sourcemap 用の情報を持っている Node の parent を探索し、直近の関数コンポーネント名を探す Shift を押している間、 マウスでホバーされた要素が data-sj-path を持っているならオーバレイを表示 オーバレイ中の要素名をクリックした

[mizchi]

Reactで生成されたHTMLからvscodeのソースコードに飛ぶプラグインを作った

[programmablekinoko]

凄い、そしてブラウザはそろそろネイティブでJSX解釈出来るようになってほしい

[rochefort]

すごい便利そう

[ka2nn]

Reactの開発ビルドならElementのプロパティにソースコードのパスが入っているので自分はこんな感じにしてます https://gist.github.com/ka2n/24aabfc4c641a4a987885f69ab2363ce#file-open-source-ts-L242

[t_lav95]

完成したのか！！ やっぱこのヒトすげえ

[Pasta-K]

なるほど！！！！

[amagitakayosi]

便利そう / これWebpackプラグインとかでsourcemap吐いてChrome拡張機能でパースすれば普通に運用に乗せれそう？

[snobsnog]

めっちょべんりなやーつー

[ys0000]

なんか便利そうなのでそのうち試すかも。

[mayumayu_nimolove]

ものはいいとしてプラグインの作り方の参考

[warufuzaketaichi]

便利そう

[Helfard]

すげー。