[B! react][vscode] hush_inのブックマーク

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

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

hush_in 2021/12/28

リンク

React+TSプロジェクトで便利だったLint/Format設定紹介

こんにちは、よしこです。この記事は 2020年に立ち上げたWebフロントエンド構成の振り返りの「linter/formatter」項の詳細記事です。単体でも読めますが、よければ元記事もあわせてどうぞ！この記事では、今わたしが株式会社ナレッジワークというスタートアップで開発・運用しているプロジェクトにおいて便利だったLint/Format関連の設定についてご紹介していきます。使っているのは、TSのlintのためにESLint, CSSのlintのためにStylelint, 主なファイルのformatのためにPrettierです。 ESLint pluginsとextendsだけどんなもの入れてるか載せておきます。 "plugins": [ "strict-dependencies", // 後述 "unused-imports", // 後述 ], "extends": [ "a

hush_in 2021/10/03

リンク

リアルタイムにコンポーネントをプレビューできるReact Preview (beta) を試してみた | DevelopersIO

吉川@広島です。 Are you a React dev? Do you use Visual Studio Code? I just released the beta of React Preview for VS Code ?https://t.co/HnFpTpO9op pic.twitter.com/qU4sxTo30g — François Wouts (@fwouts) June 25, 2021 「お前らReactとVSCode使ってる？ React Preview for VS Codeのベータ版を出したぜ」こちらのツイートが目に入り、「え、これすごくない？」ということで試してみました。本記事ではReactアプリケーションの初期構築手順は割愛します。環境 react 17.0.2 typescript 4.3.2 styled-components 5.3.0 VS