200行のTypeScriptでmin-clineを実装する
はじめに VSCode拡張のClineがシンプルなアーキテクチャで実現されていることを説明するために、VSCode拡張のAPIだけを使った「ワークスペース内のエラーが発生している箇所をLLMで自動修正する」タスクのみを実行する最小のClineを作りました。筆者はこれら知見を元に自作のコーディングエージェントのPoCをしています。 この記事のソースコード全文は以下のリンクにあります。 同じ拡張を最初から作る場合はまずプロジェクトを新規に始めてください。 min-cline概要 このVSCode拡張はMainコマンド「Run: mini-cline」が１つ定義されています。 min-clineの基本的な流れ Cmd+Shift+Pで"Run mini-cline"を実行する エディタのワークスペースで検出されているPROBLEMSを取得しプレーンテキストに整形 これをソースコードと共にプロンプ
GitHub CopilotでTypeScriptの コード生成するワザップ
バイブコーディング超えてバイブデプロイ〜CloudflareMCPで実現する、未来のアプリケーションデリバリー〜
ORMなんていらない？！生SQLクエリ開発を超絶楽にするVSCode拡張を作った [TS+Rust+WASM]
TL;DR これができる機能です。 TypeScript with Prisma ⇩ Rust with SQLx ⇩ SQL ファイルだけでなく、他のファイルの生 SQL クエリ(Raw SQL Query)に対しても SQL の LSP が効きます。 現在は TypeScript 上 の Prisma と Rust の SQLx をデフォルトでサポートしています。Prisma のみ、SQL のシンタックスハイライトが効きます。 なお、タイトル詐欺です。 sqlsurge の設定 名前は sqlsurge[1] です。sqlsurge では SQL の Language Server に Golang 製 の sqls を使っているので、 Golang sqls が必須となります。sqls をインストールしている人は限られていると思うのでインストールガイドを用意しました。 TypeScr
![ORMなんていらない？！生SQLクエリ開発を超絶楽にするVSCode拡張を作った [TS+Rust+WASM]](https://cdn-ak-scissors.b.st-hatena.com/image/square/f5fdd4697c14676d24ce64e1fe001d5d40bc1d2b/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--bqOiL8f5--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3AORM%2525E3%252581%2525AA%2525E3%252582%252593%2525E3%252581%2525A6%2525E3%252581%252584%2525E3%252582%252589%2525E3%252581%2525AA%2525E3%252581%252584%2525EF%2525BC%25259F%2525EF%2525BC%252581%2525E7%252594%25259FSQL%2525E3%252582%2525AF%2525E3%252582%2525A8%2525E3%252583%2525AA%2525E9%252596%25258B%2525E7%252599%2525BA%2525E3%252582%252592%2525E8%2525B6%252585%2525E7%2525B5%2525B6%2525E6%2525A5%2525BD%2525E3%252581%2525AB%2525E3%252581%252599%2525E3%252582%25258BVSCode%2525E6%25258B%2525A1%2525E5%2525BC%2525B5%2525E3%252582%252592%2525E4%2525BD%25259C%2525E3%252581%2525A3%2525E3%252581%25259F%252520%25255BTS%25252BRust%25252BWASM%25255D%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3ASENKEN%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2Q3ZTQyODM5Y2UuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
VSCodeでホバー時のTypeScriptの型ヒントをすべて表示する
はじめに こんにちは、からころです。 今回は、VSCode でホバー時の TypeScript の型ヒントをすべて表示する方法について書いていこうと思います。 ※ 投稿日の 2024/10/17 から 2024/10/28 ごろに仕様が変わり、defaultMaximumTruncationLengthの書き換えだけでは、動作しなくなりましたので修正版を公開しています。 ※ 2025/06/29時点で、仕様がまた変わっていたので、動作しなくなりましたので修正版を公開しています。 デフォルトの設定では型の情報量が増えると型が省略される VSCode では、TypeScript を利用して開発する際に、ホバーすると以下のように型ヒントを表示することができます。 しかし、デフォルトの設定のままでは、下記のようにプロパティ数が多くなると型ヒントが省略されてしまいます。 上記の解決方法を以下で説明し
Behind VS Code Extensions for JavaScript / TypeScript Linting and Formatting
# Behind VS Code Extensions for JavaScript / TypeScript Linting and Formatting This slides are used at VS Code Conference Japan 2024 https://vscodejp…
個人的Rails開発環境構築2024
新規でRailsプロジェクトを始める時の個人的な環境構築についてまとめる。前提とする条件等は下記。 規模: ~中規模 開発者数: 個人 利用シーン: PoC作成・スタートアップ立ち上げ・並の業務アプリ開発等 基本戦略 利用シーン的に「思い立ったらすぐアプリの開発ができる」という感じの運用がしたい。極力セットアップで悩みたくないから必要なミドルウェアなどは全部Dockerでインストールできるようにして立ち上げれば終わり、の環境を作る。その環境の中で色々とコマンドを叩いたり、rails newやrails gなどでRailsアプリを作成していく。 この辺のRailsの初期セットアップの手間を出来るだけ省きたいのでtemplateとなるリポジトリを作成し、そこからcloneしてくるだけでOKにする。 フロントエンドはReactなどを使わずをRails標準のerbとHotwireを軸に開発する。開
GASの開発環境をローカルで作成する方法（2023年7月版） | DevelopersIO
ことのはじまり 私は最近Google Apps Script(GAS)の学習を始めました。 GASの学習を始めると、まずはAppsScript公式のIDEでスクリプトを書いていくことになると思います。 しかし、普段VSCodeを使い慣れている身からすると、VSCodeの便利機能が使いたくて仕方なくなります。 それじゃあ、使い慣れたVSCodeを使おうじゃないか！！ AppsScript公式のIDEだとGitに差分を残していくこともできないぞ！！（できます） というわけで、GASをVSCodeを使って開発する為の環境構築の手順を書いていきたいと思います。 前提条件 VSCodeがインストールされている Node.jsがインストールされている (npm が使える) VSCode, Nodeのインストールに関して、この記事では説明しません。 有名なので、検索すれば多くの記事がたくさんわんさか出て
いろいろな .config.js で型の補完を効かせる方法まとめ
いろいろな JavaScript 系ライブラリの設定ファイルで型の補完が効くようにするための JSDoc アノテーションまとめです。VSCode で確認しています。 リンクのついていないものは自分で型定義を探したものなので間違っている場合はコメントいただけると助かります。 他のライブラリの情報もコメント大歓迎です！
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 を持っているならオーバレイを表示 オーバレイ中の要素名をクリックした
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
Quokka - JavaScript and TypeScript playground in your editor
Quokka.js runs JavaScript and TypeScript with instant feedback, displaying runtime values in your editor as you type. Quokka makes exploring, learning, and testing JavaScript / TypeScript blazingly fast. By default no config is required, simply open a new Quokka file and start experimenting. Focus on writing code instead of writing bespoke config files just to try a simple idea or learn a new lang
Paste JSON as Code - Visual Studio Marketplace
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter. Supports C (cJSON), C#, C++, Crystal, Dart, Elm, Flow, Go, Haskell, JSON Schema, Java, JavaScript, JavaScript PropTypes, Kotlin, Objective-C, PHP, Pike, Python, Ruby, Rust, Scala3, Smithy, Swift, TypeScript, TypeScript Effect Schema and TypeScript Zod Interactively generate types and (de-)serialization code from JSON
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - yoavbls/pretty-ts-errors: 🔵 Make TypeScript errors prettier and human-readable in VSCode 🎀
素のJavaScriptプロジェクトにtsconfig.jsonを置いといてVSCodeの便利さを享受する - Qiita
GitHub - styfle/react-server-example-tsx: ⚛️ Boilerplate for isomorphic web app with React server-side rendering in TypeScript