Der Open-Source-KI-Code-Editor
Ihr Zuhause für Multi-Agenten-Entwicklung
Web, Insiders Edition oder andere Plattformen
Durch die Nutzung von VS Code stimmen Sie der Lizenz und der Datenschutzerklärung zu.
import { For, createSignal, createMemo } from "solid-js";
import { useNavigate, useParams } from "@tanstack/solid-router";
import { getEmailsForMailbox } from "~/data/emails";
import { MailListItem } from "~/components/MailListItem";
export function MailList() {
const params = useParams({ strict: false }) as {
mailbox?: string;
id?: string;
};
const navigate = useNavigate();
const [query, setQuery] = createSignal("");
const mailbox = () => params.mailbox || "inbox";
const list = createMemo(() => {
const q = query().toLowerCase();
return getEmailsForMailbox(mailbox()).filter(
(e) =>
!q ||
e.subject.toLowerCase().includes(q) ||
e.snippet.toLowerCase().includes(q)
);
});
function open(id: string) {
navigate({
to: "/mail/$mailbox/$id",
params: { mailbox: mailbox(), id },
search: (prev) => prev,
});
}
return (
<For each={list()}>
{(e) => (
<div
role="listitem"
tabindex={0}
onClick={() => open(e.id)}
onKeyDown={(ev) => ev.key === "Enter" && open(e.id)}
class="mail-item"
data-selected={params.id === e.id ? "true" : undefined}
aria-selected={params.id === e.id ? "true" : undefined}
>
<div>
<div class="mail-item-subject truncate">{e.subject}</div>
<div class="mail-item-snippet truncate">{e.snippet}</div>
</div>
<time
class="text-xs muted"
datetime={e.date}
title={new Date(e.date).toLocaleString()}
>
{new Date(e.date).toLocaleDateString(undefined, {
month: "short",
day: "numeric",
})}
</time>
</div>
<MailListItem
email={e}
isSelected={params.id === e.id}
onOpen={open}
/>
)}
</For>
);
}
import type { Email } from "~/types";
interface MailListItemProps {
email: Email;
isSelected: boolean;
onOpen: (id: string) => void;
}
export function MailListItem(props: MailListItemProps) {
return (
<div
role="listitem"
tabindex={0}
onClick={() => props.onOpen(props.email.id)}
onKeyDown={(ev) => ev.key === "Enter" && props.onOpen(props.email.id)}
class="mail-item"
data-selected={props.isSelected ? "true" : undefined}
aria-selected={props.isSelected ? "true" : undefined}
>
<div>
<div class="mail-item-subject truncate">{props.email.subject}</div>
<div class="mail-item-snippet truncate">{props.email.snippet}</div>
</div>
<time
class="text-xs muted"
datetime={props.email.date}
title={new Date(props.email.date).toLocaleString()}
>
{new Date(props.email.date).toLocaleDateString(undefined, {
month: "short",
day: "numeric",
})}
</time>
</div>
);
- Erstellen Sie eine neue
MailListItem Komponente, die die Darstellung einzelner E-Mail-Listenelemente übernimmt - Extrahieren Sie E-Mail-Element-JSX und -Logik aus
MailList in die neueMailListItem Komponente - Aktualisieren Sie
MailList um die neue Komponente zu verwendenMailListItem Komponente - Bauen Sie das Projekt, um zu überprüfen, ob die Änderungen korrekt kompilieren
- Testen Sie die Anwendung, um sicherzustellen, dass die Funktionalität erhalten bleibt
- Erstellung einer wiederverwendbaren Komponente für die Darstellung einzelner E-Mail-Listenelemente
- Akzeptiert
email ,isSelected undonSelect Props - Beibehaltung aller Barrierefreiheitsfunktionen (ARIA-Rollen, Tastaturnavigation)
- Bewahrung von Styling und Interaktionsverhalten
- Vereinfacht durch Entfernung der Inline-Logik zur E-Mail-Element-Darstellung
- Verwendet jetzt die
MailListItem Komponente mit sauberer Props-Übergabe - Reduzierte Komplexität der Komponente und verbesserte Lesbarkeit
- ✅ Build erfolgreich
- ✅ Alle Funktionen funktionieren korrekt (Filtern, Auswahl, Navigation)
- ✅ Tastatur-Barrierefreiheit bewahrt (Navigation mit Eingabetaste)
- ✅ Visueller Auswahlstatus funktioniert ordnungsgemäß
Agenten, die für Sie bauen
Übergeben Sie Aufgaben an KI-Agenten, die autonom planen, Codeänderungen vornehmen, Befehle ausführen und iterieren, bis die Arbeit erledigt ist.
Beauftragen Sie zum Beispiel einen CLI-basierten Agenten mit dem Sichten und Beheben von Fehlern im Hintergrund, interagieren Sie mit einem anderen Agenten, um ein Feature unter Verwendung von Live-Validierung im integrierten Browser zu implementieren, und delegieren Sie ein Homepage-Redesign an einen Cloud-Agenten, der einen Pull Request für Ihr Team zur Überprüfung öffnet.
Erste Schritte mit Agentenpackage http
import (
"io"
"log/slog"
"mime/multipart"
"net/http"
"strings"
)
type BatchItemResult struct {
Name string `json:"name"`
Metadata *struct {
Format string `json:"format"`
Width int `json:"width"`
Height int `json:"height"`
Bytes int `json:"bytes"`
} `json:"metadata,omitempty"`
Error string `json:"error,omitempty"`
}
type BatchResponse struct {
Results []*BatchItemResult `json:"results"`
Count int `json:"count"`
Success int `json:"success"`
Failed int `json:"failed"`
}
// handleProcessBatch processes multiple uploaded images (multipart/form-data) under the field name "files".
// It returns metadata for each image or an error per item without failing the whole batch unless the request is malformed.
func (s *Server) handleProcessBatch(w http.ResponseWriter, r *http.Request) {
// Enforce max body size overall.
r.Body = http.MaxBytesReader(w, r.Body, s.cfg.MaxUploadBytes)
if ct := r.Header.Get("Content-Type"); !strings.HasPrefix(ct, "multipart/form-data") {
s.writeJSON(w, http.StatusBadRequest, map[string]string{"error": "content type must be multipart/form-data"})
return
}
if err := r.ParseMultipartForm(s.cfg.MaxUploadBytes); err != nil {
status := http.StatusBadRequest
if strings.Contains(err.Error(), "request body too large") {
status = http.StatusRequestEntityTooLarge
}
s.writeJSON(w, status, map[string]string{"error": "invalid multipart form: " + err.Error()})
return
}
// Accept files under the key "files". If absent, attempt to fallback to any file parts.
var fileHeaders []*multipart.FileHeader
if r.MultipartForm != nil && len(r.MultipartForm.File["files"]) > 0 {
fileHeaders = r.MultipartForm.File["files"]
} else if r.MultipartForm != nil {
// Fallback: gather all files across keys.
for _, fhs := range r.MultipartForm.File {
fileHeaders = append(fileHeaders, fhs...)
}
}
if len(fileHeaders) == 0 {
s.writeJSON(w, http.StatusBadRequest, map[string]string{"error": "no files provided (expect key 'files')"})
return
}
resp := &BatchResponse{Results: make([]*BatchItemResult, 0, len(fileHeaders))}
for _, fh := range fileHeaders {
item := &BatchItemResult{Name: fh.Filename}
f, err := fh.Open()
if err != nil {
item.Error = "open file: " + err.Error()
resp.Results = append(resp.Results, item)
resp.Failed++
continue
}
data, err := io.ReadAll(f)
_ = f.Close()
if err != nil {
item.Error = "read file: " + err.Error()
resp.Results = append(resp.Results, item)
resp.Failed++
continue
}
meta, err := s.proc.ExtractMetadata(data)
if err != nil {
item.Error = err.Error()
resp.Results = append(resp.Results, item)
resp.Failed++
continue
}
// Copy into anonymous struct to decouple from internal type if it changes.
item.Metadata = &struct {
Format string `json:"format"`
Width int `json:"width"`
Height int `json:"height"`
Bytes int `json:"bytes"`
}{Format: meta.Format, Width: meta.Width, Height: meta.Height, Bytes: meta.Bytes}
resp.Results = append(resp.Results, item)
resp.Success++
}
resp.Count = len(resp.Results)
s.log.LogAttrs(r.Context(), slog.LevelInfo, "batch processed", slog.Int("count", resp.Count), slog.Int("success", resp.Success), slog.Int("failed", resp.Failed))
s.writeJSON(w, http.StatusOK, resp)
}
Erstellen einer Todo-Liste
Ich beginne mit der Erstellung der Todo-Liste und verwalte Aufgaben wie das Lesen des vorhandenen Server- und Prozessorcodes, den Entwurf des Batch-Endpunkt-Vertrags und die Implementierung einer neuen Datei mit einem Handler. Ich möchte den Handler in die Serverrouten einbinden und vielleicht einen minimalen Test für den Batch-Endpunkt hinzufügen, obwohl das optional ist. Ich plane auch, danach Tests auszuführen und alles zu bauen. Lassen Sie uns das ausführen!Verbesserung der Dateiverarbeitung...
Ich könnte server.go modifizieren, aber es wurde nach einer neuen Datei gefragt. Also muss ich eine Route erstellen, nennen wir sie /process/batch. Ich werde eine maximale Body-Größe erzwingen und sicherstellen, dass der Content-Type multipart/form-data ist. Als Nächstes werde ich das Formular parsen und über form.File["files"] iterieren. Für jeden FileHeader werde ich ihn öffnen und die Bytes lesen, dann ExtractMetadata aufrufen, um Ergebnisse zu sammeln. Abschließend werde ich eine strukturierte JSON-Antwort mit Ergebnissen zurückgeben und Sonderfälle für fehlende Dateien und maximale Batch-Limits behandeln. Ich denke, es ist vielleicht nicht unbedingt nötig, aber ich erwäge eine kleine Verbesserung durch die Verwendung von sync.WaitGroup, um jede Datei sequenziell zu verarbeiten, während die Parallelität begrenzt wird. Dies würde den ersten Commit einfacher machen. Ich muss die Codedatei hinzufügen und den internen Alias für die Bildreferenz importieren. Als Nächstes werde ich mir die vorhandenen Tests in tests/image_processor_test.go ansehen, um den Stil zu erkennen und festzustellen, ob ich eine neue Testdatei für den Batch-Handler erstellen sollte. Ich werde das durchlesen und dann die Todo-Status aktualisieren, wobei ich Aufgabe eins und zwei als abgeschlossen markiere.Vorbereitung auf HTTP-Test
Ich muss einen HTTP-Test ausführen, aber ich bemerke, dass das aktuelle Testpaket in 'tests' liegt und nicht innerhalb der Hauptmodule. Um den HTTP-Test durchzuführen, muss ich einige Dinge wie Konfiguration, Prozessor, Logger und Server einrichten sowie eine Multipart-Anfrage senden. Mein nächster Schritt ist es, die Konfiguration in config.go zu prüfen, um zu verstehen, welche Pflichtfelder ich aufnehmen muss. Lassen Sie uns das angehen!Verwaltung von Updates und Patches
Ich muss die manage_todo_list verwenden, um alles organisiert zu halten und sicherzustellen, dass ich keine Aufgabe aus den Augen verliere. Sobald das erledigt ist, kann ich mit dem Anwenden des Patches fortfahren. Dies beinhaltet das Hinzufügen einer neuen Datei und Bearbeitungen an server.go. Ich möchte sicherstellen, dass während dieses Prozesses alles klar und präzise ist, um Fehler zu vermeiden. Lassen Sie uns weitermachen!Implementierung von Updates und Tests
Ich markiere den Entwurfsvertrag als abgeschlossen und muss nun die Updates implementieren. Ich werde mit der Verwaltung der Todo-Liste fortfahren und den Patch anwenden, um eine Datei hinzuzufügen und server.go zu aktualisieren. Es scheint, als müsste ich eine Route für /process/batch in server.go hinzufügen und eine neue Datei internal/http/batch.go implementieren. Nach dem Schreiben des Codes werde ich eine Testdatei hinzufügen, die Tests mit go test ausführen und run_in_terminal-Befehle verwenden. Packen wir es an!-
server.go : Neue Route POST /process/batch registriert. batch.go : Neuer Handler handleProcessBatch, der-
- multipart/form-data akzeptiert.
- Mehrere Dateien unter dem Key 'files' liest (Rückgriff auf beliebige Dateiteile, falls 'files' fehlt).
- Erfolg/Fehler pro Datei zurückgibt, ohne den gesamten Batch fehlschlagen zu lassen.
- Zählwerte aggregiert: Anzahl, Erfolg, fehlgeschlagen.
-
batch_endpoint_test.go : Testet den Happy-Path (1 gültige + 1 ungültige Datei) und den Fehlerfall bei fehlenden Dateien.
- Hinzufügen einer konfigurierbaren maximalen Anzahl von Dateien pro Batch (z. B. über Konfiguration).
- Stream-Verarbeitung mit begrenztem Speicher (verarbeiten + verwerfen) für sehr große Bilder.
- Optionale Parallelität mit einem Worker-Pool und Kontextabbruch.
- Größenvalidierung pro Datei vor der Dekodierung hinzufügen.
- Unterstützung für JSON-basiertes Batching (URLs oder Base64) für Nicht-Multipart-Clients.
Jeder Agent, jedes Modell
Nutzen Sie das Agenten-Framework, das zu Ihrem Workflow passt. Führen Sie Agenten lokal oder in der Cloud aus, mit Copilot oder Drittanbietern wie Claude und OpenAI.
Wählen Sie aus Dutzenden von Modellen verschiedener Anbieter, von schnellen Vervollständigungsmodellen bis hin zu fortschrittlichen Denkmodellen. Oder bringen Sie Ihren eigenen Schlüssel mit, um jedes Modell von jedem Anbieter zu verwenden.
Alle Ihre Sitzungen, eine Ansicht
Bleiben Sie produktiv, während mehrere Agenten parallel an Aufgaben arbeiten. Verfolgen Sie alle Ihre Agentensitzungen in einer einzigen Ansicht, unabhängig davon, wo sie ausgeführt werden.
Filtern und überwachen Sie Sitzungen schnell oder tauchen Sie in eine einzelne Agenteninteraktion ein, ohne das Tool oder Terminal zu wechseln.
Ihre Regeln, Ihre Agenten
Stellen Sie sicher, dass Agenten Ihre Praktiken und Team-Workflows befolgen. Definieren Sie benutzerdefinierte Anweisungen, fügen Sie Agenten-Fähigkeiten hinzu oder erstellen Sie benutzerdefinierte Agenten, die auf Ihr Projekt zugeschnitten sind.
Verbinden Sie sich mit externen Tools und Diensten über MCP-Server oder installieren Sie Agenten-Plugins oder Erweiterungen, um die Fähigkeiten des Agenten zu erweitern.
Ein erstklassiger Code-Editor im Kern
VS Code ist seit über einem Jahrzehnt der Editor der Wahl für Millionen von Entwicklern. KI-gestützte Inline-Vorschläge, intelligente Vervollständigungen und eine reichhaltige Bearbeitungserfahrung machen es genauso leistungsfähig, wenn Sie den Code selbst schreiben.
Wechseln Sie nahtlos zwischen der Arbeit mit Agenten und manuellem Programmieren, alles innerhalb desselben Editors.
Erste Schritte mit VS Codeimport 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()
Code mit Erweiterungen
Erweitern Sie Ihre Agenten mit Tools aus Erweiterungen und Model Context Protocol-Servern. Oder erstellen Sie Ihre eigene Erweiterung, um die einzigartigen Szenarien Ihres Teams zu unterstützen.
Python
Fügt umfassende Sprachunterstützung für Python hinzu
Stripe
Stripe direkt in Ihrem Editor erstellen, testen und nutzen
C/C++
Fügt umfassende Sprachunterstützung für C/C++ hinzu
Sehen Sie sich über 80.000 Erweiterungen im Extension Marketplace an
Programmieren in jeder Sprache
VS Code unterstützt fast jede wichtige Programmiersprache. Einige sind direkt enthalten, wie JavaScript, TypeScript, CSS und HTML, aber Erweiterungen für andere finden Sie im VS Code Marketplace.

JavaScript
TypeScript
Python
C#
C++
HTML
Java
JSON
PHP
Markdown
Powershell
YAMLVollständig anpassbar
Passen Sie Ihre VS Code-Benutzeroberfläche und Ihr Layout an Ihren Programmierstil an.
Farbthemen ermöglichen es Ihnen, die Farben in der Benutzeroberfläche von VS Code an Ihre Vorlieben und Arbeitsumgebung anzupassen.
Settings Sync ermöglicht es Ihnen, Ihre Benutzereinstellungen mit der Funktion "Settings Sync" über Ihre VS Code-Instanzen hinweg zu teilen.
Profile lassen Sie Sätze von Anpassungen erstellen und schnell zwischen ihnen wechseln oder sie mit anderen teilen.
Programmieren überall
Programmieren Sie, wo immer Sie am produktivsten sind, egal ob Sie mit der Cloud verbunden sind, einem Remote-Repository oder im Browser mit VS Code for the Web (vscode.dev).
Integrierte Quellcodeverwaltung bietet Ihnen Git-Unterstützung direkt aus der Box. Viele andere Anbieter von Quellcodeverwaltung sind über Erweiterungen verfügbar.
GitHub Codespaces bietet Cloud-basierte Entwicklungsumgebungen für jede Aktivität – sei es ein langfristiges Projekt oder eine kurzfristige Aufgabe wie das Überprüfen eines Pull Requests.
Mit reichhaltigen Funktionen codieren
Ein Editor ist mehr als nur das. Egal, ob Sie integrierte Funktionen oder umfangreiche Erweiterungen nutzen, es ist für jeden etwas dabei.
Integriertes Terminal
Nutzen Sie Ihre bevorzugte Shell, ob zsh, pwsh oder git bash, direkt im Editor.
Code ausführen
Führen Sie Ihren Code aus und debuggen Sie ihn, ohne den Editor zu verlassen.
Quellcodeverwaltung
Integrierte Unterstützung für Git und viele andere Anbieter.
Build-Aufgaben
Tools ausführen und Ergebnisse analysieren, direkt aus VS Code heraus.
Lokaler Verlauf
Verlieren Sie nie Ihre Änderungen dank automatisch nachverfolgtem lokalem Verlauf.
Themen
Ihr Thema ist eine Erweiterung Ihrer Persönlichkeit. Verleihen Sie Ihrem Editor das gewisse Etwas und setzen Sie Ihre eigene Note.
Barrierefreiheit
Optimierte Erfahrung für Screenreader, kontrastreiche Themen und reine Tastaturnavigation.
Webunterstützung
Egal ob Sie am Telefon, Tablet oder Desktop sind, Sie können von überall auf Ihren Code zugreifen.