DockerとVS Code Remote Containersを用いたフロントエンド開発環境構築
背景 プロジェクトの新規立ち上げや、新しくプロジェクトに新規メンバーが入った場合に環境構築に手間取ることが多いため、Docker＋VS Code Remote Containersのフロントエンドアプリケーション開発環境構築ができるリポジトリを作成しました。 本記事では上記リポジトリを用いた環境構築手順とCreate React Appによる簡単なアプリ開発例を説明します。 また、上記リポジトリをgit cloneしなくても一から同じ環境を構築できるように、リポジトリに含まれるファイル群についてもそれぞれ説明します。 本記事の対象はフロントエンドですが、バックエンドのプロジェクト構築も基本的には同じ知識で構築できるはずです。 前提条件 本記事では以下を前提条件とします。ただし、WindowsやLinuxでも基本的には問題ないはずです。 macOS Monterey Visual Studi
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 を持っているならオーバレイを表示 オーバレイ中の要素名をクリックした
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Styled-componentsでEmmetが効かない - Qiita
