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

2022년 6월 (버전 1.69)

업데이트 1.69.1: 이번 업데이트에서는 다음 이슈들을 해결했습니다.

업데이트 1.69.2: 이번 업데이트에서는 다음 이슈들을 해결했습니다.

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

Visual Studio Code 2022년 6월 릴리스에 오신 것을 환영합니다. 이번 버전에는 많은 업데이트가 포함되어 있으며, 주요 내용은 다음과 같습니다.

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

릴리스 파티 시청: VS Code 팀이 새로운 기능에 대해 논의하는 내용을 들어보세요. YouTube 채널에서 이벤트 녹화본을 확인할 수 있습니다.

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

워크벤치

3-way 병합 편집기

이번 릴리스에서는 3-way 병합 편집기에 대한 작업을 계속했습니다. 이 기능은 git.mergeEditor를 true로 설정하여 활성화할 수 있으며, 향후 릴리스에서는 기본값으로 활성화될 예정입니다.

병합 편집기를 사용하면 Git 병합 충돌을 신속하게 해결할 수 있습니다. 활성화되면 소스 제어 보기에서 충돌하는 파일을 클릭하여 병합 편집기를 열 수 있습니다. **상대방** 또는 **나의** 변경 사항을 수락하고 병합하는 체크박스가 제공됩니다.

병합 편집기에서는 모든 언어 기능(진단, 중단점, 테스트 포함)을 사용할 수 있으므로 병합 결과의 모든 문제에 대한 즉각적인 피드백을 받을 수 있습니다.

결과를 직접 편집할 수도 있습니다. 예상대로 체크박스가 업데이트되는 것을 확인하세요.

병합 편집기를 닫거나 병합을 수락할 때, 모든 충돌이 해결되지 않은 경우 경고가 표시됩니다.

병합 편집기는 단어 단위 병합을 지원합니다. 변경 사항이 서로 겹치지 않는 한 양쪽을 모두 적용할 수 있습니다. 삽입 순서가 중요한 경우 순서를 바꿀 수 있습니다. 언제든지 충돌을 수동으로 해결할 수도 있습니다.

여러분의 피드백을 기다립니다! 병합 충돌을 공유하려면 **Merge Editor (Dev): Copy Contents of Inputs, Base and Output from JSON** 명령을 사용하고 GitHub 이슈에 내용을 붙여넣으세요.

명령 센터

명령 센터가 다듬어졌으며 이제 사용해 볼 준비가 되었습니다. window.commandCenter 설정을 통해 활성화하십시오.

명령 센터는 일반 제목 표시줄을 대체하며 프로젝트 내에서 파일을 빠르게 검색할 수 있습니다. 메인 섹션을 클릭하면 최근 파일과 검색 상자가 있는 빠른 열기 드롭다운이 표시됩니다.

The Command Center and its hover message atop the window

테마: GitHub 테마

명령 센터에는 오른쪽에 '?'를 통해 빠른 액세스 옵션을 표시하는 버튼도 있습니다. 왼쪽에는 편집기 기록을 탐색하는 **뒤로 가기** 및 **앞으로 가기** 버튼이 있습니다.

설정 편집기 수정됨 표시기

설정 편집기에 이제 설정에 언어 재정의가 있을 때 표시됩니다. 맥락을 위해 언어 재정의는 항상 언어에 구애받지 않는 재정의보다 우선하므로, 특정 유형의 파일에 대한 설정의 값이 설정 동작에 영향을 미치지 않는 것처럼 보인다면 해당 설정에 언어 재정의가 있을 수 있습니다.

표시기 텍스트가 더 명확하고 간결하게 변경되었습니다. 아래의 짧은 동영상은 새로운 **다른 곳에서 수정됨** 표시기를 보여줍니다. 표시기에 마우스를 올리면 적용 가능한 경우 언어 재정의를 보여주는 호버가 나타납니다. 동영상은 나중에 **기본값 변경됨** 텍스트와 함께 새로운 기본 재정의 표시기를 보여줍니다.

테마: Light Pink

방해 금지 모드

새로운 방해 금지 모드는 활성화되면 오류가 아닌 모든 알림 팝업을 숨깁니다. 진행률 알림은 상태 표시줄에 자동으로 표시됩니다. 숨겨진 알림은 알림 센터에서 여전히 볼 수 있습니다.

Do Not Disturb mode shown in the Status bar and Notification center

알림 센터(상태 표시줄 오른쪽의 종 모양 아이콘 선택)를 열고 빗금 친 종 모양 아이콘을 클릭하여 방해 금지 모드를 전환할 수 있습니다. 방해 금지 모드는 빗금 친 종 모양 아이콘으로 상태 표시줄에 표시됩니다.

밝은 테마와 어두운 테마 전환

새로운 명령 **Preferences: Toggle between Light/Dark Themes**를 사용하여 선호하는 밝은 테마와 어두운 테마를 전환할 수 있습니다. 밝은 테마일 때 명령은 어두운 테마로 전환되며, 그 반대도 마찬가지입니다.

고대비 테마를 사용하는 경우, 명령은 고대비 상태를 유지하고 반대 색상 테마의 선호하는 고대비 테마로 전환됩니다.

선호하는 테마는 설정으로 정의됩니다.

  • workbench.preferredDarkColorTheme
  • workbench.preferredLightColorTheme
  • workbench.preferredHighContrastColorTheme
  • workbench.preferredHighContrastLightColorTheme

미니맵 컨텍스트 메뉴

VS Code 미니맵은 편집기 측면에 소스 코드 파일의 개략적인 개요를 표시합니다. View: Toggle Minimap 명령을 통해 미니맵 표시를 전환하거나 Editor > Minimap: Enabled (editor.minimap.enabled) 설정을 사용하여 미니맵을 완전히 비활성화할 수 있었습니다. 이번 릴리스에서는 미니맵을 쉽게 표시하거나 숨길 수 있는 컨텍스트 메뉴가 추가되었습니다.

Minimap context menu

Size (editor.minimap.size), Scale (editor.minimap.scale), Slider (editor.minimap.showSlider) 설정을 사용하여 모양을 조정할 수도 있습니다. 미니맵이 숨겨져 있어도 오른쪽 여백을 마우스 오른쪽 버튼으로 클릭하여 컨텍스트 메뉴를 표시할 수 있습니다.

공유 메뉴

File > Share 하위 메뉴에서 Copy vscode.dev Link 명령을 사용하여 열려 있는 GitHub 리포지토리에 대한 vscode.dev 링크를 빠르게 가져올 수 있습니다. Share 하위 메뉴는 편집기 컨텍스트 메뉴에서도 사용할 수 있습니다.

터미널

셸 통합

1월 릴리스부터 미리 보기 상태였던 PowerShell, bash, zsh에 대한 셸 통합이 이제 미리 보기에서 벗어났습니다! 1.70 릴리스에서는 기본값으로 활성화할 예정입니다.

셸 통합 기능을 활성화하려면 설정 편집기에서 **Terminal > Integrated > Shell Integration : Enabled**를 선택하거나 settings.json에서 값을 설정하십시오.

"terminal.integrated.shellIntegration.enabled": true

셸 통합을 통해 VS Code 터미널은 셸 내부에서 발생하는 상황을 더 잘 이해하여 더 많은 기능을 활성화할 수 있습니다. 셸 통합의 목표 중 하나는 **추가 구성이 필요 없이** 작동하도록 하는 것이었습니다. 이는 설정이 활성화되었을 때 셸 인수 및/또는 환경 변수를 통해 셸 세션에 셸 통합 스크립트를 자동으로 "주입"하여 달성되었습니다. 하위 셸이나 일부 복잡한 셸 설정과 같이 이 기능이 작동하지 않는 일부 경우가 있지만, 이러한 고급 사용 사례를 위한 수동 설치 경로도 제공합니다.

현재 셸 통합에서 제공하는 기능 요약입니다.

명령 꾸미기와 개요 규칙

셸 통합은 터미널 내에서 실행되는 명령의 종료 코드를 가져올 수 있습니다. 이 정보를 사용하여 줄 왼쪽의 꾸미기가 명령이 성공했는지 실패했는지를 나타냅니다. 이러한 꾸미기는 편집기에서와 마찬가지로 스크롤 바의 개요 규칙에도 표시됩니다.

Blue circles appear next to successful commands, red circles with crosses appear next to failed commands. The color of the circles appears in the scroll bar

꾸미기는 명령 재실행과 같은 상황별 작업을 지원할 수 있습니다.

Clicking a successful command decoration shows a context menu containing items: Copy Output, Copy Output as HTML, Rerun Command and How does this work?

명령 꾸미기는 다음 설정을 사용하여 구성할 수 있습니다.

  • terminal.integrated.shellIntegration.decorationIcon
  • terminal.integrated.shellIntegration.decorationIconSuccess
  • terminal.integrated.shellIntegration.decorationIconError

명령 탐색

셸 통합에 의해 감지된 명령은 명령 탐색 기능(Ctrl/Cmd+Up, Ctrl/Cmd+Down)으로 피드되어 더 안정적인 명령 위치를 제공합니다. 이 기능을 사용하면 명령 간을 빠르게 탐색하고 해당 출력을 선택할 수 있습니다.

최근 명령 실행

Terminal: Run Recent Command 명령은 다양한 소스의 기록을 빠른 선택으로 표시하여 셸의 역검색(Ctrl+R)과 유사한 기능을 제공합니다. 최근 명령은 현재 세션의 기록, 이 셸 유형의 이전 세션 기록, 일반 셸 기록 파일에서 가져옵니다.

The "run recent command" command shows a Quick Pick with commands ran previously that can be filtered similar to the Go to File command

명령의 기타 기능

  • 현재 세션 섹션에는 빠른 선택 오른쪽에 명령 출력을 편집기에서 열 수 있는 클립보드 아이콘이 있습니다.
  • Alt 키를 누른 상태로 명령을 실행하지 않고 터미널에 텍스트를 작성할 수 있습니다.
  • 이전 세션 섹션에 저장되는 기록의 양은 terminal.integrated.shellIntegration.history 설정에 의해 결정됩니다.

현재 Run Recent Command에 할당된 기본 키 바인딩은 없지만, 예시로 다음 키 바인딩으로 Ctrl+Space에 연결할 수 있습니다.

{
    "key": "ctrl+space",
    "command": "workbench.action.terminal.runRecentCommand",
    "when": "terminalFocus"
},

최근 디렉터리로 이동

최근 명령 실행 기능과 유사하게, Terminal: Go to Recent Directory 명령은 방문한 디렉터리를 추적하여 필터링하고 해당 디렉터리로 빠르게 이동(cd)할 수 있습니다.

<video src="/assets/updates/1_69/terminal-si-go-to-dir.mp4" autoplay loop controls muted title="Go to Recent Directory 명령은 이전에 탐색했던 디렉터리가 있는 빠른 선택을 표시하며, 하나를 선택하면 "cd path"를 실행합니다.">

Alt 키를 누른 상태로 명령을 실행하지 않고 터미널에 텍스트를 작성할 수 있습니다.

현재 작업 디렉터리 감지

셸 통합은 현재 작업 디렉터리가 무엇인지 알려줍니다. 이 정보는 이전에는 Windows에서 많은 해킹 없이 결정하는 것이 불가능했으며 macOS 및 Linux에서는 폴링이 필요하여 성능에 좋지 않았습니다.

현재 작업 디렉터리는 상대 링크를 해결하고, 최근 명령이 실행된 디렉터리를 표시하며, 분할된 현재 작업 디렉터리 "terminal.integrated.splitCwd": "inherited" 기능을 지원하는 데 사용됩니다.

셸 설정에 대한 지원 증가

이번 릴리스에서는 bash-preexec와의 통합을 개선하고, powerlevel10k에 대한 기본 지원을 추가했으며, 셸 통합이 작동하지 않는 더 많은 경우를 감지하고 해당 기능을 우아하게 비활성화했습니다. 향후 이 분야에서 지속적인 개선이 이루어질 것으로 예상합니다.

SetMark 시퀀스 지원

터미널은 이제 iTerm2에서 원래 생성된 'OSC 1337 ; SetMark ST' 시퀀스를 지원하므로, 스크롤 바뿐만 아니라 줄의 왼쪽에도 표시를 추가할 수 있습니다.

When the sequence is written to the terminal, a small grey circle will appear to the left of the command, with a matching annotation in the scroll bar

테마: Sapphire Theme

스크립트에서 이 기능을 트리거하는 몇 가지 예입니다.

  • bash: echo -e 'Mark this line\x1b]1337;SetMark\x07'
  • pwsh: Write-Host "Mark this line`e]1337;SetMark`a"

간단한 Powerline 글리프의 사용자 지정 렌더링

일반적인 4개의 꺾쇠 괄호 Powerline 기호가 GPU 가속이 터미널에서 활성화될 때 상자 그리기 및 블록 문자와 유사하게 사용자 지정 렌더링됩니다. 이는 여러 가지 이점을 제공합니다.

  • "Powerline"을 망치는 보기 흉한 빨간색 또는 파란색 윤곽선이 발생할 수 있는 서브픽셀 앤티 앨리어싱이 절대 사용되지 않습니다.
  • 패치된 글꼴을 설치하지 않아도 이러한 문자가 작동합니다.
  • 줄 높이가 이 문자에 영향을 미칩니다.

이전

Line height would not be respected, leading to a Powerline symbol with a different height to adjacent cells. Additionally, a blue outline could appear when sub-pixel anti-aliasing was used

이후

Line height is now respected and greyscale anti-aliasing is used for improved rendering

VS Code 메시지에 대한 일관된 형식

이전에는 VS Code 자체에서 쓴 메시지(프로세스에서 쓴 것이 아님)가 여러 다른 형식을 사용했습니다. 이제 모든 경우에 크고 명확한 형식과 더 부드러운 형식으로 일관성을 유지합니다.

Loud formatting starts the line with an asterisk with the inverted style, followed by a message using a blue background

Subtle formatting starts the line with an asterisk with the inverted style, followed by a message using the default background

접근성 개선 사항

이번 반복에서 터미널에 대한 접근성 개선이 몇 가지 이루어졌습니다.

  • Terminal: Open Detected Link... 명령에서 이제 기본적으로 더 많은 링크를 사용할 수 있으며, 나머지 터미널 버퍼를 검색할 수 있습니다.
  • Terminal: Run Recent Command 명령은 이제 Alt 키를 누른 상태로 결과를 실행하지 않고 명령에 입력할 수 있습니다.
  • 터미널의 찾기 기능이 화면 판독기 알림을 개선했습니다.
  • 수정자 없이 탐색 모드(Ctrl+Up) 내에서 위아래를 사용할 수 있습니다.
  • 페이지 위/아래를 이제 탐색 모드(Ctrl+Up)에서 페이지 단위로 스크롤하는 데 사용할 수 있습니다.

프로세스 재연결 및 복구 개선

터미널 지속성이 UX 및 안정성 개선 사항을 받았습니다.

  • 이전에는 창을 n번 다시 로드하면 n개의 세션 복원 메시지가 표시되었습니다. 이제 해당 세션에 입력이 있었을 때만 세션 복원 메시지가 표시됩니다.
  • 이전에 날짜가 포함되었던 세션 복원 메시지가 소음을 줄이기 위해 단순히 "History restored"로 줄였습니다.
  • 환경 변수 변경을 사용자에게 알리는 "환경 변수 수집" 기능(예: 자동 Git 인증 지원)은 이제 다시 로드해도 작동합니다.

작업

꾸미기

몇 번의 반복 전에, 터미널 탐색 개선을 위해 셸 통합 기능 덕분에 터미널 버퍼와 개요 규칙에 꾸미기를 추가했습니다. 이제 꾸미기는 작업의 관심 지점을 표시하며, 명령 탐색 기능(Ctrl/Cmd+Up, Ctrl/Cmd+Down)으로 점프할 수 있습니다.

작업 시작/중지 시, 작업 시작 옆에 꾸미기가 나타나며 결과 코드에 따라 스타일이 지정됩니다.

A task fails and an error decoration is added. A task succeeds and a success decoration is added

감시 작업의 경우, 각 컴파일에 대해 처음 보고된 문제 옆에 꾸미기가 나타납니다.

A watch task's first error is marked with a decoration

아이콘 및 색상 지원

작업에 Codicon id와 터미널 ANSI color 속성을 사용하여 icon을 설정할 수 있습니다. 예시:

{
  "label": "test",
  "type": "shell",
  "command": "echo test",
  "icon": { "id": "light-bulb", "color": "terminal.ansiBlue" }
}

The task custom icon appears in the terminal tabs list

kind 속성이 test로 설정된 작업은 기본적으로 beaker 아이콘을 사용합니다.

소스 제어

Git 리포지토리에 대한 커밋 "작업 버튼"

1.61 릴리스에서는 Git 리포지토리에 대해 **Publish** 및 **Sync Changes** "작업 버튼"이 추가되었습니다. 이번 마일스톤에서는 기본 작업과 일련의 보조 작업을 가진 **Commit** 버튼이 추가되었습니다. 보조 작업은 git.postCommitCommand 설정을 사용하여 제어할 수 있으며, 커밋 후 푸시 또는 동기화도 수행할 수 있습니다.

Commit "작업 버튼"이 추가됨에 따라, 소스 제어 보기에서 표시되는 Git 작업 버튼을 제어하는 데 사용할 수 있는 새로운 설정 git.showActionButton이 있습니다. 여전히 확장 프로그램이 소스 제어 공급자를 구현하는 모든 작업 버튼의 가시성을 전역적으로 비활성화하기 위해 일반 scm.showActionButton 설정을 사용할 수 있습니다.

편집기를 사용하여 커밋 메시지 작성

이번 마일스톤에서는 커밋 입력란에 메시지가 제공되지 않을 때 전체 텍스트 편집기를 사용하여 커밋 메시지를 작성할 수 있습니다. 이 새로운 흐름을 사용하려면 커밋 메시지를 제공하지 않고 Commit 버튼을 클릭하세요.

이제 편집기에서 커밋 메시지를 작성할 수 있습니다. 커밋 메시지를 수락하고 커밋 작업을 완료하려면 편집기 탭을 닫거나 편집기 도구 모음에서 Accept Commit Message 버튼을 선택합니다. 커밋 작업을 취소하려면 텍스트 편집기의 내용을 지우고 편집기 탭을 닫거나, 편집기 도구 모음에서 Discard Commit Message 버튼을 선택할 수 있습니다.

git.useEditorAsCommitInput 설정을 전환하여 이 새로운 흐름을 비활성화하고 이전 경험(빠른 입력 컨트롤 사용)으로 되돌릴 수 있습니다. 설정을 변경한 후에는 변경 사항을 적용하려면 VS Code를 다시 시작해야 합니다.

통합 터미널에서 실행되는 git commit 명령에 대해서도 동일한 흐름을 사용하려면 git.terminalGitEditor 설정을 활성화하십시오. 설정을 활성화한 후에는 터미널 세션을 다시 시작해야 합니다.

브랜치 보호 표시기

지난 마일스톤에서는 특정 브랜치를 보호하도록 구성하는 데 사용할 수 있는 git.branchProtection 설정을 추가했습니다. 이번 마일스톤에서는 보호된 브랜치에 대한 시각적 표시기(잠금 아이콘)가 상태 표시줄과 브랜치 선택기에 추가되었습니다.

상태 표시줄

The branch protection icon is shown in the Status bar

브랜치 선택기

The branch protection icon is shown in the branch picker

디버깅

향상된 단계별 진입 대상 UI

일부 디버거는 줄에서 일시 중지될 때 특정 함수 호출로 바로 단계별 실행할 수 있습니다. 이번 반복에서는 이 UI를 개선했습니다.

  • 소스 줄의 대상 영역을 마우스 오른쪽 버튼으로 클릭하고 Step Into Target을 선택하면 대상이 있는 경우 자동으로 해당 대상으로 단계별 실행됩니다.
  • 명령 팔레트와 ⌘F11 (Windows, Linux Ctrl+F11) 키보드 단축키에서 Debug: Step Into Target 명령을 사용할 수 있습니다.

디버그 콘솔 탐색

빠른 액세스 메뉴를 통한 콘솔 액세스

이제 디버그 콘솔 목록을 볼 수 있는 빠른 액세스 메뉴가 있습니다. 메뉴에서 콘솔 이름을 선택하여 하단 패널에 표시할 수 있습니다. 여기서 콘솔 이름을 검색하고 필터링할 수 있습니다.

테마: GitHub Dark Dimmed

이 빠른 액세스 메뉴에 액세스하는 세 가지 방법이 있습니다.

  • 빠른 열기 메뉴(⌘P (Windows, Linux Ctrl+P))에서 ?를 입력한 다음 디버그 콘솔 보기를 선택합니다.

  • Debug: Select Debug Console 명령을 사용합니다.

  • 빠른 열기 메뉴에서 debug consoles (뒤에 공백 문자 포함)를 직접 입력합니다.

보기 메뉴를 통한 콘솔 액세스

기존 보기 메뉴에서도 디버그 콘솔 목록에 액세스할 수 있습니다. 빠른 열기 메뉴에서 view (뒤에 공백 문자 포함)를 입력하고 **Debug Console** 패널 헤더까지 스크롤합니다. 사용 가능한 디버그 콘솔 목록이 표시됩니다.

콘솔 간 전환

이제 ⇧⌘[ (Windows, Linux Ctrl+PageUp)을 사용하여 이전 디버그 콘솔로 이동하고 ⇧⌘] (Windows, Linux Ctrl+PageDown)을 사용하여 다음 콘솔로 이동할 수 있습니다.

로드된 스크립트 검색 및 필터링

이전에는 Run and Debug 메뉴에서 트리 보기로 로드된 스크립트만 볼 수 있었습니다. 이제 새로운 Debug: Open Loaded Script... 명령을 사용하여 스크립트를 검색하고 이동할 수 있습니다. Go to File... 명령과 동일하게 작동하지만, 로드된 스크립트로 이동할 수 있습니다.

JavaScript 디버깅

소스 맵 전환

이제 호출 스택 보기 제목에 있는 🧭 나침반 아이콘을 클릭하여 소스 맵을 쉽게 켜고 끌 수 있습니다. 소스 맵이 꺼져 있으면 소스 코드에 설정된 중단점이 계속 작동하지만 컴파일된 코드의 해당 위치로 이동하며, 디버거는 소스 코드 대신 컴파일된 코드를 단계별 실행합니다.

테마: Codesong

소스 맵이 꺼져 있을 때 디버그 도구 모음에 유사한 버튼이 표시되어 다시 켤 수 있습니다. 전환 상태는 작업 영역에 유지됩니다.

toString() 변수 미리 보기

변수 또는 속성이 사용자 지정 toString() 메서드를 가지고 있으면, 해당 메서드가 호출되어 **VARIABLES** 보기 및 호버에서 미리 보기가 렌더링됩니다. 이는 좋은 문자열 표현을 가진 복잡한 유형의 일반 객체 미리 보기보다 개선된 것입니다.

예를 들어, VS Code의 Range는 한눈에 더 쉽게 이해할 수 있도록 toString 메서드를 가지고 있습니다.

Displaying the toString() method output in the Variables view

단계별 진입 대상 지원

JavaScript 디버거는 이제 Step Into Target을 지원하여 코드 줄의 함수 호출로 쉽게 단계별 진입할 수 있습니다.

Step Into Targets dropdown

이 기능은 Debug: Step Into Target 명령(⌘F11 (Windows, Linux Ctrl+F11))을 통해 액세스하거나 줄을 마우스 오른쪽 버튼으로 클릭하여 액세스할 수 있습니다.

JavaScript 디버깅에서 바인딩되지 않은 중단점 경고 아이콘

TypeScript/JavaScript 프로젝트를 디버깅 중이고 소스 맵 구성이나 중단점 바인딩에 문제가 있는 경우, VS Code는 이제 중단점 보기에서 힌트 메시지와 함께 JavaScript 디버거의 중단점 문제 해결 도구 링크를 표시합니다. 편집기의 회색 중단점 아이콘에 마우스를 올렸을 때도 힌트가 표시됩니다.

hovering the breakpoint warning icon

이 힌트를 표시하는 API가 최종 확정되면 다른 디버거도 자체 적절한 메시지로 힌트를 표시할 수 있습니다.

편집기

미리 보기를 사용한 리팩터링

이전에는 리팩터링에서 적용될 변경 사항을 검토할 방법이 없었습니다. 리팩터링 경험을 개선하기 위해 이제 명령 팔레트에서 액세스할 수 있는 Refactor with Preview 명령이 있습니다. Refactor with Preview...는 Refactor... 명령과 동일하게 작동하지만, 리팩터링 미리 보기 패널을 엽니다. 사용자는 리팩터링 미리 보기를 선택하여 편집기에서 리팩터링 미리 보기를 더 크게 볼 수 있습니다. 이번 반복에서는 주로 리팩터링의 코드 변경 사항 미리 보기에 중점을 두었으며, 향후 기능과 사용자 지정 코드 액션 메뉴 제어가 이어질 예정입니다.

Refactor preview panel showing a refactoring that results in two changes

Refactor with Preview... 명령이 워크벤치에 패널을 열고 리팩터링 미리 보기 편집기 보기를 엽니다.

언어

Markdown에서 꺾쇠 괄호 링크 지원

Markdown에서는 꺾쇠 괄호를 사용하여 공백이나 다른 특수 문자를 포함하는 링크 대상을 작성할 수 있습니다.

[Some link](<path to file with spaces.md>)

이번 반복에서는 꺾쇠 괄호 링크가 편집기에서 올바르게 강조 표시되고 클릭 가능하도록 지원을 개선했습니다.

Emmet 인라인 완성 설정

Emmet에는 인라인 완성이 파일에서 발생하도록 하는 새로운 설정 emmet.useInlineCompletions이 있습니다. 현재로서는 HTML 및 CSS 파일 편집에만 설정을 활성화하는 것이 좋습니다.

아래의 짧은 동영상은 모든 항목에 대해 editor.quickSuggestions 설정이 off로 설정된 상태에서 녹화되었습니다.

언어 표시기의 JSON 알림

표시할 수 있는 접기 범위, 문서 기호 또는 색상 장식자가 너무 많을 때 VS Code는 더 이상 알림을 사용하지 않고 JSON 언어 표시기를 사용하여 사용자에게 알립니다.

JSON notifications from the Status bar JSON language indicator

HTML 최종 새 줄 서식 지정 설정 변경

html.format.endWithNewline 설정은 files.insertFinalNewline으로 대체되었습니다.

files.insertFinalNewline은 모든 프로그래밍 언어에 적용됩니다. 언어별로 다른 설정을 원하면 언어 범위를 사용할 수 있습니다.

{
  "[html]": {
    "files.insertFinalNewline": true
  }
}

노트북

노트북 내 확장 추천 지원

필요한 확장이 설치되지 않은 경우 노트북을 처음 시작하는 경험을 개선하기 위해 확장 추천 흐름을 업데이트하고 노트북 창에서 직접 확장을 설치할 수 있도록 했습니다. 이를 통해 VS Code에서 설치되지 않은 확장부터 실행 가능한 셀까지의 단계를 크게 줄일 수 있습니다. 이번 반복에서는 Python Jupyter 노트북에 대해 이 경험을 활성화했으며, 더 많은 노트북 유형과 언어가 이어질 것입니다.

A Quick Pick depicting two entries. The top entry is selected that has a light bulb to its left and says 'Install suggested extensions Python + Jupyter'

주석

편집기 주석 토글

새로운 명령 Comments: Toggle Editor Commenting은 주석 범위 여백 꾸미기, 줄 위에 뜨는 "+" 기호, 모든 편집기 주석 위젯을 포함한 모든 편집기 주석 기능을 토글합니다. 주석은 Zen 모드에서 자동으로 비활성화됩니다.

여러 줄 주석을 위한 드래그

주석 추가 "+" 버튼을 드래그하여 여러 줄 주석을 추가할 수 있습니다.

엔터프라이즈

Windows 업데이트 모드 그룹 정책

VS Code는 이제 Windows 레지스트리 기반 그룹 정책을 지원하므로, 시스템 관리자는 자신이 관리하는 컴퓨터에 정책을 생성하고 배포할 수 있습니다.

지원되는 첫 번째 VS Code 정책은 UpdateMode이며, 이는 update.mode 설정을 재정의하고 새 버전이 릴리스될 때 VS Code가 자동으로 업데이트되는지 여부를 제어합니다.

자세한 내용은 기업용 엔터프라이즈 설명서의 Windows 그룹 정책을 참조하세요.

웹용 VS Code

테마 테스터, 내장 테마 지원

테마 테스터는 vscode.dev의 경로로, 테마를 설치하지 않고도 표시하고 시도하는 데 사용할 수 있습니다. 이는 확장 프로그램 ID와 테마 이름을 지정하여 마켓플레이스의 테마 확장 프로그램에 대해 제공되었습니다. 예를 들어, GitHub 테마 확장 프로그램(확장 프로그램 ID github.github-vscode-theme)의 "GitHub Dark Default" 테마를 보려면 다음 URL로 vscode.dev를 시작해야 합니다.

https://vscode.dev/editor/theme/github.github-vscode-theme/GitHub%20Dark%20Default

Color theme tester with vscode.dev showing GitHub Theme extension GitHub Dark Default

테마 테스터는 이제 VS Code의 내장 테마와 함께 사용할 수도 있습니다. 확장 프로그램 ID 자리 표시자에는 vscode.theme-defaults를 사용하고, 확인하려는 테마 이름을 사용합니다.

예를 들어, "High Contrast Light" 테마를 테스트하려면 다음 URL을 사용합니다.

https://vscode.dev/editor/theme/vscode.theme-defaults/Default%20High%20Contrast%20Light

확장 프로그램에 대한 부분 지역화 지원

이전 반복에서 vscode.dev에서 핵심 제품에서 제공하는 문자열에 대한 지역화를 도입했습니다. 이번 반복에서는 확장 프로그램이 확장 프로그램 매니페스트에서 제공하는 정적 문자열을 더 많이 포함합니다. 확장 프로그램에서 제공하는 다른 문자열 세그먼트(소스 코드에서 선언된 문자열)는 여전히 지역화해야 하므로 다음 반복에서도 해당 작업을 계속할 것입니다.

표시 언어 구성 명령

일부 사용자는 브라우저에서 사용하는 언어를 구성할 수 없습니다. 이 문제를 해결하기 위해 VS Code for the Web에는 브라우저에서 설정한 기본 언어를 재정의할 수 있는 Configure Display Language 명령이 있습니다.

또한 Clear Display Language Preference 명령을 사용하여 이 재정의를 제거할 수 있습니다.

VS Code Server(비공개 미리 보기)

VS Code에서는 사용자가 가장 생산적인 환경을 원활하게 활용할 수 있도록 노력합니다. VS Code 원격 개발 확장을 사용하면 Windows Subsystem for Linux(WSL), SSH를 통한 원격 머신, dev 컨테이너에서 직접 작업할 수 있습니다. 이러한 확장 프로그램은 원격 환경에 서버를 설치하여 로컬 VS Code가 원격 소스 코드 및 런타임과 원활하게 상호 작용할 수 있도록 합니다.

이제 원격 확장 프로그램에서 사용하는 것과 동일한 기본 서버를 기반으로 하고 대화형 CLI와 같은 추가 기능 및 SSH 연결 없이 vscode.dev로의 안전한 연결을 용이하게 하는 독립형 "VS Code Server"의 비공개 미리 보기 버전을 제공합니다.

The VS Code Server's help menu and a remote VS Code connection

우리의 궁극적인 목표는 현재 사용하고 계신 code CLI를 향상시켜 프로젝트가 어디에 저장되어 있든 데스크톱 및 웹 VS Code 인스턴스를 모두 열 수 있도록 하는 것입니다. 이 목표를 향해 적극적으로 노력하는 동안, VS Code Server는 여러분의 피드백을 받기 위해 비공개 미리 보기로 출시하게 되어 기쁜 중요한 이정표입니다.

VS Code Server 시작 방법에 대한 자세한 내용은 블로그 게시물 및 동영상에서 확인할 수 있으며, 자세한 내용은 설명서에서 검토할 수 있습니다.

확장 프로그램 기여

ESLint

ESLint 확장 프로그램 버전 2.2.6이 출시되었습니다. 다양한 버그 수정 외에도 이제 모든 지원되는 ESLint 언어에 대해 노트북 셀에서 린팅 지원이 제공됩니다.

ESlint validating notebook cells

Jupyter

IPyWidgets

Python 외의 커널(예: Common Lisp 및 IHaskell)에 대해서도 IPyWidgets 지원이 추가되었습니다.

이미지, 스크립트 등 리소스 로딩과 관련된 여러 IPyWidget 문제가 해결되어 VegaFusion, ipyleaflet, Chemiscope, mobilechelonian, ipyturtle와 같은 위젯 지원이 향상되었습니다.

기타 주목할 만한 IPyWidget 수정 사항으로는 Jupyter Output 위젯 내에 복잡하고 중첩된(대화형 포함) 출력을 표시하는 기능이 개선되었습니다.

웹 확장

웹 버전 Jupyter 확장 프로그램의 핵심 기능 중 더 많은 부분을 지원하기 위한 작업이 진행되었습니다.

이번 달에는 웹 확장 프로그램으로 다음 기능들이 이전되었습니다.

  • 대화형 창 내보내기
  • 대화형 창 디버깅
  • 대화형 창에서 접을 수 있는 셀

기능을 시험해보고 싶다면 다음 명령으로 Jupyter를 로컬 컴퓨터에서 실행하세요.

jupyter notebook --no-browser --NotebookApp.allow_origin_pat=https://.*\.vscode-cdn\.net

그런 다음 vscode.dev 내에서 Jupyter: 연결을 위한 Jupyter 서버 지정 명령을 사용하여 연결하세요.

더 자세한 정보(및 의견)는 이 토론 항목을 참조하세요.

GitHub Pull Requests 및 Issues

Pull Request 및 문제에 대한 GitHub Pull Requests and Issues 확장에 대한 더 많은 작업이 진행되었습니다. 이를 통해 Pull Request 및 문제를 작업하고, 생성하고, 관리할 수 있습니다. 이번 릴리스의 주요 내용은 다음과 같습니다.

  • 풀 리퀘스트에 대한 브랜치를 무시할 수 있는 새 설정 "githubPullRequests.ignoredPullRequestBranches"가 추가되었습니다.
  • 설정 "githubPullRequests.pushBranch"를 사용하여 PR을 생성할 때 "브랜치 게시?" 대화 상자를 건너뛸 수 있습니다.
  • 이제 개요 편집기에 자동 병합 체크박스가 제공됩니다.

확장 프로그램 0.46.0 릴리스에 대한 변경 로그를 확인하여 다른 주요 내용을 살펴보세요.

미리 보기 기능

TypeScript 4.8 지원

이번 업데이트에는 곧 출시될 TypeScript 4.8 릴리스에 대한 지원이 포함됩니다. TypeScript 팀이 현재 작업 중인 내용에 대한 자세한 내용은 TypeScript 4.8 반복 계획을 참조하세요.

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

Markdown 링크 유효성 검사

Markdown 파일의 링크 유효성 검사를 계속해서 다듬었습니다. 이 실험적 기능은 Markdown 파일에서 이미지나 헤더에 대한 깨진 링크를 찾는 데 도움이 될 수 있습니다.

여러 버그를 수정하고 성능을 개선하는 것 외에도, 기능을 더 명확하게 하기 위해 일부 설정을 이름을 변경했습니다. 새로운 설정 이름은 다음과 같습니다.

  • markdown.experimental.validate - 모든 링크 유효성 검사 기능의 활성화/비활성화.
  • markdown.experimental.validate.fileLinks.enabled - 로컬 파일에 대한 링크 유효성 검사 활성화/비활성화: [링크](/path/to/file.md)
  • markdown.experimental.validate.fileLinks.markdownFragmentLinks - 로컬 파일 링크의 프래그먼트 부분 유효성 검사 활성화/비활성화: [링크](/path/to/file.md#some-header)
  • markdown.experimental.validate.fragmentLinks.enabled - 현재 파일의 헤더에 대한 링크 유효성 검사 활성화/비활성화: [링크](#_some-header)
  • markdown.experimental.validate.referenceLinks.enabled - 참조 링크 유효성 검사 활성화/비활성화: [링크][ref].
  • markdown.experimental.validate.ignoreLinks - 유효성 검사를 건너뛸 링크 목록입니다. Markdown이 게시된 후에만 디스크에 존재하는 파일에 연결하는 경우 유용합니다.

한번 사용해 보시고 새로운 기능에 대한 의견을 알려주세요!

설정 프로필

지난 몇 달 동안 VS Code에서 커뮤니티의 가장 인기 있는 요청 중 하나인 설정 프로필 지원을 위해 노력해 왔습니다. 이번 마일스톤에서 workbench.experimental.settingsProfiles.enabled 설정을 통해 Insiders 릴리스에서 이 기능의 미리 보기가 가능함을 발표하게 되어 기쁩니다. 이 기능을 사용해 보시고 VS Code 리포지토리에 이슈를 생성하거나 이슈 #116740에 댓글을 달아 피드백을 공유해 주세요.

설정 프로필은 설정, 키보드 단축키, 확장 프로그램, 상태, 작업, 스니펫으로 구성됩니다. 웹, 머신러닝과 같은 다양한 개발 환경에 맞게 VS Code를 사용자 정의하거나 Python, Java와 같은 여러 프로그래밍 언어 교실, 또는 개인 모드(업무, 데모)에 맞게 사용자 정의하고 설정 프로필로 저장할 수 있습니다. 작업 중인 프로젝트, 수강 중인 강의 또는 발표 중일 때 여러 프로필로 여러 워크스페이스(폴더)를 동시에 열 수 있습니다.

아래는 웹 개발 환경에 맞게 VS Code를 사용자 정의하고 이를 바탕으로 설정 프로필을 만드는 과정을 보여줍니다.

여기에서는 개발 프로필에서 데모 프로필로 쉽게 전환하는 방법을 보여줍니다.

다음 그림과 같이 React 프로젝트는 웹 개발 프로필에서, Python 강의 프로젝트는 Python 강의 프로필에서 동시에 열 수 있습니다.

Multiple opened Profiles

설정 프로필 상태 표시줄 항목의 전경 및 배경색은 설정의 다음 색상 사용자 정의 키를 사용하여 사용자 정의할 수 있습니다.

"workbench.colorCustomizations": {
    "statusBarItem.settingsProfilesBackground": "#ce4918",
    "statusBarItem.settingsProfilesForeground": "#e0dfdb",
}

설정 기어 메뉴의 설정 프로필 하위 메뉴에서 사용 가능한 설정 프로필 제거... 작업을 사용하여 설정 프로필을 관리하고 제거할 수 있습니다.

Removing Settings Profiles

프로필별로 VS Code를 사용자 정의할 수 있지만, 애플리케이션 수준에서만 사용자 정의할 수 있는 설정도 있습니다. 예를 들어, update.mode, 언어 팩 확장 프로그램, 설정 동기화 사용 설정, 워크스페이스 신뢰 상태와 같은 모든 애플리케이션 범위 설정은 애플리케이션 수준에서 모든 프로필에 걸쳐 사용자 정의됩니다.

웹 및 데스크톱 VS Code에서 편집 세션 액세스

이번 마일스톤에서는 VS Code의 편집 세션 미리 보기를 발표합니다. 편집 세션을 사용하면 VS Code for Web, 데스크톱 VS Code 또는 여러 장치에서 VS Code를 사용할 수 있는 모든 곳에서 미커밋 변경 사항을 가지고 계속해서 리포지토리 작업을 진행할 수 있습니다.

예를 들어, 편집 세션을 사용하여 작업 변경 사항을 전송하고 액세스할 수 있습니다.

  • github.dev의 리포지토리에서 해당 리포지토리의 로컬 데스크톱 복제본으로.
  • Windows 장치의 리포지토리 복제본에서 macOS 장치의 해당 리포지토리 복제본으로.

편집 세션은 현재 workbench.experimental.editSessions.enabled 설정 뒤에 미리 보기 상태로 제공됩니다. 이 초기 릴리스에서는 다음 명령을 사용하여 작업 변경 사항을 저장하고 다시 시작할 수 있습니다.

  • 편집 세션: 현재 편집 세션 저장
  • 편집 세션: 마지막 편집 세션 다시 시작

편집 세션을 시작하려면 편집 세션: 현재 편집 세션 저장 명령을 사용하고 메시지가 표시되면 GitHub 또는 Microsoft 인증으로 로그인합니다. 그런 다음 다른 장치 또는 VS Code 인스턴스의 리포지토리에서 편집 세션: 마지막 편집 세션 다시 시작 명령을 사용하여 수정된 모든 파일의 작업 내용을 워크스페이스로 복원합니다. 언제든지 편집 세션: 로그아웃 명령을 사용하여 편집 세션에서 로그아웃할 수 있습니다.

편집 세션 환경을 계속 개선함에 따라, 직접 사용해 보시고 이슈 #141293에 의견을 남겨주시면 감사하겠습니다.

확장 프로그램 작성

vscode.d.ts 컬렉션 타입에 대한 반복 지원

vscode.d.ts의 컬렉션 타입을 더 쉽게 사용하기 위해 이번 반복에서 모든 타입을 반복 가능하게 만들었습니다. 이를 통해 for...of 루프와 스프레드를 이러한 타입과 함께 사용할 수 있습니다.

const data: vscode.DataTransfer = ...;
for (const [mime, item] of data) {
    const str = await item.asString();
    ...
}

새롭게 반복 가능해진 타입 전체 목록입니다.

  • DiagnosticCollection
  • DataTransfer
  • EnvironmentVariableCollection
  • TestItemCollection

확장 가능한 노트북 렌더러

노트북 렌더러를 사용하면 확장 프로그램이 노트북에서 셀과 출력이 렌더링되는 방식을 사용자 정의할 수 있습니다. 이번 반복에서는 노트북 렌더러 API를 확장하여 렌더러가 VS Code의 일부 내장 렌더러를 포함하여 다른 렌더러를 보강할 수 있도록 했습니다. 이를 통해 확장 프로그램은 전체 렌더러를 다시 구현하지 않고도 노트북 렌더링에 새 기능을 추가할 수 있습니다. 또한 사용자가 올바르게 렌더링된 콘텐츠를 보기 위해 새 렌더러 간에 전환할 필요가 없으므로 사용자 경험도 향상됩니다.

Notebook Extend Markdown Renderer Sample은 확장 프로그램이 이모티콘 지원을 통해 VS Code의 내장 Markdown 렌더러를 확장하는 방법을 보여줍니다. 주요 부분을 간단히 살펴보겠습니다!

확장 가능한 노트북 렌더러를 위한 API는 의도적으로 느슨하게 정의되어 있습니다. 시작하려면 저희 확장 프로그램이 새 노트북 렌더러를 제공해야 합니다. 기존 렌더러를 확장하므로 entrypoint 필드를 사용하여 확장할 렌더러의 ID(이 경우 VS Code의 내장 vscode.markdown-it-renderer)와 로드할 렌더러 스크립트의 경로를 모두 지정합니다.

"notebookRenderer": [
    {
        "id": "sample.markdown-it.emoji-extension",
        "displayName": "Markdown it Emoji renderer",
        "entrypoint": {
            "extends": "vscode.markdown-it-renderer",
            "path": "./out/emoji.js"
        }
    }
]

이제 vscode.markdown-it-renderer가 활성화될 때마다 이 렌더러가 활성화됩니다.

이제 vscode.markdown-it-renderer를 확장하기 위해 저희 렌더러는 기본 렌더러의 메서드를 호출할 수 있습니다. 이 메서드는 기본 렌더러에 따라 다릅니다. 이 경우 먼저 getRenderer를 사용하여 기본 렌더러를 가져온 다음, 렌더링에 사용하는 Markdown-It 인스턴스를 보강하기 위해 extendMarkdownIt을 호출합니다.

import type * as MarkdownIt from 'markdown-it';
import type { RendererContext } from 'vscode-notebook-renderer';

interface MarkdownItRenderer {
    extendMarkdownIt(fn: (md: MarkdownIt) => void): void;
}

export async function activate(ctx: RendererContext<void>) {
    // Acquire the base renderer
    const markdownItRenderer = await ctx.getRenderer('vscode.markdown-it-renderer') as MarkdownItRenderer | undefined;
    if (!markdownItRenderer) {
        throw new Error(`Could not load 'vscode.markdown-it-renderer'`);
    }

    // Load our Markdown-It extension
    const emoji = require('markdown-it-emoji');

    // Call the base renderer's extension method (extendMarkdownIt) to augment
    // the Markdown-It with emoji support.
    markdownItRenderer.extendMarkdownIt((md: MarkdownIt) => {
        return md.use(emoji, {});
    });
}

여기서 주목할 중요한 부분은 extendMarkdownIt이 기본 렌더러에서 반환되는 메서드라는 것입니다. 다른 확장 가능한 렌더러는 자체 확장 지점을 쉽게 반환할 수 있습니다.

VS Code의 내장 Markdown-It 렌더러를 확장하는 전체 예제는 Notebook Extend Markdown Renderer Sample에서 확인하세요.

DataTransfers에서 외부 파일 읽기

확장 프로그램은 이제 DataTransfer를 사용하여 외부 파일을 읽을 수 있습니다. 이는 트리 드래그 앤 드롭 API와 드롭 인투 에디터 API 제안에서 사용할 수 있습니다.

export class TestViewDragAndDrop implements vscode.TreeDataProvider<Node>, vscode.TreeDragAndDropController<Node> {

    public async handleDrop(target: Node | undefined, sources: vscode.DataTransfer, token: vscode.CancellationToken): Promise<void> {
        // Get a list of all files
        const files: vscode.DataTransferFile[] = [];
        sources.forEach((item) => {
            const file = item.asFile();
            if (file) {
                files.push(file);
            }
        });

        const decoder = new TextDecoder();

        // Print out the names and first 100 characters of the file
        for (const file of files) {
            const data = await file.data();
            const text = decoder.decode(data);
            const fileContentsPreview = text.slice(0, 100);
            console.log(file.name + ' — ' + fileContentsPreview + '\n');
        }

        ...
    }
}

웹뷰의 고대비 밝은 테마

이제 웹뷰에서 vscode-high-contrast-light CSS 클래스를 사용하여 고대비 밝은 색상 테마를 대상으로 할 수 있습니다.

.vscode-high-contrast-light .error {
    color: red;
}

vscode-high-contrast-light 클래스는 웹뷰의 body 요소에 자동으로 추가됩니다.

테스트 항목 레이블의 아이콘

표준 $(icon) 형식의 Codicons을 TestItem.label에서 사용하여 테스트 탐색기 보기 및 테스트 결과에 아이콘을 표시할 수 있습니다.

소스 제어 입력 상자 사용 가능 여부

확장 프로그램 작성자는 이제 enabled 속성을 사용하여 소스 제어 보기의 입력 상자 사용 가능 여부를 전환할 수 있습니다.

JSON 단어 패턴 변경

모든 언어에는 해당 언어에서 단어에 속하는 문자를 정의하는 단어 패턴이 있습니다. JSON은 문자열 리터럴의 따옴표와 전체 문자열 리터럴 내용을 포함한다는 점에서 다른 모든 언어와 달랐습니다. 이제 다른 언어와 마찬가지로 문자, 숫자 및 하이픈만 포함합니다.

이 변경은 선택 영역 확장(명령: 선택 영역 확장) 시의 문제를 해결하고, 문자열 내에서 단어 완성 기능을 허용하며, 일부 코드 제안 이상 현상을 수정합니다.

예를 들어, 코드 완성의 기본 교체 범위에 사용되는 단어 패턴에 의존하는 확장 프로그램은 모든 완성에 대한 교체 범위를 명시적으로 지정하도록 구현을 업데이트해야 합니다.

디버그 어댑터 프로토콜

  • Step Into Target 기능에 대한 사용자 경험을 개선하기 위해 DAP의 StepInTarget 타입에 추가 정보가 포함되었습니다. line, column, endLine, endColumn의 네 가지 속성을 통해 단계별 대상은 이제 해당 소스 범위에 연결될 수 있습니다.
  • 디버그 대상에 프로그램 인수를 전달하는 것은 두 가지 상충되는 목표로 인해 방해를 받습니다. 일부 사용자는 모든 문자를 디버그 대상에 전달하기를 원하고, 다른 사용자는 일부 문자를 사용하여 기본 셸과 통신하기를 원합니다. 두 사용 사례를 모두 더 잘 지원하기 위해 프로그램 인수의 특수 문자 이스케이핑을 제어하기 위해 DAP의 runInTerminal 요청을 작업하고 있습니다. 제안이 이미 이용 가능합니다. 이 DAP 추가 기능에 관심 있는 디버그 확장 프로그램 작성자라면 피드백을 남겨주시면 감사하겠습니다.
  • 또한 Debug Adapter Protocol의 몇 가지 설명서 문제를 해결했습니다. 여기에는 "클라이언트" 및 "falsy" 용어에 대한 명확화, 체크섬 및 날짜 문자열에 대한 더 정확한 사양, Source.origin에 대한 개선된 문구가 포함됩니다.

제안된 API

모든 마일스톤에는 새로운 제안 API가 제공되며 확장 저자는 이를 시험해 볼 수 있습니다. 항상 그렇듯이 피드백을 원합니다. 제안 API를 시험해 보는 단계는 다음과 같습니다.

  1. 시험하고 싶은 제안을 찾아 package.json#enabledApiProposals에 해당 이름을 추가하세요.
  2. 최신 vscode-dts를 사용하고 vscode-dts dev를 실행하세요. 그러면 해당 d.ts 파일이 작업 영역으로 다운로드됩니다.
  3. 이제 제안에 대한 프로그래밍을 할 수 있습니다.

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

붙여넣기 편집기 제공자

여러 커서로 작업할 때 더 쉽게 올바르게 구현할 수 있도록 documentPaste API 제안을 업데이트했습니다.

이 API를 사용하면 확장 프로그램이 텍스트 편집기 내에서 복사 및 붙여넣기 작업을 가로챌 수 있다는 점을 다시 한번 알려드립니다. 확장 프로그램은 붙여넣기 시 삽입되는 텍스트를 수정하는 데 사용할 수 있습니다. 문서 붙여넣기 확장 프로그램 샘플은 업데이트된 API를 시연합니다.

/**
 * Provider that maintains a count of the number of times it has copied text.
 */
class CopyCountPasteEditProvider implements vscode.DocumentPasteEditProvider {
  private readonly countMimeTypes = 'application/vnd.code.copydemo-copy-count';

  private count = 0;

  prepareDocumentPaste?(
    _document: vscode.TextDocument,
    _ranges: readonly vscode.Range[],
    dataTransfer: vscode.DataTransfer,
    _token: vscode.CancellationToken
  ): void | Thenable<void> {
    dataTransfer.set(this.countMimeTypes, new vscode.DataTransferItem(this.count++));
    dataTransfer.set('text/plain', new vscode.DataTransferItem(this.count++));
  }

  async provideDocumentPasteEdits(
    _document: vscode.TextDocument,
    _ranges: readonly vscode.Range[],
    dataTransfer: vscode.DataTransfer,
    _token: vscode.CancellationToken
  ): Promise<vscode.DocumentPasteEdit | undefined> {
    const countDataTransferItem = dataTransfer.get(this.countMimeTypes);
    if (!countDataTransferItem) {
      return undefined;
    }

    const textDataTransferItem = dataTransfer.get('text') ?? dataTransfer.get('text/plain');
    if (!textDataTransferItem) {
      return undefined;
    }

    const count = await countDataTransferItem.asString();
    const text = await textDataTransferItem.asString();

    // Build a snippet to insert
    const snippet = new vscode.SnippetString();
    snippet.appendText(`(copy #${count}) ${text}`);

    return { insertText: snippet };
  }
}

export function activate(context: vscode.ExtensionContext) {
  // Enable our provider in plaintext files
  const selector: vscode.DocumentSelector = { language: 'plaintext' };

  // Register our provider
  context.subscriptions.push(
    vscode.languages.registerDocumentPasteEditProvider(
      selector,
      new CopyCountPasteEditProvider(),
      {
        pasteMimeTypes: ['text/plain']
      }
    )
  );
}

웹에서의 WebUSB, WebSerial, WebHID 액세스

이제 웹 확장 프로그램에서 WebUSB, Web Serial, WebHID를 사용하는 실험적 지원이 가능합니다.

이러한 API에 액세스하려면 확장 프로그램은 먼저 다음 명령 중 하나를 실행하여 원하는 장치에 대한 액세스를 요청해야 합니다.

  • workbench.experimental.requestUsbDevice
  • workbench.experimental.requestSerialPort
  • workbench.experimental.requestHidDevice

이러한 명령은 사용자에게 장치를 선택하도록 안내합니다. 각 명령은 장치 필터 목록을 인수로 받습니다. 예시:

import * as vscode from 'vscode';

await vscode.commands.executeCommand('workbench.experimental.requestUsbDevice', {
  filters: [
    { vendorId: 0x404 } // Your custom filter or empty if you want users to select any device
  ]
});

명령이 완료된 후 확장 프로그램은 일반 웹 API를 사용하여 사용자가 액세스를 허용한 장치에 액세스할 수 있습니다.

const devices = await navigator.usb.getDevices();
// Do something with devices

requestDevice와 같이 UI 요소를 사용자에게 표시해야 하는 API를 제외한 모든 일반 웹 장치 API가 작동해야 합니다.

현재 이 기능은 웹에서만 작동하며 Chrome 및 Edge 브라우저로 제한됩니다. 또한 이 기능은 아직 실험적이므로 디자인을 반복할 수 있다는 점을 유념하세요. 한번 사용해 보시고 피드백을 공유해 주세요!

엔지니어링

Electron 18 업데이트

이번 마일스톤에서는 Electron 18을 VS Code 데스크톱에 번들링하기 위한 탐색을 완료했으며, Insiders에서 자체 호스팅에 참여한 모든 분들께 감사드립니다. 이 업데이트에는 Chromium 100.0.4896.160 및 Node.js 16.13.2가 포함됩니다.

문서

TypeScript 편집 및 리팩토링

VS Code의 TypeScript 편집 및 리팩토링에 대한 두 가지 새로운 주제가 있습니다. 여기서는 TypeScript 전용 기능인 Inlay hints, CodeLens, 서식 옵션 및 사용 가능한 코드 리팩토링에 대해 배울 수 있습니다.

주요 수정 사항

  • 109565 Caps Lock을 사용하여 입력 소스를 전환할 때 터미널에서 항상 대문자가 표시됨
  • 146491 활성 메뉴와 비활성 메뉴 간의 색상 차이 손실
  • 149538 중국에서 Microsoft 또는 GitHub 계정에 로그인할 수 없음
  • 149890 비어 있는 트리뷰에 항목을 드래그 앤 드롭할 수 없음
  • 150934 RPM은 번들 라이브러리를 "제공"으로 나열해서는 안 됩니다.
  • 151158 노트북을 저장할 때 제목 없는 노트북에서 선택한 커널 유지
  • 151664 화면 판독기로 코드를 단계별로 실행할 때 공지 효율성 향상
  • 151739 workbench.action.submitComment이 댓글 스레드에 처음 회신할 때 작동하지 않음 & 댓글을 편집할 때 혼란스러움
  • 152067 댓글이 확장될 때만 댓글 스레드 범위 표시
  • 152141 프로세스가 종료될 때 작업 상태 삭제
  • 152642 한 번의 클릭으로 감시 표현식을 제거하는 버튼 추가

감사합니다

마지막으로, VS Code 기여자에 대한 진심 어린 감사의 말씀을 전합니다.

웹 확장

웹 확장 프로그램으로 코드를 실행하는 확장 프로그램을 지원하는 확장 프로그램 작성자 (web extensions) (아래 목록은 2022년 6월 7일부터 7월 4일까지입니다.)

이슈 추적

이슈 추적에 대한 기여

풀 리퀘스트

vscode 기여

vscode-generator-code에 대한 기여

vscode-js-debug 기여

vscode-pull-request-github 기여

debug-adapter-protocol에 기여

devcontainers/cli에 대한 기여

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