[B! vscode] en-en-raのブックマーク

VSCodeの偽拡張機能を作ったらダウンロードされまくり＆悪意あるコードを簡単に仕込めるVSCode拡張機能システムの欠陥も明らかになったという報告

Microsoft製テキストエディタ﹁Visual Studio Code(VSCode)﹂は拡張機能を導入することで機能を追加したり外観をカスタムしたりできます。セキュリティ研究者らが﹁人気拡張機能にコードを挿入した偽拡張機能﹂を公開した結果、短期間で大企業やセキュリティ企業を含む多くのユーザーのマシンにインストールされたとのこと。セキュリティ研究者らはVisual Studio Codeの拡張機能システムの欠陥を指摘し、警鐘を鳴らしています。 1/6 | How We Hacked Multi-Billion Dollar Companies in 30 Minutes Using a Fake VSCode Extension | by Amit Assaraf | May, 2024 | Medium https://medium.com/@amitassaraf/the-stor

en-en-ra 2024/06/11

リンク

ast-grep VSCode: 構造検索と置換の強力なツール

こんにちは、 ast-grepの作者Herringtonです。正規表現でコードを検索したことがある方なら、複数行のマッチングや入れ子構造の処理、コメントの無視などに苦労したことがあるかもしれません。そこで、ast-grep VSCodeという新しい拡張を紹介します。これは、構造的検索と置換︵SSR︶という技術を利用して、より正確で効率的な検索と置換を実現するツールです。構造検索は？テキスト検索と置換の限界例えば、JavaScriptコードをリファクタリングして、lodash の _.filter関数をネイティブの Array.prototype.filterメソッドに置き換えたいとします。単純なテキスト検索と置換は次のようになります: これは一部のケースではうまくいくかもしれませんが、いくつかの問題があります。一行の式しかマッチングできません。コードが複数行にまたがってい

en-en-ra 2024/03/03

vscode

リンク

Code Tour を使ってじっくり確実にコードを読む

日々のタスクに忙殺されていると、ついつい既存コードを流し読みして、ざっと動くコードを書いてしまいたくなります。一発でうまく動けば短期的にはいいのですが、長期的にはコードの理解が追いつかなったり、一発でうまく動かなかった場合にかえって時間がかかってしまいます。 VSCode の拡張機能である Code Tour を使うと、コード上にメモを残しながら読み進めることができるので、既存のコードを読む際に便利です。 Code Tour とは VSCode の拡張機能で、コード上にメモを残しつつ、そのメモをたどることができるツールです。使い方ツアーを始めるコマンドパレットから﹁Code Tour: Record Tour﹂を選択すると、ツアーの記録モードになります。ツアーの名前どのソースに紐づけるか︵紐付けなし、ブランチ、タグ︶を選択すると、リポジトリ直下に .tours/${指定したツ

en-en-ra 2024/02/10

vscode

リンク

debug.gem、VS Code Debug Visualizer を使ってデバッグ中のオブジェクトをビジュアライズしてみる

概要 VS Code Debug Visualizer という VS Code のエクステンションをご存知でしょうか。デバッグ中のオブジェクトを以下のようにビジュアライズしてくれるものです。 VS Code Debug Visualizer ではこれまで Ruby のサポートはされていませんでしたが、最新バージョン︵本稿執筆時点ではバージョン2.4︶より debug.gem を用いてのビジュアライズが可能になりました。本稿ではそれらの実際の使い方についてお話ししていきます。対象読者本記事では VScode を用いた debug.gem の簡単な利用方法について理解していて、既にそれらのセットアップが完了している方を想定しています。 VScode を用いた debug.gem の使い方やセットアップ方法については以下のリンクなどをご覧ください。事前準備事前準備として VS Code

en-en-ra 2022/12/28

リンク

「Visual Studio Code」でのリモート開発が手軽に～リモートトンネル機能が提供開始／「SSH」は不要。「VS Code Server」で簡単セットアップ

en-en-ra 2022/12/13

vscode

リンク

VSCheatsheet | Shortcuts in the shortest time possible | Shortcut Illustrations

VSCheatsheet provides a list of instructive illustrations with the most frequently used. Find your favorite shortcut and increase your profanity.

en-en-ra 2022/10/18

vscode

リンク

【VSCode】開発環境を自動で立ち上げる

突然ですが世の中には2種類のエンジニアがいます。開発環境をずっと立ち上げっぱなしにするエンジニアと毎回落とすエンジニアです。自分を含む毎回落とすエンジニアにとって、開発環境を立ち上げる度に複数のターミナルを開き、それぞれでコマンドをたくさん打たないといけないのは苦痛です🥺 そこでこの記事ではVSCodeでプロジェクトを開いたときに開発環境を自動で立ち上げる方法をご紹介します！おまけで紹介するAlfredまで設定するとコマンド一発で開発環境が立ち上がるようになり、こんな感じになります！ではいってみましょう！対象読者開発環境を毎回落とすエンジニア VSCodeを使っている開発環境を立ち上げるためのコマンドがたくさんあって毎回打つのがめんどくさい環境 VSCode: 1.66.0 macOS Monterey Hello Custom Task! VSCodeでプロジェクトを開

en-en-ra 2022/04/04

リンク

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 を持っているならオーバレイを表示オーバレイ中の要素名をクリックした

en-en-ra 2021/12/27

vscode
react

リンク

VSCode で TypeScript の交差型のプロパティを省略せずに見れるようにする - Mobile Factory Tech Blog

VSCode でホバーして型情報を見ようとすると、交差型はプロパティが展開されませんプロパティの型を展開する Mapped Types を通すことで省略せずにプロパティを見ることができます。プロパティが交差型になっていることもあるので、再帰的にプロパティを Mapped Types に通すような型を定義しておいて、通すことでプロパティを全て確認できます type Expand<T> = T extends object ? T extends infer O ? { [K in keyof O]: Expand<O[K]> } : never : T type Temp = Expand<`確認したい型`> 厳密でなくとも簡単にどんなプロパティがあるか把握したいだけなら組み込みの Required や Partial を使うのが手軽です。ただし、あくまでデバッグ用途でそれぞれ省略可能プロ

en-en-ra 2021/12/15

リンク

「Docker」Visual Studio Code拡張機能がComposeファイルの補完・ヘルプ・検証に対応／「Docker Compose Language Service」が既定で有効化

en-en-ra 2021/11/22

リンク

VS Code で GitHub 上のリポジトリを直接参照できる「Remote Repositories」を試してみた | DevelopersIO

本日 2021/06/11 に Visual Studio Code 1.57 がリリースされました?リリースノートの中にあった﹁Remote Repositories﹂がとても唆るものだったので紹介したいと思います。︵実は Preview Feature として 1.56 に搭載されていた機能です。Terminal tabs しか見てなかった……︶現段階ではプレビュー版の機能になります。Remote Repositories のざっくり機能説明 GitHub 上のリポジトリをローカルに clone することなく VS Code で直接参照できる機能です。これにより GitHub 上でリポジトリ内の検索するよりもより使い慣れた画面で検索が行えるようになったり、VS Code の豊富で強力な拡張機能によってブラウザ上でのコード閲覧よりもリッチな体験が得られたり、更にはブランチ切って

en-en-ra 2021/06/12

リンク

Top 10 VS Code extensions for 2021 - LogRocket Blog

Ashutosh Singh Ashutosh is a JavaScript developer and a technical writer. He writes about the fundamentals of JavaScript, Node.js, React, Next, Vue, and tutorials on building projects. Visual Studio Code is one of the most widely used code editors in the developer community. One of the reasons for VS Code’s popularity is its many extensions that speed up the development process. In this guide, we’