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 を持っているならオーバレイを表示 オーバレイ中の要素名をクリックした
VSCode + Markdownでスライドや書籍も書いちゃおう！ - Qiita
はじめに Markdownって便利ですよね？ README.md、PR や Issue の本文やコメント、Qiita や Zenn はもちろん、Google Docs や Trello や Notion や Jupyter Notebook でも使えるみたいです。もっといろいろな文書を Markdown で書ければいいのになあ、あらゆる文書のソースコードを Markdown にできればいいのになあ。 さあ、Markdown の可能性を広げましょう！ 本記事では「スライド」と「(電子)書籍」をMarkdownで書く方法をご紹介したいと思います。もちろん、VSCodeでMarkdownを効率よく便利に書いていくためのチップスもご紹介していきますよ。 ご参考スライド VS Code Conference Japan 2021 で発表した際の以下スライドもご参照ください。 もちろんこのスライドもV
続・VSCode上でvueファイルに対してESLintとPrettierが快適に動作する設定 - Qiita
2022/10/03 追記 本稿は2020/04/22頃にVue 2+VeturというVSCode機能拡張を使って開発する前提でした。 現在は、Vueは3になりComposition APIが追加されていたり、TypeScriptも使えるようになっていたり、VolarのVSCode機能拡張を使うようになっており、本稿を書いた時から状況が変わっています。 Vue 3になってからの情報はあまりキャッチアップできていないため、快適な設定についてはよくわからないのでまだ書けません。 が、ESLintでLintを行い、Prettierでフォーマットする、というのは変わらないように思えます。（静的検査を環境に依存することなく行うには今も必要だと思います） 元の記事 以前に投稿した時 から色々変化したのでアップデートを兼ねて。 VSCodeがeditor.codeActionsOnSaveやeditor
今見ているファイル内をSearchしやすくするVSCode拡張を作りました - $shibayu36->blog;
今見ているファイル内をSearchしやすくする「Search in Current File」というVSCode拡張を作ったので紹介です。 https://github.com/shibayu36/vscode-search-in-current-file https://marketplace.visualstudio.com/items?itemName=shibayu36.search-in-current-file 背景 Emacsにはhelm-occurという拡張があって、インクリメンタルサーチからスムーズにファイル内の検索結果一覧を見れる拡張がある。これが現在のファイルを探索するのに非常に便利で愛用していた。 VSCodeでも同じようなことが出来ないかなと思ったので、勉強がてら拡張を作ることにした。 使い方 Search in Current File - Visual Stu
VSCodeでPerlデバッグ - Qiita
この記事はPerl Advent Calendar 2017の18日目の記事です。 昨日は @karupanerura さんで「コマンドラインツールとしてのperl」でした。 普段はPerlでの開発の場合、Mac＋Vimで書いていたのですが、 最近、他言語での開発でVSCodeを使って、ターミナル、Git操作やデバッガなど組み込みのインターフェースのバランスの良さと、その軽快さに非常に驚きました。 そこで、改めてPerl用のプラグインなどを探してみて、デバッガ プラグイン「Perl Debug」を知りましたのでご紹介します。 なお、VSCode本体の紹介やインストールについては説明省略しています。 また、私の検証環境がMacなので、WindowsやLinux環境では若干動作が異なる可能性があります。 Perl Debug Morten Henriksen氏作 (Github) まずは、紹介
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Support projects with multiple tsconfig.json · Issue #3772 · microsoft/vscode