オープンソースのAIコードエディター

マルチエージェント開発の拠点

Visual Studio Codeをダウンロード

VS Codeを使用することで、そのライセンスプライバシー ステートメントに同意したことになります。

MailList.tsx
import {
  For,
  Show,
  createMemo,
  createSignal,
  onCleanup,
  onMount,
} from "solid-js";
import { useMail } from "./mail";
import { Item } from "./Item";

const ROW = 56;
const PAGE = 24;

export function MailList() {
  const { items, query, load } =
    useMail();
  const [focus, setFocus] =
    createSignal(0);
  const [top, setTop] =
    createSignal(0);

  const visible = createMemo(() => {
    const q = query().toLowerCase();
    return items()
      .filter((m) =>
        m.subject
          .toLowerCase()
          .includes(q),
      )
      .slice(top(), top() + PAGE);
  });

  const onKey = (e: KeyboardEvent) => {
    if (e.key === "ArrowDown") {
      setFocus((i) =>
        Math.min(i + 1, PAGE - 1),
      );
    } else if (e.key === "ArrowUp") {
      setFocus((i) =>
        Math.max(i - 1, 0),
      );
    } else if (e.key === "Enter") {
      open(visible()[focus()].id);
    }
  };

  onMount(() => {
    load();
    window.addEventListener(
      "keydown",
      onKey,
    );
    onCleanup(() =>
      window.removeEventListener(
        "keydown",
        onKey,
      ),
    );
  });

  return (
    <Show
      when={visible().length}
      fallback={<Empty />}
    >
      <For each={visible()}>
        {(m, i) => (
          <Item
            mail={m}
            active={i() === focus()}
            onOpen={open}
          />
        )}
      </For>
    </Show>
  );
}
MailListコンポーネントのリファクタリング MailList.tsx 内の各行をスタンドアロンの MailListItem コンポーネントに抽出します。選択状態、キーボードナビゲーション、および既存の仮想化動作を維持してください。 読み取りMailList.tsx, useSelection.ts 作成MailListItem.tsx +62 編集MailList.tsx +18 −74
MailListのレイアウトをマッピングしました 現在は行がインラインでレンダリングされており、選択状態は useSelection で管理されています。react-window の外側要素がリストをラップしているため、仮想化を維持するために、その行レンダラーが新しいコンポーネントを指すようにします。
私が実行した計画は以下の通りです
  • messageselectedonSelect の props を持つ MailListItem.tsx を作成します。
  • message.idselected の比較関数を使用して、React.memo でラップします。
  • useSelectionMailList にリフトアップし、ハンドラーを下に渡します。
分割後も矢印キーによるフォーカスが引き続き機能することを確認します。 いい提案です。行のルートに ref をフォワードし、アクティブなインデックスが変更されたときに focus() を呼び出すようにして、スイートを再実行します。 実行npm test -- MailList 184件すべてのテストに合格しました。1万件のメッセージフィクスチャでのレンダリング時間が41msから12msに短縮されました。 キューに登録済み 次に、ツールバーのアクションを MailListToolbar コンポーネントに抽出し、その Storybook ストーリーを追加します。
ビルドする内容を記述してください
Claude Opus 4.7
ローカル Autopilot(プレビュー)
セッション 新規セッション
MailListコンポーネントのリファクタリング 考え中…
テレメトリパイプライン用MCPサーバーの接続 mcp.config.ts を編集中
.prismaファイル用言語サーバーの追加 parser.test.ts 内のテストを実行中
コマンドパレットをFluent APIへリファクタリング +639 -323 · 2時間前
インラインチャットアクション用拡張機能の雛形作成 5時間前
高コントラストモード用のテーマトークン +752 -367 · 昨日
OpenAPI 3.1仕様から型定義されたSDKを生成 +218 -12 · 2日前
macOS arm64での不安定なCI実行の診断 4日前
Live Shareセッション起動の最適化 +52 -1 · 3日前
モノレポワークスペース用devcontainerの追加 6日前
デバッグアダプターをDAP 1.65に移植 1週間前

あなたに代わって開発するエージェント

自律的に計画を立て、コードを変更し、コマンドを実行し、完了するまで反復するAIエージェントにタスクを任せましょう。

たとえば、バックグラウンドでバグのトリアージと修正を行うCLIベースのエージェントを割り当てたり、統合ブラウザでのライブ検証を使用して機能を実装するために別のエージェントとやり取りしたり、ホームページの再設計をクラウドエージェントに委任してチームがレビューするためのプルリクエストを開かせたりすることができます。

エージェントを使い始める
batch.go
package http

import (
    "context"
    "encoding/json"
    "errors"
    "io"
    "log/slog"
    "mime/multipart"
    "net/http"
    "time"

    "golang.org/x/sync/errgroup"
    "golang.org/x/sync/semaphore"
    "go.opentelemetry.io/otel"
)

type Result[T any] struct {
    Name  string `json:"name"`
    Value T      `json:"value,omitempty"`
    Error string `json:"error,omitempty"`
}

type Meta struct {
    Format string `json:"format"`
    Width  int    `json:"width"`
    Height int    `json:"height"`
    Bytes  int64  `json:"bytes"`
}

const (
    perRequestTimeout = 30 * time.Second
    maxParallel       = 8
)

func (s *Server) handleBatch(
    w http.ResponseWriter,
    r *http.Request,
) {
    ctx, span := otel.Tracer("http").
        Start(r.Context(), "batch")
    defer span.End()

    ctx, cancel := context.WithTimeout(
        ctx, perRequestTimeout,
    )
    defer cancel()

    r.Body = http.MaxBytesReader(
        w, r.Body, s.cfg.MaxBytes,
    )
    if err := r.ParseMultipartForm(
        s.cfg.MaxBytes,
    ); err != nil {
        s.fail(w, http.StatusBadRequest, err)
        return
    }
    files := pickFiles(r.MultipartForm)
    if len(files) == 0 {
        s.fail(w, http.StatusBadRequest,
            errors.New("no files"))
        return
    }

    out := make(
        []Result[Meta], len(files),
    )
    sem := semaphore.NewWeighted(maxParallel)
    g, gctx := errgroup.WithContext(ctx)

    for i, fh := range files {
        i, fh := i, fh
        if err := sem.Acquire(gctx, 1); err != nil {
            break
        }
        g.Go(func() error {
            defer sem.Release(1)
            out[i] = process(gctx, s, fh)
            return nil
        })
    }
    _ = g.Wait()

    s.log.LogAttrs(ctx,
        slog.LevelInfo, "batch.done",
        slog.Int("count", len(out)),
        slog.Duration("budget",
            perRequestTimeout),
    )

    w.Header().Set(
        "Content-Type", "application/json",
    )
    _ = json.NewEncoder(w).Encode(out)
}

func process(
    ctx context.Context,
    s *Server,
    fh *multipart.FileHeader,
) Result[Meta] {
    res := Result[Meta]{Name: fh.Filename}
    f, err := fh.Open()
    if err != nil {
        res.Error = err.Error()
        return res
    }
    defer f.Close()

    data, err := io.ReadAll(
        io.LimitReader(f, s.cfg.MaxBytes),
    )
    if err != nil {
        res.Error = err.Error()
        return res
    }
    m, err := s.proc.ExtractCtx(ctx, data)
    if err != nil {
        res.Error = err.Error()
        return res
    }
    res.Value = Meta{
        Format: m.Format,
        Width:  m.Width,
        Height: m.Height,
        Bytes:  int64(len(data)),
    }
    return res
}
画像の一括(バッチ)処理エンドポイント
画像サービスに POST /process/batch エンドポイントを追加します。リクエストごとのバジェット、構造化ロギング、OpenTelemetryスパンを使用して、最大8個のファイルを並行して処理します。アイテムごとの結果を返します。 読み取りserver.go, processor.go, config.go 作成batch.go +128 編集server.go +4 −0 作成batch_test.go +96
サービスのレイアウトをマッピングしました 既存のハンドラーは internal/http にあり、プロセッサは同期処理の Extract を公開しています。ワーカープールがキャンセルを尊重できるように ExtractCtx バリアントを追加し、errgroup と重み付きセマフォを使用してファンアウトさせます。
以下全体で http.HandleFunc を grep:internal/ 私が実行した計画は以下の通りです
  • ジェネリックな Result[Meta] 型を使用して、batch.gohandleBatch を追加します。
  • semaphore.NewWeighted(8) で並行数を制限し、ファンアウトを errgroup でラップします。
  • リクエストを OTel スパンと 30秒のコンテキスト期限でラップします。
  • server.go でルートを紐付けし、テーブルテストを追加します。
go test ./internal/http -run Batch -race を実行 23件すべてのテストが -race エラーなしで合格しました。64枚の画像バッチ(平均1.2MB JPEG)のスループット:エンドツーエンドで 184msから31ms に短縮 素晴らしい。結果をバッファリングする代わりに NDJSON としてストリーム配信し、k6 スクリプトを追加します。 キューに登録済み その後、p99_ms Prometheus ヒストグラムを公開し、既存の Grafana ダッシュボードに紐付けます。
次に構築するものを記述してください
GPT 5.5
ローカル Autopilot(プレビュー)

あらゆるエージェント、あらゆるモデル

あなたのワークフローに合ったエージェントハーネスを使用しましょう。Copilotや、Claude、OpenAIといったサードパーティプロバイダーを使用して、ローカルまたはクラウドでエージェントを実行できます。

高速な補完モデルから高度な推論モデルまで、プロバイダーをまたぐ数十のモデルから選択できます。あるいは、独自のキーを持ち込んで、任意のプロバイダーの任意のモデルを使用することも可能です。

すべてのセッションを1つのビューに

複数のエージェントが並行してタスクに取り組んでいる間も、生産性を維持できます。実行場所に関係なく、すべてのエージェントセッションを単一のビューから追跡します。

別のツールやターミナルに切り替えることなく、セッションのフィルタリングや監視、または個々のエージェントとのインタラクションへのドリルダウンを迅速に行うことができます。

あなたのルール、あなたのエージェント

エージェントがあなたの開発プラクティスやチームのワークフローに従うようにします。カスタム指示の定義、エージェントスキルの追加、あるいはプロジェクトに合わせたカスタムエージェントの構築が可能です。

MCPサーバーを使用して外部のツールやサービスに接続したり、エージェントのプラグインや拡張機能をインストールして、エージェントの機能を拡張したりできます。

AIエージェントによる構築を無料で始める

試用期間なし。クレジットカード不要。必要なのはGitHubアカウントだけです。

無料でお試し

コアとなるのは、世界クラスのコードエディター

VS Codeは、10年以上にわたり何百万人もの開発者に選ばれ続けているエディターです。AIを搭載したインライン提案、インテリジェントな補完、そして豊かな編集体験により、ご自身でコードを書く際にも同様に強力な威力を発揮します。

エージェントとの作業と、手作業でのコーディングを、すべて同じエディター内でシームレスに切り替えることができます。

VS Codeを始める
main.py
import numpy as np
import pandas as pd

iris_data = pd.read_csv("iris_dataset.csv")

def describe(species: str) -> pd.Series:
7
subset = data[data["species"] == species]           subset = iris_data[iris_data["species"] == species] if subset.empty: raise ValueError(f"{species} missing from sample") return subset[["petal", "sepal"]].agg(["mean", "std"]).loc["mean"] def summary():
13
for species in np.sort(data["species"].unique()):      for species in np.sort(iris_data["species"].unique()): try: stats = describe(species) except ValueError: print(f"{species}: no records") continue print(f"{species}: petal={stats['petal']:.2f} sepal={stats['sepal']:.2f}") if __name__ == "__main__": summary()

あらゆる言語でコードを書く

VS Codeは、ほぼすべての主要なプログラミング言語をサポートしています。JavaScript、TypeScript、CSS、HTMLなどは標準で搭載されていますが、その他の言語の拡張機能もVS Codeマーケットプレイスで見つけることができます。

JavaScriptのアイコンJavaScript
TypeScriptのアイコンTypeScript
PythonのアイコンPython
C#のアイコンC#
C++のアイコンC++
HTMLのアイコンHTML
JavaのアイコンJava
JSONのアイコンJSON
PHPのアイコンPHP
MarkdownのアイコンMarkdown
PowershellのアイコンPowershell
YAMLのアイコンYAML

完全にカスタマイズ可能

VS CodeのUIとレイアウトをカスタマイズして、自分のコーディングスタイルに合わせることができます。

配色テーマを使用すると、VS Codeのユーザーインターフェースの色を好みに合わせて変更し、作業環境に適応させることができます。

設定の同期(Settings Sync)機能を使用すると、お使い of VS Codeインスタンス間でユーザー設定を共有できます。

プロファイルを使用すると、カスタマイズのセットを作成して素早く切り替えたり、他の人と共有したりできます。

Selecting the GitHub Dark theme with a quick pick Selecting the GitHub Dark theme with a quick pick

どこでもコードを書く

クラウドやリモートリポジトリに接続している場合でも、Web版VS Code(vscode.dev)を使ってブラウザで作業している場合でも、最も生産性が高まる場所でコードを書くことができます。

組み込みのソース管理により、すぐにGitサポートを利用できます。他の多くのソース管理プロバイダーも拡張機能を通じて利用可能です。

GitHub Codespacesは、長期的なプロジェクトから、プルリクエストのレビューなどの短期的なタスクまで、あらゆるアクティビティに対応するクラウド駆動の開発環境を提供します。

vscode.dev in an Edge browser tab vscode.dev in an Edge browser tab

リッチな機能でコーディング

エディターにはまだまだ多くの魅力があります。組み込みの機能を使う場合も、豊富な拡張機能を使う場合も、すべての人に最適な何かが見つかります。

© . This site is unofficial and not affiliated with Microsoft.