[フレーム]
はてなブックマークアプリ

サクサク読めて、
アプリ限定の機能も多数!

アプリで開く

気に入った記事をブックマーク

  • 気に入った記事を保存できます
    保存した記事の一覧は、はてなブックマークで確認・編集ができます
  • 記事を読んだ感想やメモを書き残せます
  • 非公開でブックマークすることもできます
適切な情報に変更

エントリーの編集

loading...

エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。

タイトルガイドライン

このページのオーナーなので以下のアクションを実行できます

タイトル、本文などの情報を
再取得することができます
コメントを非表示にできます コメント表示の設定

ブックマークしました

ここにツイート内容が記載されます https://b.hatena.ne.jp/URLはspanで囲んでください

Twitterで共有

ONにすると、次回以降このダイアログを飛ばしてTwitterに遷移します

168users がブックマーク コメント 12

ガイドラインをご確認の上、良識あるコメントにご協力ください

0 / 0
入力したタグを追加

現在プライベートモードです 設定を変更する

おすすめタグタグについて

よく使うタグ

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

168 users zenn.dev/mizchi

ガイドラインをご確認の上、良識あるコメントにご協力ください

0 / 0
入力したタグを追加

現在プライベートモードです 設定を変更する

おすすめタグタグについて

よく使うタグ

はてなブックマーク

はてなブックマークで
関心をシェアしよう

みんなの興味と感想が集まることで
新しい発見や、深堀りがもっと楽しく

ユーザー登録

アカウントをお持ちの方はログインページ

記事へのコメント12

  • 注目コメント
  • 新着コメント
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
なんか便利そうなのでそのうち試すかも。

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

2021年12月27日 リンク

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

その他
warufuzaketaichi
便利そう

その他
Helfard
すげー。

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

2021年12月27日 リンク

その他

注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています

リンクを埋め込む

以下のコードをコピーしてサイトに埋め込むことができます

プレビュー
アプリのスクリーンショット
いまの話題をアプリでチェック!
  • バナー広告なし
  • ミュート機能あり
  • ダークモード搭載
アプリをダウンロード

関連記事

usersに達しました!

さんが1番目にブックマークした記事「React で展開され...」が注目されています。

気持ちをシェアしよう

ツイートする

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

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

ブックマークしたユーザー

  • techtech05212023年04月03日 techtech0521
  • ysirman2022年12月02日 ysirman
  • mkusaka2022年05月09日 mkusaka
  • mjtai2022年03月23日 mjtai
  • lugecy2022年01月16日 lugecy
  • W53SA2022年01月04日 W53SA
  • koikejinshi2021年12月30日 koikejinshi
  • rochefort2021年12月30日 rochefort
  • yuiseki2021年12月30日 yuiseki
  • ka2nn2021年12月29日 ka2nn
  • t_lav952021年12月29日 t_lav95
  • klim08242021年12月28日 klim0824
  • Toge2021年12月28日 Toge
  • berlysia2021年12月28日 berlysia
  • potato4d2021年12月28日 potato4d
  • Pasta-K2021年12月28日 Pasta-K
  • amagitakayosi2021年12月28日 amagitakayosi
  • hush_in2021年12月28日 hush_in
すべてのユーザーの
詳細を表示します

ブックマークしたすべてのユーザー

同じサイトの新着

同じサイトの新着をもっと読む

いま人気の記事

いま人気の記事をもっと読む

いま人気の記事 - テクノロジー

いま人気の記事 - テクノロジーをもっと読む

新着記事 - テクノロジー

新着記事 - テクノロジーをもっと読む

同時期にブックマークされた記事

いま人気の記事 - 企業メディア

企業メディアをもっと読む

はてなブックマーク

公式Twitter

はてなのサービス

Copyright © 2005-2025 Hatena. All Rights Reserved.
設定を変更しましたx

AltStyle によって変換されたページ (->オリジナル) /