It is important to note that the component model does not support low-level (C-style) pointers. As such, you cannot pass object graphs or recursive data structures. In this respect, it shares the same limitations as JSON. To minimize data copying, the component model introduces the concept of resources, which we will explore in more detail in a forthcoming section of this blog post. The jco projec
はじめに こんにちは！@nyakako13 です。 少し前からtypescript,reactの学習を進めています。 pythonでの開発時はblack formatterとiSortの拡張機能でimport文の自動並べ替えをしていました。 今回、typescriptの開発でも同じように自動でimport文の整理ができないかな？と思い調べてみました。 eslintやprettierでもplugin等で実現できるみたいですが、現在は一人での開発で、すべてのプロジェクトに適用したいので、とりあえず今回はvscodeの設定でやってみます。 vscodeの設定方法 vscodeのsetting.jsonを開きます 下記を追記します。 "editor.formatOnSave": true, "editor.codeActionsOnSave": { "source.organizeImports"
[VS Code]タブのカスタムラベル設定でpage.tsx、layout.tsxなどのファイルを見やすくする | DevelopersIO
[VS Code]タブのカスタムラベル設定でpage.tsx、layout.tsxなどのファイルを見やすくする どうも！オペレーション部の西村祐二です。 最近、Next.jsなどでフロントエンドの実装も行うことが増えてきました。 実装を進めていくと、page.tsx,layout.tsx,index.tsx,route.tsなど同名のファイルが増えてきて、どのファイルを開いているか分かりづらいなと思う場面がありました。 VS Codeのv1.88で開いているファイルタブのラベルをカスタマイズできるようになったので、その設定方法を紹介したいと思います。 Visual Studio Code March 2024 結論 最初に結論として、settings.jsonに下記設定をすることでディレクトリ名も表示されるようになりタブを見やすくすることができます。 .vscode/settings.js
![[VS Code]タブのカスタムラベル設定でpage.tsx、layout.tsxなどのファイルを見やすくする | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/611914e4c074abe947efa5c820fc1646e6c60a0a/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2020%2F06%2Fvscode-2020-eyecatch-1200x630-1.png)
[小ネタ]VS Codeの拡張なしでキャメルケース、パスカルケース、スネークケース、ケバブケース、大文字、小文字に変換する | DevelopersIO
どうも！オペレーション部の西村祐二です。 Python、TypeScriptなどいろんな言語でプログラミングしていると、関数名や変数名などをキャメルケース、スネークケースに変更したい、大文字に変換したい場面がちょくちょくあります。 今まではchange-caseという文字列を変換してくれる拡張機能を導入してましたが、VS Codeデフォルトの機能でも変換できることを知ったので紹介したいと思います。 環境 VS Code: 1.89 変換方法 文字列を選択し、「cmd + shift + p」などでコマンドパレットを開きます。 検索窓に「transform」と入力します。 変換したい形式を選択します。 下記ではサンプルとしてケバブケースに変換してます。 対応形式 バージョン1.89現在、下記に対応してます。 キャメルケースに変換 スネークケースに変換 ケバブケースに変換 パスカルケースに変換
Version 1.89 is now available! Read about the new features and fixes from April. April 2024 (version 1.89) Update 1.89.1: The update addresses these issues. Downloads: Windows: x64 Arm64 | Mac: Universal Intel silicon | Linux: deb rpm tarball Arm snap Welcome to the April 2024 release of Visual Studio Code. There are many updates in this version that we hope you'll like, some of the key highlights
VSCode上でシーケンス図/クラス図/フローチャートをサクッと書きたい ~Mermaid Graphical Editor~ - Qiita
VSCode上でシーケンス図/クラス図/フローチャートをサクッと書きたい ~Mermaid Graphical Editor~初心者umlVSCode新人プログラマ応援mermaid はじめに Mermaid Graphical EditorというVSCodeの拡張機能にとても感動したので一筆書きました こんな方におすすめ シーケンス図/クラス図/フローチャートをサクッと書きたいけどmermaidとか難しそう 😢 できること VSCode上でポチポチしながらシーケンス図/クラス図/フローチャートを描けるようになる mermaid記法のコードも自動生成されるよ 個人的メリット mermaidの学習コスト0 紙で書くよりも修正しながら書きやすい 導入手順 （簡単7steps） (1) VSCode上で「Mermaid Graphical Editor」という拡張機能をインストールする (2)
devcontainerを使ってみよう
devcontainerを使ってみよう devcontainerを使う上で知っておくと良さげな情報のまとめ記事です 前にRemote SSHでdevcontainerの環境を構築する記事を書いたので、今回はdevcontainer全般の情報をまとめてみました tl;dr devcontainerを使うと開発環境をコンテナで構築できるよ(ランタイムとかツール類含めて！) docker composeだとアプリケーションを動作させる環境は作れるけどdevcontainerは開発環境ごと構築できて便利 devcontainerを使うにはdockerとdevcontainerを利用できるエディタが必要 devcontainer内でdocker composeを利用できるから、devcontainer用のコンテナ+ミドルウェアコンテナを用意すればアプリケーションを開発できる環境がまるっとコンテナで作
はじめに こんにちは。エンジニアの皆さん。 日々の業務にお疲れではないでしょうか？ 消えないエラー、動かないプログラム、迫る締切、etc... 数あるストレスで限界になっていませんか？ ... ...!!! そんな時はペットを飼いましょう！！！！！！！！！！ ...というわけで、VSCode上でペットを飼うことができる拡張機能を紹介します。 その名も、vscode-pets.......!!!!!!!!!! これです。vscode-petsで検索しましょう。 導入 インストールしたらコマンドからPet Coding: Start pet coding sessionを実行します。 Pet Coding:Spawn additional petから好きなペットを選んで... ほわああああああああ！！！！！！！ 殺伐としたVSCodeに一輪の花が爆誕しました。かわいいですねー。 あそびかた す
Behind VS Code Extensions for JavaScript / TypeScript Linnting and Formatting
# Behind VS Code Extensions for JavaScript / TypeScript Linnting and Formatting This slides are used at VS Code Conference Japan 2024 https://vscodejp.github.io/conference-2024/ (15 ~ 20 minutes) ## References: - Extension API | Visual Studio Code Extension API https://code.visualstudio.com/api - The Biome Tool Chain https://fosdem.org/2024/schedule/event/fosdem-2024-2563-the-biome-toolchain/ - Mo
普段何気に使っているPostman。最近まで「手軽にGUIで疎通を試せて、設定を共有できてべんり〜」くらいで使っていました。 けどふと「実はもっと便利な機能があるのでは？」と思って調べてみたところ、色々出てきたのでせっかくなのでシェアしたいと思います。 たまたまですがちょうど10選！ 地味に便利な機能10選 VSCode拡張 PostmanにはVSCode拡張機能があります。 インストールするだけで、VSCodeのサイドバーから利用可能です。 日本語設定 日本人なので日本語で使いたい。 右上の歯車→Settingsから以下の通り選択することで日本語化が可能です。 変数の定義 複数のAPIで同じ値を使いたい場合があるとします。例えばテスト用のユーザーIDなどです。 Postmanではそんな値をAPIファイルに逐一ハードコードする必要はなく、変数に保存することが可能です。 Postman Ec
VS CodeでAWSを操作しよう
2024/04/20(土) 開催の「VS Code Conference JP 2024」における私の発表「VS CodeでAWSを操作しよう」の発表資料になります。 #vscodejp URL： https://vscodejp.github.io/conference-2024/
Deno first でやっていく
去年末ぐらいから Deno を使う割合がグッと増えてきた。最近のJS関連は7割ぐらい deno 環境の VSCode でコードを書いている気がする。 今回はいくつかの実例を示しながら、実際に Deno 使えるじゃんというイメージを持ってもらうためのユースケースを紹介していく。 というか、 deno が普及してくれないと、自分が作ったツールの紹介を全部 deno のインストールから書かないといけなくなる。みんなインストールしといて。 最初に: なぜ Deno を使いたいか 一番の問題点、Node は新しいプロジェクトを一式整えるための手間が非常に重い。 とくに ts で書いたものを他の環境に渡すための方法が未だにしんどい。ある環境で動いたコードをそのままコピーしても、プロジェクト設定の非互換を踏む可能性が非常に高い。 deno にそういう側面がないとは言わないが、非常に少ない。とくに TS
なぜVimmerの僕はマルチカーソルを必要としないか
はじめに VSCode などのテキストエディタには、マルチカーソルという機能があります。 これは、エディタ上に複数のカーソルを出現させ、一度に複数の場所に同じ操作を行うことができる機能です。 VSCode上でのマルチカーソル 自分はVSCodeをメインとしていた時にはこの機能を多用していたのですが、Neovimに移行してから一切使っていません。 一応Vim/Neovimにもマルチカーソルを実現するプラグインがいくつか存在します。 ですが、一度は入れてみるものの結局使わないままアンインストールしてしまいました。 ではなぜ、マルチカーソルが必要なくなったのか。 それはVim/Neovimの操作体系/機能が十分に強力であるので、マルチカーソルを使わなくても同じことができるからです。 この記事では、自分がVSCodeのマルチカーソルで行っていた操作をVim/Neovimの操作体系/機能でどのように
「Tailscale SSH」が正式版に到達。面倒な鍵管理が不要のSSH、VSCode拡張機能でリモートファイルも編集可能
「Tailscale SSH」が正式版に到達。面倒な鍵管理が不要のSSH、VSCode拡張機能でリモートファイルも編集可能 Tailscale社は、統合的なアイデンティティ管理による鍵管理を不要にした便利なSSHを実現する「Tailscale SSH」が正式版になったことを発表しました。 Tailscale SSH is now out of beta and into general availability! Still juggling SSH keys and managing identities across remote machines? There's a better way: https://t.co/sdvnCckSYg — Tailscale (@Tailscale) March 26, 2024 TailscaleはWireGuardをベースにしたVPN Tai
Findy Team+でフロントエンドエンジニアをしている 川村(@peijun333)です。 Findy では、フロントエンドのコード品質と安定性を確保するために Jest などのテストフレームワークを積極的に活用しています。通常、Jest は CLI から実行してテスト結果をコンソールで確認しますが、コマンドを用意する手間や、テスト経過のデバッグのために都度 console.log などでその内容を確認しなければならずとても不便です。 そこで、今回はテストの自動化とリアルタイムなフィードバックを提供する JavaScript の統合テストツールである Wallaby.js を紹介します。Wallaby.js を導入することで、開発効率の向上が期待できます。 Wallaby.js とは？ 前提条件 VS Code でテストの修正 Wallaby.js はリファクタリングに強い スナップシ
VSCodeでJavaScript / TypeScirptの未使用import文を自動で削除する - Qiita
こうするとファイル保存時に未使用のimport文を削除し、さらにimport文の順番を並べ替えてくれます。順番はimport元のファイルパスをアルファベット順に並べているようですね。 指定できるキーはexplicit以外にもありますので、詳しくはドキュメントをご覧ください。 最後まで読んでいただき、ありがとうございました！
はじめに Git Graphという拡張機能を使います。 Git GraphとGitLensという拡張機能を使います。[1] また、gitから開かれるエディタをvscodeにしておきます。 コミットのまとめかた（1分未満でできるよ） ステータスバーのGit Graphのボタンをクリックして、Git Graphの画面を開きます。 まとめたいコミットの一つ前のコミット（今回だとinit）を右クリックして、「Rebase current branch on this Commit...」を選択します。 「Launch Interactive Rebase in new Terminal」にチェックを入れて「Yes, rebase」をクリックします。 こんな画面が開きます。 まとめたいコミットを上から順にpickからsquashに変更します。最後の一つはpickのままにしておきます。そして「STAR
【Rye + uv + Ruff】Docker で VS Code の Dev Container 上に快適な Python 環境を構築する
0. はじめに 株式会社ディー・エヌ・エーに入社し，MLOps エンジニアをやっている @a5chin です． 本記事では，図 1 の様に VS Code の Dev Container 上に爆速で快適な Python 環境を構築することを目指します． 図 1: Dev Container 上で開発をすると Ruff による自動フォーマット[1]と pre-commit が走る 本記事の内容は全て上記リポジトリで簡単に試すことができるので，ぜひ clone して試して頂けたらと思います↑ Dockerfile 内で，Rye, uv, そして Ruff をインストールする手順を記述することで開発環境を標準化し，異なる環境間での一貫性を担保することができます． 0.1. 事前準備 本記事で作成したリポジトリを動かすためには，Docker Desktop と VS Code のダウンロード，VS
昨日、株式会社はてなの京都オフィスで開催されたKyoto Tech Talk #4でちょっとしたトークをした。 hatena.connpass.com タイトル「(新サービス|カクヨムネクスト)(オープン)?を支える スプレッドシート(芸|技術)」は、正直なところ決めるのがめんどくさくなったので、解釈の幅をもたせることで解決した。正規表現での発話を流行らせたい。 kakuyomu.jp オフライン登壇だったので、だいぶ実地の言葉で補足をした、つまりスライドだけ読んでもだいぶ端折られてる。スライドもこの記事の最後で公開はしておくが、テキストで補足をする。 新サービス立ち上げ時の運用機能は、作り込みすぎないではじめられるスプレッドシートが使える ぼくもそうだが、Excelやスプレッドシートはノンエンジニアでもだいたい使うことができる。新サービス立ち上げのような局面では、できるだけユーザー向けの
Mac＆Windows完全対応！VS Codeでの作業効率を爆上げするショートカットまとめ - Qiita
はじめに 今回はMacとWindowsのOS別にVSCodeのショートカットを紹介していきます。普段VSCodeを頻繁に使用する方も、これから使用する方も、ぜひ最後までご覧ください。 全てのショートカットを覚える必要はないので、自分に必要だと思うものだけ覚えましょう。一度ショートカットを覚えてしまえば、今後の作業効率が爆上がりすること間違いなし！ それでは順番に紹介をしていきます。 弊社Nucoでは、他にも様々なお役立ち記事を公開しています。よかったら、Organizationのページも覗いてみてください。 また、Nucoでは一緒に働く仲間も募集しています！興味をお持ちいただける方は、こちらまで。
Version 1.88 is now available! Read about the new features and fixes from March. March 2024 (version 1.88) Update 1.88.1: The update addresses these issues. Downloads: Windows: x64 Arm64 | Mac: Universal Intel silicon | Linux: deb rpm tarball Arm snap Welcome to the March 2024 release of Visual Studio Code. There are many updates in this version that we hope you'll like, some of the key highlights
Python仮想環境 Python3の標準ライブラリであるvenvを用いて仮想環境を構築します。 仮想環境はプロジェクトによってバージョン、ライブラリを使い分けるために使用します。 venvで仮想環境を作成する 以下のコマンドを実行して仮想環境を作ります
Prettierを使わない理由
この記事はPrettierを使用している人を非難したり、脱Prettierを推奨する事を目的としていません。 こういった考え方もあるということをひとつの意見としてご覧いただければ幸いです。 勘違いしている人が多そうなので追記します。 Prettierを使わないというのは私が独断で決めた事ではないです。 チームが発足する際の技術選定で合意は取れていますし、私が関与していない別のチームでも同様にPrettier無しで開発しています。 私達のチームはメンバー同士を互いに信頼していますし、細いスタイルで喧嘩を始めるようなメンバーは居ないので安心してください。 はじめに Prettierはコードフォーマッターとして広く使われているツールです。 コードスタイルに関する議論をなくすことを目的としており、ESLintとは異なりデフォルト設定のままですぐに使えるのが特徴です。 さらに、PrettierはJS
こんにちは、ニケです。 皆さん、CursorとClaude使っておりますでしょうか？ ブラウザ版Claudeに課金してはや数週間、もうこれがないとコーディングもままならないくらいには依存しちゃっています。 それまではCursorのChat欄メイン、たまーにうまくいかないときにChatGPTを使っていましたが、もう完全に乗り換えてしまいました。 GPTsのようなChatGPT専用の機能も元々あまり使っていなかったので、今回のサムネ作成で2週間ぶりに使用…（もうサブスク辞めようかな というわけで今回は私が普段どうやってCursorとClaude使って開発しているのかを共有したいと思います。 ⚠ 以降の説明は、Cursor有料版（$20）と ブラウザ版Claude（$20）が前提となっています。 ⚠ 私の環境ではGithub Copilotも有効になっていますが、CursorのCopilot機能
HackGen フォントを VSCode に適用してみた（Windows 11対応） | DevelopersIO
こんにちは！よしななです。 今回は、プログラミング用のフォントとしてオススメな HackGen フォントを VSCode にインストールし、反映させるまでの手順について備忘録として残します。 これから Windows 11 で開発環境を構築する方のための手助けになればと思います！ 目次 対象環境 対象読者 HackGen フォントとは？ セットアップ手順 インストール VSCode に反映させる やりたいこと イメージとしては、以下の画像の通り HackGen フォントを VSCode にインストールし、VSCode に反映させるところまでのセットアップ手順を示します。 対象環境 OS Windows 11 VSCode version 1.86 をインストール済みであること https://code.visualstudio.com/download 日本語化拡張機能導入済み環境で実行し
プログラミング支援AIサービスまとめ。GitHub Copilot、AWS CodeWhispererなど11種類（2024年3月版）
GitHub CopilotやAWS CodeWhispererをはじめとする、コードエディタに統合できる11種類のプログラミング支援AIをまとめた。 GitHub Copilotに代表されるコードエディタに統合されたプログラミング支援AIサービスは、まだ登場して間もないにも関わらず、多くのプログラマの生産性向上にとって欠かせない機能になりつつあります。 と同時に、プログラミング支援AIサービスはGitHub Copilot以外にもさまざまなクラウドベンダ、ツールベンダ、スタートアップなどが参入し、多様な製品が新たに投入され続けている変化の激しい分野でもあります。 ここではその中から、現時点での主要なサービスやソフトウェアを11種類取り上げ、まとめました。導入や選択の参考にしていただければと思います。 価格別の主な機能 （Copilot Individual ／ 月額10ドル／年間100ド
30分でわかるシステム運用アンチパターン / Operations Anti Patterns in 30 minutes
個人的Rails開発環境構築2024
新規でRailsプロジェクトを始める時の個人的な環境構築についてまとめる。前提とする条件等は下記。 規模: ~中規模 開発者数: 個人 利用シーン: PoC作成・スタートアップ立ち上げ・並の業務アプリ開発等 基本戦略 利用シーン的に「思い立ったらすぐアプリの開発ができる」という感じの運用がしたい。極力セットアップで悩みたくないから必要なミドルウェアなどは全部Dockerでインストールできるようにして立ち上げれば終わり、の環境を作る。その環境の中で色々とコマンドを叩いたり、rails newやrails gなどでRailsアプリを作成していく。 この辺のRailsの初期セットアップの手間を出来るだけ省きたいのでtemplateとなるリポジトリを作成し、そこからcloneしてくるだけでOKにする。 フロントエンドはReactなどを使わずをRails標準のerbとHotwireを軸に開発する。開
カイロスロケットは、和歌山県にある専用の射場「スペースポート紀伊」から13日の午前11時1分に打ち上げられた。しかしリフトオフの約5秒後に空中で爆発。射場の敷地内に破片が降り注ぎ、一部で火災も発生した。 その後、行われた記者会見では、発射後に何らかの異常が発生し、ロケットの「飛行中断システム」が爆破したという見方を明らかにした。「リフトオフすると飛行経路や各部の正常／異常をコンピュータが判断する。逸脱する場合には落下しても安全な場所で中断する」仕組みだという。 結果としてミッションは完遂できなかった。しかし豊田社長は「スペースワンとしては“失敗”という言葉は使いません。全ては今後の挑戦の糧。会社の文化です」と話す。そして「2020年代半ばまでに年間20機の打ち上げ」という目標を変えるつもりは「全くない」としている。 スペースワンは研究機関ではなく、株主や顧客がいる営利企業だ。現在は投資フェ
この記事について この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 コーディングを始めたい、コーディングにVSCodeというものを使うということはわかってるけど、なぜこれを使うんだろう。VSCodeの何が便利なんだろう。と思っている初心者の方に特に読んでほしいと思い書いています。 VSCodeを使うようになったきっかけ コードエディタ難民だった自分がいくつか試したのちに、Adobeが開発していたコードエディタBracketsに出会いました。拡張機能も追加しやすくてテーマも選べるし、使いやすい。とBracketsで落ち着いていたのですが、ある時「サポート終了になる」ということを知りエディタは何を使おうか…となり、その当時使い始める人が少しずつ増えていたVSCo
起動確認 いつもの 初期設定 VSCode左下の><をクリック 開発コンテナー構成ファイルを追加 ワークスペースに構成を追加する こちらを選択することでGit上で構成ファイルを管理出来ます。 定義済みのコンテナー構成定義から Node.js & TypeSctipt 導入する、言語などを選択してください。 バージョンを指定してください。 お好きな拡張機能を追加してください。 .devcontainer/devcontainer.jsonに以下の様なファイルが出来上がります。 // For format details, see https://aka.ms/devcontainer.json. For config options, see the // README at: https://github.com/devcontainers/templates/tree/main/src/
導入 Cursor公式ではまだ Anthropic 社のClaude-3に対応してなかったのですが、VSCodeのオープンソースの拡張である continueを使うことでこれが実現できます。 早速導入しましょう。 Claude-3のAPI Keyを入手する 上記のページの"Get API Key"からKeyを取得します。遷移後のページの"Create Key"をクリックしてAPI Keyを生成してください。これをクリップボードにコピーしておきます。 あと忘れてはならないのは$5分の無料のクレジットを有効にすることです。スクショを忘れたのでもう撮れないので画像がないのですが、サイドバーの"Plans & Billing"からクレジットを有効にしてください。電話番号が必要です。 これでAPIが利用できるようになりました。 拡張からcontinueをインストール VSCodeの拡張機能の検索バー
Open source, runs in VS Code, integrates with existing TypeScript code, browser and Node.js.
VSCodeで日本語の音声入力が可能に、Copilotがコードに合った変数名を提案など新機能。2024年2月のアップデート
VSCodeで日本語の音声入力が可能に、Copilotがコードに合った変数名を提案など新機能。2024年2月のアップデート コードエディタのVisual Studio Code（以下、VSCode）は2024年2月のアップデートで、音声入力やCopilotによる変数名の提案などの新機能が追加されました。 More developer goodness in the February update of @code Use your voice to write code (in your language!) Code faster with multi-cursor suggestions Renaming gets easier (because it's AI powered) Release notes: https://t.co/zwokiQvbPU Download: http
はじめに vue公式の拡張機能のバージョンアップにより、VSCodeで開発するときに推奨される拡張機能や設定に変更がありました。 非推奨の設定のままの人は、多分以下のような通知が出てると思うので、直しましょう。 今までの推奨設定 Vue - Officialをインストールする TypeScript Vue Plugin (Volar)をインストールする テイクオーバーモードを有効にする 今後の推奨設定 Vue - Officialをインストールする 新しく設定する人がやること Vue - Officialのインストール Vue - Officialをインストールする 今までの推奨設定をしていた人がやること TypeScript Vue Plugin (Volar)のアンインストール TypeScript Vue Plugin (Volar)が非推奨になったので無効に、もしくはアンインストー
![[2024年3月2日] Vue3+TypeScriptの環境構築で推奨される拡張機能と設定が変わったよ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/f28ba34c6e547e0c824adf322d8478550799e91c/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--AjgvUUB7--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%25255B2024%2525E5%2525B9%2525B43%2525E6%25259C%2525882%2525E6%252597%2525A5%25255D%252520Vue3%25252BTypeScript%2525E3%252581%2525AE%2525E7%252592%2525B0%2525E5%2525A2%252583%2525E6%2525A7%25258B%2525E7%2525AF%252589%2525E3%252581%2525A7%2525E6%25258E%2525A8%2525E5%2525A5%2525A8%2525E3%252581%252595%2525E3%252582%25258C%2525E3%252582%25258B%2525E6%25258B%2525A1%2525E5%2525BC%2525B5%2525E6%2525A9%25259F%2525E8%252583%2525BD%2525E3%252581%2525A8%2525E8%2525A8%2525AD%2525E5%2525AE%25259A%2525E3%252581%25258C%2525E5%2525A4%252589%2525E3%252582%25258F%2525E3%252581%2525A3%2525E3%252581%25259F%2525E3%252582%252588%2525E3%252580%252582%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3Asimo%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2YyYTk1ZTA4YmUuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
こんにちは、 ast-grepの作者Herringtonです。 正規表現でコードを検索したことがある方なら、複数行のマッチングや入れ子構造の処理、コメントの無視などに苦労したことがあるかもしれません。 そこで、ast-grep VSCodeという新しい拡張を紹介します。これは、構造的検索と置換（SSR）という技術を利用して、より正確で効率的な検索と置換を実現するツールです。 構造検索は？ テキスト検索と置換の限界 例えば、JavaScriptコードをリファクタリングして、lodash の _.filter 関数をネイティブの Array.prototype.filter メソッド に置き換えたいとします。単純なテキスト検索と置換は次のようになります: これは一部のケースではうまくいくかもしれませんが、いくつかの問題があります。 一行の式しかマッチングできません。コードが複数行にまたがってい
私は普段VSCodeを使っていて、拡張機能としてvscode-nvimを使っていて、そしてこの拡張の設定でnvimはWSL上で実行するようにしている。 この設定にしてほとんど困ることはないのだが、唯一困るのがクリップボードが使えないことである。 理由は簡単でnvimがWSL上で実行されるために、クリップボード操作をしてもWindowsへ反映されないからである。 この問題をGoogle検索するとpowershell.exeを使ってクリップボードをコピーする方法が見つかる。 見つかった方法で解決はするのだが、WSLからexeを実行する関係でものすごく遅い。 これは厳しい…っとなってたが解決する方法を見つけたので備忘として残しておく。 解決策: WSLgを使う 解決方法は至ってシンプルでWSLgを使うことである。 どういうことかというのを簡単に説明すると、WSLgはWaylandというプロトコル
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
VS Code Extensions and WebAssembly
【vscode】TypeScriptで不要なimport文を自動削除＆自動で並べ替え - Qiita
「Visual Studio Code」のMarkdown支援やショートカットキー変更機能が大きく強化／v1.89.0が安定版に
Visual Studio Code April 2024
VSCodeでペットを飼う - Qiita
Postmanを使い始めた時に知っておきたかった地味に便利な機能10選 - Qiita
Wallaby.jsを使ってフロントエンド開発のテストを効率化しよう - Findy Tech Blog
VSCodeでGitのコミットを楽に整理して、レビュワーに「コイツできる」と思わせよう。
「Visual Studio 2022」に「Copilot」が統合、v17.10より提供／拡張機能を1パッケージに。既定でインストールされ、IDEとの連携を強化
関数とGASを使い分けてスプレッドシートでシステムを作る - ミネムラ珈琲ブログ
「Visual Studio Code」2024年3月更新、カスタムエディターラベルなどの新機能を追加／v1.88.0が安定版に
Visual Studio Code March 2024
VS CodeでPythonの仮想環境を構築する(windows) - Qiita
CursorとClaudeを使った最近の私の開発環境｜ニケちゃん
GitHub Copilot Tips and Tricks
カイロスロケット爆発 痛手を負っても「失敗」といわず、目標も変えないスペースワンの事情
なぜコーディングにVSCodeを使うのか。 私がVSCodeを選んだ理由
Devcontainer がデバッグ環境構築のハードルを一気に下げるお話
ローカルRAG + VSCode拡張であるContinueを使ってClaude 3を先取りする
Flyde | Visual Programming. For Developers.
[2024年3月2日] Vue3+TypeScriptの環境構築で推奨される拡張機能と設定が変わったよ。
ast-grep VSCode: 構造検索と置換の強力なツール
WSLからWindowsへのクリップボードコピーを高速化する - ぶていのログでぶログ