Visual Studio Code - Code Editing. Redefined

Có thể bạn quan tâm

Visual Studio Code

Docs
Updates
Blog
API
Extensions
MCP
FAQ
Search

Search Docs
Download

Version 1.107 is now available! Read about the new features and fixes from November.

Dismiss this update The open source AI code editor Download for macOS Download for Windows Download for Linux (.deb) Download for Linux (.rpm) Download Visual Studio Code

Web, Insiders edition, or other platforms

By using VS Code, you agree to its license and privacy statement.

Interactive hero showing the Visual Studio Code interface with Agent Sessions, example tabs, and Copilot chat; use navigation to explore the editor content. Agent Sessions Local Chat Agent Refactoring MailList component structure GitHub Copilot Cloud Agent Extract MailListItem into standalone component 10 min #1 +42 -24 GitHub Copilot CLI Agent Start CLI Agent Session MailList.tsx MailListItem.tsx Extract MailListItem into standalone component 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> ); Please update the MailList component to abstract individual mail list items into their own component GitHub Copilot Cloud Agent Extract MailListItem into standalone component - Copilot Refactors MailList by extracting individual mail list item rendering into a dedicated MailListItem component. Changes **New `MailListItem` component**: Encapsulates mail item rendering with typed props (`email`, `isSelected`, `onOpen`) **Simplified `MailList`**: Reduced from inline JSX (30 lines) to clean component composition (6 lines) Start 'github-mcp-server' MCP server Start 'playwright' MCP server $ find /home/runner/work/solid-email/solid-email -type f -name "*.tsx" -o -name "*.ts" -o -name "*.jsx" -o -name "*.js" | grep -E "(component|src)" | head -30 Read repository Read MailList.tsx Read package.json Read types.ts Read sampleEmails.ts $ find /home/runner/work/solid-email/solid-email -type f $ -name "*.test.ts" -o -name "*.test.tsx" -o -name "*.spec.ts" -o -name "*.spec.tsx" $ Read README.md $ cd /home/runner/work/solid-email/solid-email && cat tsconfig.json $ cd /home/runner/work/solid-email/solid-email && pnpm build Read logs from Bash session $ cd /home/runner/work/solid-email/solid-email && pnpm build $ cd /home/runner/work/solid-email/solid-email && npm install && npm run build $ cd /home/runner/work/solid-email/solid-email && grep -r "MailList" src/ --include="*.tsx" --include="*.ts" Read components Plan: Abstract Mail List Items into Separate Component

Create new MailListItem component that handles individual mail list item rendering
Extract mail item JSX and logic from MailList into the new MailListItem component
Update MailList to use the new MailListItem component
Build the project to verify changes compile correctly
Test the application to ensure functionality remains intact

Create Edit Read MailList.tsx $ cd /home/runner/work/solid-email/solid-email && npm run build $ cd /home/runner/work/solid-email/solid-email && npm run dev Read logs from Bash session playwright-browser_navigate playwright-browser_take_screenshot playwright-browser_click playwright-browser_take_screenshot playwright-browser_navigate playwright-browser_type playwright-browser_snapshot playwright-browser_click playwright-browser_press_key playwright-browser_close Stop Bash session $ cd /home/runner/work/solid-email/solid-email && git --no-pager status $ cd /home/runner/work/solid-email/solid-email && git --no-pager diff src/ $ cd /home/runner/work/solid-email/solid-email && git --no-pager diff --no-index /dev/null src/components/MailListItem.tsx || true Summary of Changes New Component: MailListItem.tsx

Created a reusable component for rendering individual mail list items
Accepts email, isSelected, and onSelect props
Maintains all accessibility features (ARIA roles, keyboard navigation)
Preserves styling and interaction behavior

Updated: MailList.tsx

Simplified by removing inline mail item rendering logic
Now uses the MailListItem component with clean prop passing
Reduced component complexity and improved readability

Verification

✅ Build successful
✅ All functionality working correctly (filtering, selection, navigation)
✅ Keyboard accessibility preserved (Enter key navigation)
✅ Visual selection state working properly

code_review codeql_checker $ cd /home/runner/work/solid-email/solid-email && npm run build Describe your task, type `#` for adding context Chat Please update the MailList component to abstract mail list items into their own standalone component GitHub Copilot Cloud Agent Delegate to cloud agent The agent will work asynchronously to create a pull request with your requested changes.

kenzi.lawson selected "Delegate" GitHub Copilot Cloud Agent [WIP] Refactor MailList to abstract mail list items - Copilot Cloud agent has begun work on Please update the Ma... and will update this pull request as work progresses. Please update the MailList component to abstract individual mail list items into their own component Created from VS Code via the GitHub Pull Request extension. ✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo. GitHub Copilot cloud agent has begun working on your request. Follow its progress in the associated chat and pull request. MailList.tsx Describe what to build next Agent GPT-5.2 (Preview)

Any model for any team

Choose from multiple out of the box models, or bring your own key to access models from your preferred model and hosting provider.

Agent GPT-5.2 (Preview) Auto Variable GPT-5 mini 0x Claude Opus 4.5 (Preview) 1x Claude Sonnet 4.5 1x Gemini 3 Pro (Preview) 1x GPT-5.1-Codex (Preview) 1x GPT-5.1-Codex-Max (Preview) 1x GPT-5.2 (Preview) 1x Manage Models...

An expert on your codebase

Your codebase is indexed locally and remotely to understand what's relevant, enabling fast, context-aware interactions.

main.rs Where is the database connection string configured in the codebase? Agent Claude Sonnet 4.5

AI that works the way your team does

Personalize interactions using custom agents, custom instructions, and reusable prompt files tailored to your workflows and tools.

Interactive VS Code editor mockup with prompt files open in tabs; use keyboard navigation to explore tab bar and editor content. Compact.chatmode.md AGENTS.md docs.instructions.md --- description: 'Generate compact responses, focusing on brevity and clarity.' tools: ['search', 'fetch', 'githubRepo', 'usages', 'vscodeAPI', 'problems', 'changes', 'testFailure', 'todos'] --- You are a chat mode that provides extremely concise and clear responses. Your replies should be brief, to the point, and free of unnecessary details. Focus on delivering the essential information in a straightforward manner. When responding, you must adhere to the following guidelines: - Use short sentences and simple language. - Prioritize clarity over completeness. - Do not provide explanations or justifications unless explicitly asked. - Do not provide any updates as you are working on the task –– only respond when the task is complete.

Use AI features in VS Code for free

No trial. No credit card required. Just your GitHub account.

Try free

Agent mode

Tackle complex, multi-step tasks. Agent mode reads your codebase, suggests edits across files, runs terminal commands, and responds to compile or test failures — all in a loop until the job is done. Further refine agent mode to fit your team's workflows with VS Code extensions and Model Context Protocol (MCP) servers.

Build with agent mode Interactive agent mode walkthrough with VS Code tabs, sidebars, and chat interactions; use standard keyboard navigation to explore each pane. batch.go processor.go image_processor_test.go health.go main.go package 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) } Copilot Claude Code Claude Code Codex Codex Cline Cline Gemini Gemini Chat I'm building an image processing service. Can you please create a new endpoint that implements support for batch image processing? Creating a todo list I'm starting with the todo list creation, managing tasks like reading the existing server and processor code, designing the batch endpoint contract, and implementing a new file with a handler. I want to wire the handler into server routes and maybe add a minimal test for the batch endpoint, though that's optional. I'll also plan to run tests and build everything afterward. Let's get this executed! Creating a structured todo list for implementing the batch image processing endpoint. Created 7 todos Reading core files to understand current server and image processing implementation before adding batch endpoint. Read server.go Read processor.go Read logging.go Read health.go Improving file processing... I could modify server.go, but they've asked for a new file. So, I need to create a route, let's call it /process/batch. I'll enforce a max body size and ensure the content type is multipart/form-data. Next, I'm going to parse the form and iterate over form.File["files"]. For each FileHeader, I'll open it and read the bytes, then call ExtractMetadata to collect results. Finally, I'll return a structured JSON response with results and handle edge cases for no files and max batch limits. I think it might not be absolutely necessary, but I'm considering a small improvement by using sync.WaitGroup to process each file sequentially while limiting concurrency. This would make the initial commit simpler. I need to add the code file and import the internal/image referencing alias. Next, I'll check out the existing tests in tests/image_processor_test.go to see the style and determine if I should create a new test file for the batch handler. I'll read through that and then update the todo statuses, marking tasks one and two as completed. Reading existing test to mirror style before adding batch endpoint and then will proceed with design and implementation. Read image_processor_test.go Preparing for HTTP test I need to run an HTTP test, but I notice that the current test package is in 'tests' and not within the main modules. To conduct the HTTP test, I'll have to set up a few things like the config, processor, logger, and server, plus send a multipart request. My next step is to check the config in config.go to understand what required fields I need to include. Let's dive into that! Reading config to construct server in HTTP test. Read config.go Managing updates and patches I need to use the manage_todo_list to keep everything organized, ensuring I don't lose track of any tasks. Once that's done, I can proceed with applying the patch. It will involve adding a new file and making edits to server.go. I want to make sure everything is clear and accurate during this process to avoid any mistakes along the way. Let's keep moving forward! Starting (3/7) Design batch contract Implementing updates and tests I'm marking the design contract as complete, and then I need to implement the updates. I'll proceed with managing the todo list and apply the patch to add a file and update server.go. It seems I might need to add a route for /process/batch in server.go and implement a new file internal/http/batch.go. After writing the code, I'll add a test file, run the tests with go test, and use run_in_terminal commands. Let's get to it! Completed (3/7) Design batch contract Applying patch to add batch handler and route plus test. server.go +1 -0 batch.go +106 -0 batch_endpoint_test.go +123 -0 Implemented a new batch image processing endpoint: Files changed / added

server.go: Registered new route POST /process/batch.
batch.go: New handler handleProcessBatch that:
- Accepts multipart/form-data.
- Reads multiple files under the files key (falls back to any file parts if files missing).
- Returns per-file success/error without failing the whole batch.
- Aggregates counts: count, success, failed.
batch_endpoint_test.go: Tests happy path (1 valid + 1 invalid file) and missing files error case.

Suggested next steps (optional)

Add a configurable max files per batch (e.g., via config).
Stream processing with limited memory (process + discard) for very large images.
Optional parallelism with a worker pool and context cancellation.
Add size validation per file before decoding.
Support JSON-based batch (URLs or base64) for non-multipart clients.

Let me know if you'd like any of those enhancements or prefer a different request/response format. batch.go Describe what to build next Agent Gemini 3 Pro (Preview)

Next edit suggestions

VS Code predicts your next move as you code. Use the Tab key to accept AI-powered suggestions right in your editor. It intelligently recommends what to change — and where — based on the edits you're already making.

Code with AI-powered suggestions 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()

Code with extensions

Customize VS Code with AI-powered functionality from extensions and Model Context Protocol servers to use in Chat. Or, build your own extension to power your team's unique scenarios.

Python

Adds rich language support for Python

Stripe

Build, test, and use Stripe inside your editor

C/C++

Adds rich language support for C/C++

Jupyter

Language support for Jupyter Notebooks

GitLens

Supercharge your Git experience

C# Dev Kit

Powerful tools for your C# environment

MongoDB

Extension for the @MongoDB agent

GitHub Copilot for Azure

Streamline the process of developing for Azure

Remote Development

Open folders in a container on a remote machine

View 80k+ extensions in the Extension Marketplace

Code in any language

VS Code supports almost every major programming language. Several ship in the box, like JavaScript, TypeScript, CSS, and HTML, but extensions for others can be found in the VS Code Marketplace.

JavaScript TypeScript icon

TypeScript Python icon

Python

C++

HTML

Java

JSON

PHP

Markdown

Powershell YAML icon

YAML

Fully customizable

Customize your VS Code UI and layout so that it fits your coding style.

Color themes let you modify the colors in VS Code's user interface to suit your preferences and work environment.

Settings Sync enables you to share your user settings across your VS Code instances with the Settings Sync feature.

Profiles let you create sets of customizations and quickly switch between them or share them with others.

Selecting the GitHub Dark theme with a quick pick

Code anywhere

Code wherever you're most productive, whether you're connected to the cloud, a remote repository, or in the browser with VS Code for the Web (vscode.dev).

Built-in Source Control empowers you with Git support out-of-the-box. Many other source control providers are available through extensions.

GitHub Codespaces provides cloud-powered development environments for any activity - whether it's a long-term project, or a short-term task like reviewing a pull request.