开源 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 外层元素包裹了列表,因此我将让其行渲染器指向新组件以保留虚拟化。
我遵循的计划如下
  • 创建包含 messageselectedonSelectMailListItem.tsx
  • 将其包裹在 React.memo 中,并使用 message.id + selected 进行对比。
  • useSelection 提升到 MailList 中并向下传递处理程序。
确保拆分后箭头键聚焦依然有效。 很好的提议 — 我会将 ref 转发给行的根元素,并在活跃索引更改时调用 focus(),然后重新运行套件。 已运行npm test -- MailList 全部 184 个测试通过。在 1 万条消息的固定数据上,渲染时间从 41ms 降至 12ms 已排队 现在将工具栏操作提取到 MailListToolbar 组件,并为其添加一个 Storybook 故事。
描述要构建的内容
Claude Opus 4.7
本地 自动驾驶 (预览版)
会话 新建会话
重构 MailList 组件 思考中...
为遥测管道连接 MCP 服务器 编辑 mcp.config.ts
为 .prisma 文件添加语言服务器 正在 parser.test.ts 中运行测试
将命令面板重构为流畅 API +639 -323 · 2 小时前
为内联聊天操作搭建扩展框架 5 小时前
高对比度模式的主题标记 +752 -367 · 昨天
从 OpenAPI 3.1 规范生成类型化 SDK +218 -12 · 2 天前
诊断 macOS arm64 上不稳定的 CI 运行 4 天前
优化 Live Share 会话引导 +52 -1 · 3 天前
为 monorepo 工作区添加 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 端点。支持并行处理最多 8 个文件,包含每请求预算、结构化日志和 OpenTelemetry 追踪。返回每项的结果。 读取server.go, processor.go, config.go 已创建batch.go +128 已编辑server.go +4 −0 已创建batch_test.go +96
映射服务布局 现有的处理程序位于 internal/http 中,处理器暴露了一个同步的 Extract。我将添加一个 ExtractCtx 变体,以便工作池可以处理取消操作,然后使用 errgroup + 加权信号量进行扇出。
internal/ 中 grep http.HandleFuncinternal/ 我遵循的计划如下
  • 使用通用 Result[Meta] 类型在 batch.go 中添加 handleBatch
  • 使用 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
本地 自动驾驶 (预览版)

任何智能体,任何模型

使用最适合你工作流程的智能体平台。在本地或云端运行智能体,可以使用 Copilot,也可以使用 Claude 和 OpenAI 等第三方提供商。

从不同提供商的数十种模型中进行选择,从快速补全模型到高级推理模型。或者携带你自己的密钥使用任何提供商的任何模型。

所有会话,一个视图

在多个智能体并行处理任务时保持高效。从单一视图跟踪所有智能体会话,无论它们运行在何处。

快速过滤和监控会话,或深入了解单个智能体交互,无需切换到其他工具或终端。

你的规则,你的智能体

确保智能体遵循你的实践和团队工作流程。定义自定义指令、添加智能体技能,或构建为你项目量身定制的自定义智能体。

使用 MCP 服务器连接外部工具和服务,或安装智能体插件或扩展以扩展智能体的能力。

免费开始使用 AI 智能体构建

无需试用。无需信用卡。只需你的 GitHub 账户。

免费试用

核心是世界级的代码编辑器

十多年来,VS Code 一直是数百万开发者的首选编辑器。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 用户界面的颜色,以适应你的偏好和工作环境。

设置同步让你能够通过“设置同步”功能在多个 VS Code 实例之间共享你的用户设置。

配置文件允许你创建多套自定义设置,并在它们之间快速切换或与他人共享。

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

随时随地编码

无论你是连接到云端、远程仓库,还是通过 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.