이 출시되었습니다! 11월의 새로운 기능 및 수정 사항을 읽어보세요.

오픈 소스 AI 코드 편집기

Visual Studio Code 다운로드

VS Code를 사용하면 라이선스 및 개인정보처리방침에 동의하게 됩니다. 라이선스개인정보처리방침.

Visual Studio Code 인터페이스를 에이전트 세션, 샘플 탭 및 Copilot 채팅과 함께 보여주는 대화형 히어로. 탐색 기능을 사용하여 편집기 콘텐츠를 탐색하세요.
에이전트 세션
로컬 채팅 에이전트 MailList 컴포넌트 구조 리팩토링 GitHub Copilot 클라우드 에이전트 MailListItem을 독립형 컴포넌트로 추출 10분 #1
+42 -24
GitHub Copilot CLI 에이전트 CLI 에이전트 세션 시작
MailList.tsx MailListItem.tsx MailListItem을 독립형 컴포넌트로 추출
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>
  );
}
채팅
MailList 컴포넌트를 메일 목록 항목을 자체 독립형 컴포넌트로 추상화하도록 업데이트해 주세요. GitHub Copilot 클라우드 에이전트 클라우드 에이전트에게 위임 에이전트가 비동기적으로 작업하여 요청한 변경 사항으로 풀 리퀘스트를 생성합니다. kenzi.lawson avatar kenzi.lawson"위임" 선택됨 GitHub Copilot 클라우드 에이전트 [WIP] MailList 리팩토링하여 메일 항목 추출 - Copilot 클라우드 에이전트가 "Please update the Ma..."에 대한 작업을 시작했으며 작업이 진행됨에 따라 이 풀 리퀘스트를 업데이트합니다. MailList 컴포넌트를 개별 메일 목록 항목을 자체 컴포넌트로 추상화하도록 업데이트해 주세요. GitHub Pull Request 확장을 통해 VS Code에서 생성되었습니다. ✨ Copilot 코딩 에이전트가 저장소를 위해 설정해 주도록 하세요 — 코딩 에이전트는 저장소를 위해 설정될 때 더 빠르고 더 높은 품질의 작업을 수행합니다. GitHub Copilot 클라우드 에이전트가 요청에 대한 작업을 시작했습니다. 관련 채팅 및 풀 리퀘스트에서 진행 상황을 따르세요. MailList.tsx
다음에 빌드할 내용 설명
에이전트 GPT-5

모든 팀을 위한 모든 모델

다양한 즉시 사용 가능한 모델 중에서 선택하거나 선호하는 모델 및 호스팅 제공업체의 모델에 액세스하기 위한 자체 키를 가져오세요.

에이전트 GPT-5
자동 변수 GPT-5 mini 0x Claude Opus 4.5 (미리 보기) 1x Claude Sonnet 4.5 1x Gemini 3 Pro (미리 보기) 1x GPT-5 1x GPT-5.1-Codex (미리 보기) 1x GPT-5.1-Codex-Max (미리 보기) 1x 모델 관리...

코드베이스에 대한 전문가

코드베이스는 로컬 및 원격으로 색인되어 관련성 있는 내용을 이해하여 빠르고 상황 인식적인 상호 작용을 가능하게 합니다.

main.rs
코드베이스에서 데이터베이스 연결 문자열이 어디에 구성되어 있습니까?
에이전트 Claude Sonnet 4.5

팀이 일하는 방식대로 작동하는 AI

맞춤 에이전트, 맞춤 지침 및 워크플로와 도구에 맞춰진 재사용 가능한 프롬프트 파일을 사용하여 상호 작용을 개인화하세요.

탭에 열린 프롬프트 파일이 있는 대화형 VS Code 편집기 모형. 키보드 탐색을 사용하여 탭 표시줄과 편집기 콘텐츠를 탐색하세요.
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.
                        

VS Code에서 AI 기능을 무료로 사용하세요.

체험 기간 없음. 신용카드 불필요. GitHub 계정만 필요합니다.

무료로 사용

에이전트 모드

복잡하고 여러 단계로 이루어진 작업을 처리합니다. 에이전트 모드는 코드베이스를 읽고, 파일 간 편집을 제안하고, 터미널 명령을 실행하고, 컴파일 또는 테스트 실패에 응답합니다. 이 모든 작업을 작업이 완료될 때까지 반복합니다. VS Code 확장 및 모델 컨텍스트 프로토콜(MCP) 서버를 사용하여 에이전트 모드를 팀의 워크플로에 맞게 더욱 세밀하게 조정할 수 있습니다.

에이전트 모드로 빌드
VS Code 탭, 사이드바 및 채팅 상호 작용을 갖춘 대화형 에이전트 모드 연습. 표준 키보드 탐색을 사용하여 각 창을 탐색하세요.
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 채팅
이미지 처리 서비스를 구축하고 있습니다. 배치 이미지 처리를 지원하는 새로운 엔드포인트를 만들어 주시겠습니까?
할 일 목록 만들기 기존 서버 및 프로세서 코드를 읽고, 배치 엔드포인트 계약을 설계하고, 새 파일에 핸들러를 구현하는 것과 같은 작업을 관리하면서 할 일 목록 만들기로 시작합니다. 핸들러를 서버 라우트에 연결하고 싶고, 선택 사항이지만 배치 엔드포인트에 대한 최소한의 테스트를 추가할 수 있습니다. 또한 테스트를 실행하고 모든 것을 빌드할 계획입니다. 실행해 봅시다!
배치 이미지 처리 엔드포인트를 구현하기 위한 구조화된 할 일 목록을 만듭니다. 할 일 7개 생성됨 배치 엔드포인트를 추가하기 전에 현재 서버 및 이미지 처리 구현을 이해하기 위해 핵심 파일을 읽습니다. 읽기server.go 읽기processor.go 읽기logging.go 읽기health.go
파일 처리 개선 중... server.go를 수정할 수도 있지만, 새 파일이 요청되었으므로 /process/batch라는 라우트를 생성해야 합니다. 최대 본문 크기를 강제하고 콘텐츠 유형이 multipart/form-data인지 확인합니다. 다음으로 폼을 파싱하고 form.File["files"]을 반복합니다. 각 FileHeader에 대해 열고 바이트를 읽은 다음 ExtractMetadata를 호출하여 결과를 수집합니다. 마지막으로 결과와 함께 구조화된 JSON 응답을 반환하고 파일 없음 및 최대 배치 제한에 대한 에지 케이스를 처리합니다. 절대적으로 필요하지는 않다고 생각하지만, 각 파일을 순차적으로 처리하는 동시에 동시성을 제한하기 위해 sync.WaitGroup을 사용하는 약간의 개선을 고려하고 있습니다. 이렇게 하면 첫 번째 커밋이 더 간단해집니다. 코드 파일을 추가하고 내부/이미지를 참조하는 별칭을 가져와야 합니다. 다음으로 tests/image_processor_test.go의 기존 테스트를 확인하여 스타일을 파악하고 배치 핸들러에 대한 새 테스트 파일을 만들어야 하는지 결정합니다. 이를 읽은 다음 할 일 상태를 업데이트하고 작업 1과 2를 완료로 표시합니다.
배치 엔드포인트를 추가하기 전에 기존 테스트를 읽어 스타일을 반영한 다음 디자인 및 구현을 진행할 것입니다. 읽기image_processor_test.go
HTTP 테스트 준비 HTTP 테스트를 실행해야 하지만 현재 테스트 패키지가 'tests'에 있고 메인 모듈 내에 있지 않다는 것을 발견했습니다. HTTP 테스트를 수행하려면 config, processor, logger, server와 같은 몇 가지 사항을 설정하고 multipart 요청을 보내야 합니다. 다음 단계는 config.go의 구성을 확인하여 필요한 필드를 파악하는 것입니다. 바로 시작해 봅시다!
HTTP 테스트에서 서버를 구성하기 위해 구성 읽기. 읽기config.go
업데이트 및 패치 관리 모든 것을 정리하기 위해 manage_todo_list를 사용해야 하며, 어떤 작업도 놓치지 않도록 해야 합니다. 그렇게 한 후에 패치를 적용할 수 있습니다. 새 파일을 추가하고 server.go를 수정하는 작업이 포함됩니다. 이 과정에서 실수를 피하기 위해 모든 것이 명확하고 정확한지 확인하고 싶습니다. 계속 나아갑시다!
시작 (3/7) 배치 계약 설계
업데이트 및 테스트 구현 디자인 계약을 완료로 표시하고 업데이트를 구현해야 합니다. 할 일 목록을 계속 관리하고 새 파일과 server.go를 업데이트하기 위해 패치를 적용할 것입니다. server.go에 /process/batch 라우트를 추가하고 internal/http/batch.go라는 새 파일을 구현해야 할 것 같습니다. 코드를 작성한 후 테스트 파일을 추가하고 go test로 테스트를 실행하고 run_in_terminal 명령을 사용합니다. 시작합시다!
완료 (3/7) 배치 계약 설계 배치 핸들러 및 라우트, 테스트를 추가하기 위한 패치 적용. server.go+1 -0 batch.go+106 -0 batch_endpoint_test.go+123 -0 새 배치 이미지 처리 엔드포인트 구현 파일 변경 / 추가됨
  • server.go: 새 라우트 POST /process/batch 등록.
  • batch.go: 새 핸들러 handleProcessBatch가
    • multipart/form-data를 수락합니다.
    • files 키 아래의 여러 파일을 읽습니다 (파일이 누락된 경우 모든 파일 파트로 대체).
    • 전체 배치를 실패시키지 않고 파일별 성공/오류를 반환합니다.
    • 집계: count, success, failed.
  • batch_endpoint_test.go: happy path (유효 파일 1개 + 유효하지 않은 파일 1개) 및 누락된 파일 오류 사례를 테스트합니다.
추천 다음 단계 (선택 사항)
  • 구성 가능한 최대 배치 파일 수 추가 (예: 구성을 통해).
  • 매우 큰 이미지를 위한 제한된 메모리(처리 + 삭제)로 스트림 처리.
  • 워커 풀 및 컨텍스트 취소를 통한 선택적 병렬 처리.
  • 디코딩 전에 파일별 크기 유효성 검사 추가.
  • 멀티파트가 아닌 클라이언트를 위한 URL 또는 base64 기반 배치 지원.
이러한 향상 중 원하는 것이 있거나 다른 요청/응답 형식을 선호하는 경우 알려주세요.
batch.go
다음에 빌드할 내용 설명
에이전트 Gemini 3 Pro (미리 보기)

다음 편집 제안

VS Code는 코딩하는 동안 다음 동작을 예측합니다. Tab 키를 사용하여 편집기에서 AI 기반 제안을 즉시 수락하세요. 이미 하고 있는 편집을 기반으로 무엇을 어디에서 변경해야 할지 지능적으로 추천합니다.

AI 기반 제안으로 코딩
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 iconJavaScript
TypeScript iconTypeScript
Python iconPython
C# iconC#
C++ iconC++
HTML iconHTML
Java iconJava
JSON iconJSON
PHP iconPHP
Markdown iconMarkdown
Powershell iconPowershell
YAML iconYAML

완전히 사용자 지정 가능

코딩 스타일에 맞게 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 for the Web(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.