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

2021년 9월 (버전 1.61)

업데이트 1.61.1: 이 업데이트는 다음 이슈들을 해결합니다.

업데이트 1.61.2: 이 업데이트는 다음 이슈들을 해결합니다.

다운로드: Windows: x64 Arm64 | Mac: Universal Intel silicon | Linux: deb rpm tarball Arm snap

Visual Studio Code 2021년 9월 릴리스에 오신 것을 환영합니다. 이번 버전에는 여러분이 좋아할 만한 많은 업데이트가 포함되어 있으며, 주요 변경 사항은 다음과 같습니다.

이 릴리스 노트를 온라인으로 읽으려면 code.visualstudio.com의 업데이트로 이동하십시오.

VS Code 팀의 릴리스 파티에서 이번 버전의 새로운 기능 하이라이트를 시청하세요. YouTube 채널에서 이벤트 녹화본을 찾을 수 있습니다.

Insider: 새로운 기능을 최대한 빨리 사용해 보고 싶으신가요? 야간 빌드인 Insider 빌드를 다운로드하고 사용 가능한 최신 업데이트를 즉시 사용해 보세요.

워크벤치

새로운 그룹을 생성하지 않고 편집기 분할

그룹 내 분할 (⌘K ⇧⌘\ (Windows, Linux Ctrl+K Ctrl+Shift+\)) 새 명령이 추가되어 두 번째 편집기 그룹 없이 편집기를 두 개의 측면으로 분할할 수 있습니다. 이를 통해 동일한 파일에 대해 두 개의 편집기를 나란히 작업할 수 있습니다. 짧은 비디오에서 볼 수 있듯이 레이아웃 토글 버튼을 통해 세로 또는 가로 분할 간의 레이아웃을 전환할 수도 있습니다.

분할이 세로 또는 가로이도록 선호하는 경우 workbench.editor.splitInGroupLayout 새 설정이 있습니다.

이 기능을 사용하기 위한 새 명령이 키 바인딩으로 제공됩니다.

  • workbench.action.splitEditorInGroup
  • workbench.action.toggleSplitEditorInGroup
  • workbench.action.joinEditorInGroup
  • workbench.action.toggleSplitEditorInGroupLayout

그리고 측면 간 이동을 위해

  • workbench.action.focusFirstSideEditor
  • workbench.action.focusSecondSideEditor
  • workbench.action.focusOtherSideEditor

새로운 색상 sideBySideEditor.border는 한쪽과 다른 쪽을 구분하는 테두리 색상을 설정합니다.

잠긴 편집기 그룹

지난 마일스톤에 실험적인 새 기능으로 잠긴 편집기 그룹을 도입했습니다. 이번 마일스톤에서는 설정을 개선하여 편집기 그룹을 자동으로 잠글 편집기를 쉽게 선택할 수 있습니다.

Locked editor group setting

이 설정은 이제 workbench.editor.autoLockGroups라고 불립니다. 마찬가지로 편집기 그룹 잠금 관련 명령의 이름이 변경되었으며 더 이상 실험적이지 않습니다.

  • workbench.action.lockEditorGroup
  • workbench.action.unlockEditorGroup
  • workbench.action.toggleEditorGroupLock

장식을 통한 삭제 및 읽기 전용 편집기 표시

열린 편집기는 읽기 전용인지 또는 해당 리소스가 디스크에서 삭제되었는지 여부를 나타낼 수 있습니다. 이 표시는 편집기 레이블에 "deleted" 및/또는 "readonly"를 추가하여 표시했으며, 이는 상당한 공간을 차지했습니다.

VS Code는 이제 이 목적을 위해 장식을 사용합니다.

  • 삭제된 리소스가 있는 편집기는 취소선으로 표시되고 빨간색으로 표시됩니다.
  • 읽기 전용 리소스가 있는 편집기는 자물쇠 아이콘으로 표시됩니다.

Editor readonly and deleted decorations

기존 그룹으로 편집기 분할

편집기를 측면으로 분할하면 VS Code는 측면에 기존 그룹이 있더라도 새 편집기 그룹을 엽니다. 그러나 기존 그룹으로 편집기를 분할해야 하는 경우도 있습니다.

이를 지원하기 위해 새 명령이 추가되었습니다.

  • workbench.action.splitEditorToPreviousGroup: 이전 그룹으로 분할합니다.
  • workbench.action.splitEditorToNextGroup: 다음 그룹으로 분할합니다.
  • workbench.action.splitEditorToAboveGroup: 현재 그룹 위쪽의 그룹으로 분할합니다.
  • workbench.action.splitEditorToBelowGroup: 현재 그룹 아래쪽의 그룹으로 분할합니다.
  • workbench.action.splitEditorToLeftGroup: 현재 그룹 왼쪽의 그룹으로 분할합니다.
  • workbench.action.splitEditorToRightGroup: 현재 그룹 오른쪽의 그룹으로 분할합니다.
  • workbench.action.splitEditorToFirstGroup: 첫 번째 그룹으로 분할합니다.
  • workbench.action.splitEditorToLastGroup: 마지막 그룹으로 분할합니다.

차이 편집기에 대한 더 짧은 레이블

두 파일을 비교할 때 작업 영역 상대 폴더 경로가 파일 이름 앞에 붙어 비교되는 파일 이름을 보기 어렵게 만들었습니다.

이번 릴리스에서는 폴더가 레이블에서 숨겨집니다. 단, 두 파일 이름이 동일한 경우 normal 편집기 레이블과 동일한 동작을 합니다.

두 파일 이름이 동일한 경우 폴더 차이를 나타내는 설명이 표시됩니다.

Diff editor comparing two files

macOS: 파일 메뉴 변경 사항

macOS에서 파일 메뉴의 열기... 메뉴 항목을 선택하면 파일과 폴더를 모두 열 수 있습니다. 새 사용자에게는 이 점이 놀라울 수 있으며, 사람들은 폴더를 열기 위해 작업 영역 열기 명령을 사용하려고 시도했지만 해당 메뉴 항목은 .code-workspace 파일을 열기 위한 것입니다.

혼란을 피하기 위해 macOS의 파일 메뉴를 약간 조정했습니다.

  • 새 항목 폴더 열기...는 폴더를 엽니다.
  • 작업 영역 열기...의 이름이 파일에서 작업 영역 열기...로 변경되었습니다.

macOS File menu

원격 분석 설정

새로운 원격 분석 설정 telemetry.telemetryLevel은 더 높은 구성 세분성을 제공하며 사용자가 오류 원격 분석만 보내고 일반 사용량 데이터는 보내지 않도록 선택할 수 있습니다. 값은 on, error 및 off입니다. on 및 error 값은 충돌 보고 프로그램도 활성화합니다.

기존 설정 telemetry.enableTelemetry 및 telemetry.enableCrashReporter는 새로운 telemetry.telemetryLevel 설정으로 대체될 예정이지만 계속 지원됩니다.

Minimap 배경 투명도

이제 새로 추가된 minimap.foregroundOpacity 색상을 사용하여 minimap 텍스트의 불투명도와 별도로 minimap 배경 불투명도를 구성할 수 있습니다.

업데이트된 도움말 메뉴 항목

시작 경험에 대한 지속적인 개선으로 인해 도움말 메뉴 항목이 더 일반적으로 사용되는 이름으로 업데이트되었습니다. 이는 새 사용자의 학습 내용을 기반으로 하지만 모두가 도움말을 더 쉽게 찾을 수 있도록 합니다. 소개 비디오는 이제 비디오 자습서가 되었고 대화형 플레이그라운드는 편집기 플레이그라운드가 되었습니다. 새 이름은 도움말 메뉴와 명령 팔레트 모두에서 찾을 수 있습니다. 도움말 메뉴에는 명령 팔레트를 여는 추가 진입점으로 모든 명령 보기 항목도 있습니다.

편집기

괄호 쌍 가이드

편집기가 이제 기본적인 괄호 쌍 가이드를 지원합니다. 괄호 쌍 가이드는 괄호 쌍 색상 지정 기능과 동일한 색상과 알고리즘을 사용합니다. 괄호 쌍 일치 알고리즘은 최근 "Bracket pair colorization 10,000x faster" 블로그 게시물에 자세히 설명되어 있습니다.

들여쓰기 가이드와 유사하게 활성 괄호 쌍 가이드가 강조 표시됩니다.

Bracket pair guides shown in the editor

괄호 쌍 가이드는 editor.guides.bracketPairs 설정(기본값 false)을 구성하여 활성화할 수 있습니다. 이 기능은 계속 반복될 것이며 다음 릴리스에서 세로 가이드를 탐색할 것입니다.

들여쓰기 가이드 설정

editor.renderIndentGuides 및 editor.highlightActiveIndentGuide 설정은 editor.guides.indentation 및 editor.guides.highlightActiveIndentation으로 대체되었습니다.

소스 제어

Git 리포지토리를 위한 게시 또는 동기화 "액션 버튼"

Git 확장 프로그램은 이제 소스 제어 보기에 새 "액션" 버튼을 추가하여 푸시되지 않은 변경 사항을 더 쉽게 게시하거나 동기화할 수 있습니다.

New Source Control view Sync button

테마: Amethyst Theme

기본적으로 Git 확장 프로그램은 푸시되지 않은 커밋이 있는 경우 위의 이미지와 같이 변경 사항 동기화 버튼을 추가하거나, 브랜치가 아직 게시되지 않은 경우 변경 사항 게시 버튼을 추가합니다. 또한 사용자는 git.showUnpublishedCommitsButton 설정을 구성하여 이 동작을 사용자 정의할 수 있습니다. 이 설정은 기본적으로 whenEmpty로 설정되어 있어 푸시되지 않은 커밋이 있고 보기의 다른 변경 사항이 없을 때만 버튼이 표시됩니다.

이 새 액션 버튼은 소스 제어 확장을 위한 새로운 제안 API로 사용할 수 있습니다. 자세한 내용은 아래 제안 API 섹션을 참조하세요.

마지막으로, 사용자는 새 scm.showActionButton 설정을 통해 소스 제어 보기에서 모든 액션 버튼의 가시성을 완전히 비활성화할 수 있습니다. 이 설정은 모든 소스 제어 확장 프로그램의 동작을 재정의합니다.

변경된 파일 표시 제한 증가

이 릴리스 이전에는 Git 확장 프로그램에 소스 제어 보기에 표시할 수 있는 변경 사항에 대한 하드코딩된 제한이 5000개였습니다. 이 제한은 사용자가 VS Code가 Git에서 보고한 모든 변경 사항을 처리하는 동안 너무 오래 기다리지 않도록 하기 위한 것이었습니다. 이 제한이 이제 10,000개로 증가했으며, 사용자가 이 제한을 사용자 정의할 수 있도록 하는 새 git.statusLimit 설정이 있습니다(원하는 경우 리포지토리별). 이 설정은 제한을 완전히 비활성화하기 위해 0으로 설정할 수도 있지만, 변경 사항이 많으면 업데이트에 시간이 오래 걸릴 수 있다는 점에 유의하세요.

또한 제한이 초과되었을 때 입력 상자에 다음과 같은 경고 표시기를 추가했습니다.

New warning indicator, which reads "Too many changes were detected. Only the first 10,000 changes will be shown below"

터미널

고정된 크기

이제 터미널: 고정 크기 설정 명령(workbench.action.terminal.setDimensions)을 통해 터미널 크기를 정적으로 설정할 수 있습니다. 이는 줄 바꿈이 눈에 거슬리거나 방해가 될 수 있는 경우에 유용합니다.

이 명령은 원하는 너비 및/또는 높이를 입력할 수 있는 프롬프트를 표시합니다.

Terminal Set Fixed Dimensions column width prompt

사용자 지정 제목 및 설명

터미널 이름은 일반적으로 연결된 프로세스의 이름이며 때로는 터미널을 구별하기 어려울 수 있습니다.

이제 terminal.integrated.tabs.title 및 terminal.integrated.tabs.description 설정에서 변수를 사용하여 제목과 설명을 모두 구성할 수 있습니다.

현재 기본값은 다음과 같습니다.

{
  "terminal.integrated.tabs.title": "${process}",
  "terminal.integrated.tabs.description": "${task}${separator}${local}${separator}${cwdFolder}"
}

사용 가능한 변수는 다음과 같습니다.

  • ${cwd} - 터미널의 현재 작업 디렉토리
  • ${cwdFolder} - 터미널의 현재 작업 디렉토리.
  • ${workspaceFolder} - 터미널이 시작된 작업 영역.
  • ${local} - 원격 작업 영역의 로컬 터미널을 나타냅니다.
  • ${process} - 터미널 프로세스의 이름.
  • ${separator} - 변수 값이나 정적 텍스트로 둘러싸인 경우에만 표시되는 조건부 구분 기호(" - ").
  • ${sequence} - 프로세스에서 xterm.js에 제공한 이름.
  • ${task} - 이 터미널이 작업과 관련되어 있음을 나타냅니다.

이모티콘 IME

macOS에서 이제 입력기(IME)에 대한 이모티콘이 지원됩니다.

Dialog showing Emojis available in the Integrated Terminal for IME on macOS

Alt 버퍼 활성 컨텍스트 키

nano와 같은 일부 터미널 UI 애플리케이션은 VS Code 워크벤치에서 소비하는 키보드 단축키를 사용하므로 VS Code 내에서 통합될 때 해당 기능이 제한됩니다. 새 when 절 컨텍스트 키 TerminalContextKeys.altBufferActive는 alt 버퍼가 활성화되어 있을 때 워크벤치가 아닌 터미널로 키 바인딩을 지시하여 이 문제를 해결합니다.

언어

새 JavaScript 및 TypeScript 언어 상태 항목

현재 TypeScript 버전과 IntelliSense 상태가 이제 언어 상태 표시줄 항목에 표시됩니다.

The JavaScript and TypeScript IntelliSense status item showing config file and TypeScript version

이전에는 TypeScript 버전이 항상 상태 표시줄에 표시되었습니다. 버전을 고정하여 이전 동작을 복원할 수 있습니다.

언어 상태 항목은 현재 파일의 jsconfig/tsconfig도 표시하며, 부분 모드에 있는지 여부를 나타냅니다.

제목 없는 파일 전반의 IntelliSense

이제 모든 제목 없는 JavaScript 및 TypeScript 파일은 동일한 프로젝트의 일부로 처리됩니다. 즉, 한 제목 없는 파일에 정의된 전역 기호가 이제 다른 파일에서도 제안으로 표시됩니다.

이는 작업 영역의 디스크 파일 동작과 더 잘 일치합니다. 제목 없는 파일에 import 또는 export를 추가하여 모듈로 변환하면 전역 변수가 다른 파일에서 숨겨집니다.

웹상에서 파일 전반의 IntelliSense

이제 브라우저에서 VS Code가 실행될 때 vscode.dev 또는 github.dev의 JavaScript 및 TypeScript 파일 전반에서 IntelliSense가 작동합니다.

Cross file JavaScript IntelliSense on github.dev

브라우저에서 VS Code가 실행될 때 현재 열린 파일에만 액세스할 수 있으므로 VS Code는 자동 가져오기와 같은 프로젝트 전체 IntelliSense 기능을 제공할 수 없다는 점을 명심하세요.

JSX 태그의 접기 일관성 향상

JavaScript 또는 TypeScript에서 JSX 태그를 접을 때 VS Code는 이제 닫는 태그를 계속 표시합니다.

Folding in JSX

이것은 HTML에서 접기가 작동하는 방식과 일치합니다.

미리 보기 기능

TypeScript 4.5 지원

이 업데이트에는 곧 출시될 TypeScript 4.5 릴리스에 대한 초기 지원이 포함됩니다. 새 언어 및 도구 기능에 대한 자세한 내용은 TypeScript 4.5 베타 발표 게시물을 참조하세요. 일부 도구 하이라이트

  • JSX 속성 완성에 대한 초기 지원.
  • 참조 CodeLens에 대한 더 정확한 참조 수.

TypeScript 4.5 야간 빌드를 사용하려면 TypeScript Nightly 확장 프로그램을 설치하세요.

피드백을 공유하고 TypeScript 4.5에서 발견되는 버그를 알려주세요.

애플리케이션 다시 시작 시 터미널 세션 복원

VS Code 창이 닫힐 때 터미널 프로세스가 해제됩니다. 이번 릴리스에서는 버퍼를 기록하고 복원하여 프로세스를 다시 만드는 옵트인 설정이 있습니다. 이를 활성화하려면 terminal.integrated.persistentSessionReviveProcess를 설정하세요.

The terminal buffer gets restored on application restart with a message indicating when the snapshot was taken

터미널 크기를 내용 너비에 맞추기 토글

전체 내용을 맞추는 것과 줄 바꿈된 줄 사이에서 터미널 너비를 토글할 수 있습니다. ⌥Z (Windows, Linux Alt+Z) 또는 탭 컨텍스트 메뉴 항목 내용 너비에 맞추기 토글을 사용하여 이 작업을 수행할 수 있습니다.

이는 편집기에서 줄 바꿈을 토글하는 것과 유사하며 키 바인딩을 공유합니다.

확장 프로그램 기여

Jupyter

목차

Jupyter Notebook의 목차는 이제 명령 팔레트에서 Jupyter: 목차 표시 명령을 통해 액세스할 수 있습니다. 이 동일한 기능은 노트북 도구 모음의 아이콘을 통해서도 액세스할 수 있습니다.

이 기능은 VS Code의 모든 노트북에 적용되므로 파일 탐색기의 개요 보기를 통해 액세스할 수 있습니다.

새 파일 메뉴를 통한 새 노트북 생성

이제 파일 > 새 파일... 메뉴 항목을 사용하여 새 Jupyter 노트북을 만들 수 있습니다. 이 메뉴는 시작 페이지 또는 명령 팔레트의 새 파일... 항목에서도 액세스할 수 있습니다.

디버깅

VS Code는 이제 Jupyter Notebook에 대한 전체 디버그 기능을 지원합니다. 사용해 보려면 ipykernel v6+가 선택한 커널로 설치되었는지 확인하고, 중단점을 설정하고, 셀 디버그 명령을 선택하세요.

원격 디버깅

줄별 실행을 사용하고 원격 커널을 사용하여 Jupyter Notebook을 디버그할 수도 있습니다. 사용해 보려면 Jupyter: 연결을 위한 로컬 또는 원격 Jupyter 서버 지정 명령으로 원격 커널에 연결하고, ipykernel v6+가 선택한 커널로 설치되었는지 확인한 다음, 평소처럼 줄별 실행 또는 디버깅을 사용하세요.

별도 렌더러 확장

Jupyter Notebook 렌더러는 별도의 확장 프로그램(Jupyter Notebook Renderers)으로 분리되어 사용자가 vscode.dev 및 github.dev에서 plotly, vega, latex 등과 같은 노트북 출력을 볼 수 있습니다.

Python

새 Python 안내

Python 확장 프로그램은 이제 VS Code에서 Python을 처음 사용하는 사용자 경험을 개선하기 위한 몇 가지 기본 설정 단계가 포함된 안내를 제공합니다.

New Python walkthrough

개선된 디버깅 경험

launch.json 구성 파일이 없는 작업 영역에서 작업할 때 Python 확장 프로그램은 Python 파일 또는 프로젝트 디버깅을 시작할 때마다 디버거 구성 메뉴를 표시했습니다. 이는 사용자 지정 인수(Flask, Django 또는 FastAPI 등)를 사용하여 웹 애플리케이션을 디버그할 때 특히 성가실 수 있습니다.

이제 디버깅을 시작할 때마다 구성을 선택할 필요가 없습니다. 첫 번째 선택 사항이 세션 나머지 기간 동안 재사용됩니다.

GitHub Pull Requests 및 Issues

GitHub Pull Requests and Issues 확장 프로그램 작업은 계속 진행 중이며, 이를 통해 풀 리퀘스트 및 이슈를 작업하고, 만들고, 관리할 수 있습니다. 확장 프로그램의 0.31.0 릴리스에 대한 변경 로그를 확인하여 주요 내용을 살펴보세요.

원격 개발

컨테이너, 원격 머신 또는 Linux용 Windows 하위 시스템(WSL)을 전체 기능 개발 환경으로 사용할 수 있는 원격 개발 확장에 대한 작업이 계속 진행 중입니다.

1.61의 주요 기능은 다음과 같습니다.

  • 포트 전달 시 DNS 이름.
  • 간편한 컨테이너 추가 기능 선택.
  • Dev Containers 확장 프로그램은 WSL에서 CLI 명령을 실행할 수 있습니다.

원격 개발 릴리스 노트에서 새 확장 프로그램 기능 및 버그 수정을 알아볼 수 있습니다.

확장 프로그램 작성

플랫폼별 확장 프로그램

확장 프로그램은 이제 VS Code에서 지원되는 각 플랫폼(Windows, Linux, macOS)에 대해 다른 VSIX를 게시할 수 있습니다. VS Code 버전 1.61.0부터 VS Code는 현재 플랫폼과 일치하는 확장 프로그램 패키지를 찾습니다. 버전 1.99.0부터 vsce 확장 프로그램 게시 도구는 플랫폼별 확장 프로그램 게시를 지원합니다.

플랫폼별 확장 프로그램은 확장 프로그램에 플랫폼별 라이브러리 또는 종속성이 있는 경우 유용하므로 플랫폼 패키지에 포함되는 정확한 바이너리를 제어할 수 있습니다. 일반적인 사용 사례는 확장 프로그램이 네이티브 Node 모듈을 사용하는 경우입니다.

이에 대한 자세한 내용은 플랫폼별 확장 프로그램 설명서에서 확인할 수 있습니다.

테스트 태그 및 오류 외 출력

이번 달에는 새 테스트 API를 기반으로 하는 확장 프로그램을 위한 추가 API를 출시했습니다.

  • 테스트 태그를 사용하면 특정 테스트를 실행하거나 실행하지 않을지 여부와 방법을 구성할 수 있습니다.

  • 오류 외 출력을 사용하면 특정 테스트 사례에 추가 콘솔 출력을 연결할 수 있습니다.

    출력 메시지는 실패 메시지와 유사하게 인라인으로 표시됩니다.

    Image showing "hello world" displayed inline beside a console.log statement

파일 시스템 공급자가 파일을 읽기 전용으로 선언할 수 있도록 허용

파일 시스템 공급자는 이제 FileStat 객체의 permissions 속성에 FilePermission.Readonly 값을 설정하여 개별 파일을 읽기 전용으로 표시할 수 있습니다. 읽기 전용 파일은 편집할 수 없습니다.

참고: 모든 파일이 읽기 전용으로 처리되어야 하는 경우 registerFileSystemProvider를 호출할 때 기존 isReadonly 옵션을 사용할 수 있습니다.

설정 편집기 확장 프로그램 카테고리

설정 편집기는 이제 카테고리가 있는 확장 프로그램의 contributes.configuration 끝점에 대한 하위 트리를 표시합니다.

여러 카테고리를 만들려면 contributes.configuration은 구성 배열을 허용하며 각 구성의 title 키는 섹션 제목에 사용됩니다. 또한 하위 트리 내에서 카테고리를 재정렬할 수 있는 order 필드가 있습니다.

New Setting editor table of contents showing CSS language features having its own subtree

타입 계층 구조

타입 계층 구조 공급자를 추가하기 위한 API 제안이 완료되었습니다.

WebviewOptions.enableForms

WebviewOptions의 새 enableForms 속성을 사용하면 웹뷰 내에서 폼을 활성화하거나 비활성화할 수 있습니다. 하위 호환성을 위해 enableScripts를 이미 설정한 경우 enableForms의 기본값은 true입니다. 그렇지 않으면 기본값은 false입니다.

웹뷰 콘텐츠에 폼이 필요하지 않은 경우 폼을 비활성화하는 것이 좋습니다.

터미널 상태

새로운 state 속성이 Terminal 객체에 노출되며, 해당 window.onDidChangeTerminalState 이벤트에 더해 사용자가 터미널과 상호 작용한지 여부를 나타냅니다. 예를 들어, 확장 프로그램은 사용자가 액션을 실행하기 전에 터미널과 상호 작용한 시간을 기다릴 수 있습니다.

테스트 데이터를 사용하여 웹 확장 프로그램 테스트 실행

@vscode/test-web 노드 모듈은 Chromium, Firefox 또는 Webkit에서 웹 확장 프로그램을 테스트하기 위한 CLI 및 API를 제공합니다.

이번 마일스톤의 새로운 기능은 테스트 데이터에 대한 VS Code for Web을 열기 위한 folderPath 옵션입니다. 인메모리 파일 시스템은 제공된 위치의 리소스를 포함하므로 테스트에서 작동할 파일이 있습니다.

vscode-test-web --browserType=chromium --extensionDevelopmentPath=$extensionLocation $testDataLocation

업데이트된 코드 아이콘

다음 새 아이콘이 codicon 라이브러리에 추가되었습니다.

List of codicon icons that were added

  • beaker-stop
  • bracket-dot
  • bracket-error
  • bracket
  • debug-continue-small
  • graph-line
  • graph-scatter
  • pie-chart

Visual Studio Code용 웹뷰 UI 툴킷

Visual Studio Code용 Webview UI Toolkit은 Visual Studio Code에서 웹뷰 기반 확장 프로그램을 구축하기 위한 구성 요소 라이브러리입니다.

Webview Toolkit component artwork

라이브러리의 기능은 다음과 같습니다.

  • Visual Studio Code 디자인 언어 구현: 편집기의 나머지 부분과 일관된 모양과 느낌을 가진 확장 프로그램을 만듭니다.
  • 색상 테마 자동 지원: 모든 구성 요소는 테마를 염두에 두고 설계되었으며 현재 편집기 테마를 자동으로 표시합니다.
  • 모든 기술 스택 사용: 라이브러리는 웹 구성 요소 세트로 제공되므로 개발자는 확장 프로그램이 빌드된 기술 스택(React, Vue, Svelte 등)에 관계없이 툴킷을 사용할 수 있습니다.
  • 기본적으로 접근 가능: 모든 구성 요소는 웹 표준 호환 ARIA 레이블 및 키보드 탐색과 함께 제공됩니다.

가상 워크스페이스 확장 프로그램 가이드

확장 프로그램 작성자가 VS Code가 가상 환경에서 실행될 때 확장 프로그램을 테스트하고 업데이트하는 데 도움이 되는 새로운 가상 워크스페이스 확장 프로그램 가이드가 있습니다. GitHub Repositories와 같이 자체 가상 파일 시스템을 만드는 확장 프로그램과 브라우저에서 VS Code가 실행되는 vscode.dev 및 github.dev와 같은 새로운 워크플로우가 도입됨에 따라 확장 프로그램은 더 이상 온디스크 파일 시스템 또는 플랫폼 기능에 직접 액세스할 수 있다고 가정할 수 없습니다.

가상 워크스페이스 확장 프로그램 가이드에서는 다음 내용을 다룹니다.

  • 확장 프로그램이 수정 없이 가상 워크스페이스에서 작동하는지 여부.
  • 온디스크 파일 시스템이 없는 가상 워크스페이스에서 작동하도록 확장 프로그램을 업데이트하는 방법.
  • 가상 워크스페이스에서 실행될 때 확장 프로그램을 활성화하거나 비활성화할지 VS Code에 알리는 방법.

제안된 확장 API

모든 마일스톤에는 새로운 제안 API가 제공되며 확장 작성자는 이를 사용해 볼 수 있습니다. 언제나처럼 여러분의 피드백을 원합니다. 제안된 API를 사용하려면 다음을 수행해야 합니다.

  • 제안된 API는 자주 변경되므로 Insiders를 사용해야 합니다.
  • 확장의 package.json 파일에 이 줄이 있어야 합니다: "enableProposedApi": true.
  • vscode.proposed.d.ts 파일의 최신 버전을 프로젝트 소스 위치로 복사합니다.

제안 API를 사용하는 확장은 게시할 수 없습니다. 다음 릴리스에서 호환성이 깨지는 변경 사항이 있을 수 있으며, 기존 확장을 깨뜨리는 일은 절대 없을 것입니다.

TaskPresentationOptions close 속성

tasks.json 스키마의 presentation 속성인 close 속성은 TaskPresentationOptions API에서 사용할 수 있습니다. 이는 tasks.json 속성과 동일한 방식으로 작동하여 작업 완료 시 터미널이 닫힐지 여부를 제어합니다.

탭 API

탭을 읽고 조작하기 위한 제안된 API가 있습니다. 이는 백업 textDocument가 없을 때 열린 리소스 목록에 대한 액세스를 원하는 일반적인 기능 요청을 차단 해제합니다. 이 API에 대한 피드백은 이슈 #133532에서 제공할 수 있습니다.

MarkdownString.supportHtml

MarkdownString의 새로 제안된 supportHtml 속성을 사용하면 Markdown 텍스트 내에 나타나는 안전한 하위 집합의 원시 HTML을 렌더링할 수 있습니다.

supportHtml 속성의 기본값은 false입니다. 비활성화하면 VS Code는 Markdown 텍스트에 나타나는 모든 원시 HTML 태그를 제거합니다.

컨트롤러 렌더러 스크립트가 이제 JavaScript 모듈을 사용합니다.

NotebookController.rendererScripts를 사용하면 노트북 컨트롤러가 렌더러가 실행되기 전에 노트북에 JavaScript 파일 세트를 미리 로드할 수 있습니다. 이러한 스크립트는 노트북을 초기화하거나 렌더러가 의존하는 전역 기호를 정의할 수 있습니다.

렌더러 스크립트는 이전에는 일반 JavaScript 파일이었습니다. 이 스크립트들은 VS Code에서 내보낸 전역 기호를 사용하여 VS Code 특정 API를 호출할 수 있었습니다.

이 전역 기호는 검색할 수 없었으며 VS Code가 렌더러 스크립트 자체를 제어할 수 있는 기능도 거의 제공하지 않았습니다. 이를 해결하기 위해 렌더러 스크립트는 이제 JavaScript 모듈을 사용하며 activate 함수를 내보냅니다. 이 함수에는 VS Code API가 전달됩니다.

interface KernelPreloadContext {
    readonly onDidReceiveKernelMessage: Event<unknown>;
    postKernelMessage(data: unknown): void;
}

export function activate(ctx: KernelPreloadContext): Promise<void> | undefined {
    ...
}

이 변경 사항은 NotebookController의 렌더러 스크립트와 기여된 노트북 렌더러에서 제공하는 렌더링 스크립트를 더 잘 일치시킵니다.

Quick Pick keepScrollPosition 속성

window.createQuickPick()에서 반환되는 QuickPick 객체의 keepScrollPosition 속성이 제안된 API로 추가되었습니다. 이를 통해 스크롤 위치(cursorTop)가 목록 상단으로 다시 이동하는지 여부를 제어할 수 있습니다.

이 API의 몇 가지 사용 사례는 다음과 같습니다.

  • 제안된 QuickPickItemButtons API를 사용하여 "이 항목을 목록에서 제거" 옵션 구현(예: Ctrl/Cmd + P x QuickPickItemButton).
  • 제안된 QuickPickItemButtons API를 사용하여 "이 항목을 어떤 식으로든 토글" 옵션 구현(예: 스니펫 삽입 명령).
  • Quick Pick에서 항목 비동기식으로 로드(예: setInterval이 .items 속성을 다시 할당하여 항목 추가, 이때 스크롤이 목록 상단으로 이동하지 않아야 함).

스크롤 위치를 제어할 수 없으면 이러한 각 작업은 Quick Pick의 스크롤 위치를 목록 상단으로 이동시키게 됩니다. keepScrollPosition을 사용하면 확장 프로그램 작성자가 이 동작을 제어할 수 있습니다.

SourceControl.actionButton

소스 제어 API는 이제 SourceControl 객체에 actionButton 속성을 포함하여 SCM 공급자가 입력란 아래에 "액션" 버튼을 조건부로 표시할 수 있습니다. 예를 들어 Git 확장 프로그램은 푸시되지 않은 변경 사항이 있을 때 게시 또는 동기화 버튼을 표시하기 위해 이 새 속성을 사용합니다.

언어 서버 프로토콜

새 버전의 Language Server Protocol과 해당 npm 모듈이 게시되었습니다. 새 버전에는 타입 계층 구조에 대한 제안된 구현이 포함되어 있습니다.

엔지니어링

렌더링된 HTML을 정리하기 위해 DOMPurify로 전환

기본 워크벤치에서 렌더링되는 HTML을 정리하기 위해 내부적으로 DOMPurify를 사용하도록 전환했습니다. 이는 주로 렌더링된 Markdown을 정리하는 데 사용됩니다.

DOMPurify는 잘 관리되며 기본적으로 신뢰할 수 있는 유형과 호환됩니다. 이 전환은 사용자 보호에 도움이 되며 MarkdownString.supportHtml과 같은 기능을 활성화하는 데 더 큰 확신을 줍니다.

Big Sur CLI의 open 명령 사용

macOS Big Sur에서는 명령줄에서 VS Code를 시작할 때 open 명령을 사용하여 VS Code를 실행합니다. 이 변경 사항을 통해 VS Code는 macOS Dock에서 시작된 것처럼 열리므로 권한과 관련된 일부 문제를 해결할 수 있습니다.

파일 감시 변경 사항

디스크의 파일 및 폴더 변경 사항을 감지하는 데 사용되던 파일 감시자가 지원되는 모든 플랫폼(Windows, Linux, macOS)을 처리할 수 있고 플랫폼별로 다른 감시자를 유지하는 오버헤드를 줄이는 라이브러리로 변경되었습니다. 이 라이브러리를 모든 플랫폼에서 기본적으로 활성화할 계획입니다. 이번 반복에서는 Windows 및 macOS에서 활성화했으며 곧 Linux에서도 활성화할 계획입니다.

새로운 워처는 시작 시 더 빨라지며 대형 폴더에서 CPU 사용량을 줄여줍니다. 라이브러리 사용의 한 가지 단점은 macOS에서 파일 워처가 심볼릭 링크인 워크스페이스의 폴더를 더 이상 자동으로 감지하지 못한다는 것입니다. 이러한 설정을 사용하는 경우, 새 files.watcherInclude 설정을 사용하여 심볼릭 링크 경로를 파일 감시에 명시적으로 추가할 수 있습니다. 장점으로는 이 새 설정을 Windows에서 사용할 수 있어 워크스페이스 내의 심볼릭 링크 폴더를 명시적으로 포함할 수 있다는 것입니다. 이전에는 Windows에서 불가능했던 기능입니다.

일상 업무에서는 아무런 차이를 느끼지 못해야 하지만, 파일 감시 기능에 문제가 있다면 이슈를 신고해 주세요. 문제가 발생하는 경우 기존 워처를 활성화하는 files.legacyWatcher 설정이 있습니다.

문서

고급 컨테이너 구성

Dev Containers 확장 프로그램의 고급 컨테이너 구성을 다루는 새로운 섹션이 있습니다.

컨테이너 문서에서 다음 방법을 배울 수 있습니다.

고급 컨테이너 구성 설명서에는 개발 컨테이너 설정을 위한 팁과 코드 예제, 그리고 짧은 YouTube 동영상이 포함되어 있습니다.

주요 수정 사항

  • 69665: OS가 절전 모드에서 다시 시작될 때 때때로 터미널에 손상된 텍스처가 표시됨
  • 130407: [사소한] 설정>파일: 제외 패턴을 (빈칸)으로 변경하면 삭제되지 않음
  • 133149: 정보/경고 수준 문제로 인해 작업 터미널이 실패로 표시됨.
  • 133567: 접근성: 찾기 참조의 최상위 트리 노드에 대한 레이블이 모두 "true"로만 읽힘
  • 133910: 셸 환경 확인 실패 또는 시간 초과 시 오류 표시
  • 133976: 프로토콜 URL을 통해 .code-workspace 열기 허용

감사합니다

마지막으로, 이번 달 VS Code에 기여해주신 다음 분들께 진심으로 감사드립니다.

이슈 추적에 대한 기여

vscode 기여

vscode-eslint 기여

vscode-html-languageservice에 대한 기여

vscode-json-languageservice 기여

vscode-languageserver-node에 기여

vscode-pull-request-github 기여

  • @burkeholland (Burke Holland)
    • 수정 #2259 PR #2909
    • 업스트림에 대한 원격 링크 유형 존중 PR #2929
    • PR 제목이 줄 바꿈될 때 버튼 크기가 올바르게 보이지 않음 PR #2966
    • 포커스되지 않은 상태에서 할당 대상에 포커스 테두리가 사용됨 PR #2967
    • 커밋 선택 생성 가로 간격이 너무 높음 PR #2970
    • 체크 SVG 수정, 올바르게 보이지 않음 #2950 PR #2971
    • 작은 탭에서 몇 분 전에 생성된 PR이 잘림 PR #2985
    • 브랜치 이름 소문자화 PR #2986
    • 건너뛴 상태 확인이 보류 중으로 표시됨 PR #3005
  • @lgarron (Lucas Garron): GitHub 영구 링크: 범위가 한 줄인 경우 줄 번호를 중복 제거합니다. PR #2980
  • @moshfeu (Mosh Feu): fix: 보류 중인 검사를 "표시" 버튼/링크 접근 가능하게 만들기 PR #2972

vscode-references-view에 대한 기여

vscode-vsce 기여

language-server-protocol 기여

monaco-editor-webpack-plugin에 대한 기여

English 한국어 中文(简体)
© . This site is unofficial and not affiliated with Microsoft.