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

2022년 9월 (버전 1.72)

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

업데이트 1.72.1: 업데이트는 이 보안 문제를 해결합니다.

업데이트 1.72.2: 업데이트는 이 문제를 해결합니다.

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

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

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

워크벤치

도구 모음에서 동작 숨기기

이제 도구 모음에서 동작을 숨길 수 있습니다. 도구 모음에서 아무 동작이나 마우스 오른쪽 버튼으로 클릭하고 "숨기기" 명령 또는 토글 명령 중 하나를 선택합니다. 숨겨진 동작은 ... **추가 동작** 메뉴로 이동하며 해당 메뉴에서 호출할 수 있습니다. 메뉴를 복원하려면 도구 모음 단추 영역을 마우스 오른쪽 버튼으로 클릭하고 **메뉴 다시 설정** 명령을 선택합니다. 모든 메뉴를 복원하려면 명령 팔레트(⇧⌘P (Windows, Linux Ctrl+Shift+P))에서 **모든 메뉴 다시 설정**을 실행합니다.

아래 동영상에서는 GitLens 확장 프로그램의 **파일 주석** 메뉴가 편집기 도구 모음에서 숨겨진 다음 **메뉴 다시 설정**을 통해 복원되는 것을 보여줍니다.

병합 편집기

3자 병합 편집기 사용 옵션 활성화

병합 편집기에 대한 모든 피드백을 검토하고 전체적인 환경을 고려한 후, 충돌이 감지될 때 3자 병합 편집기를 기본값으로 표시하지 않기로 결정했습니다(git.mergeEditor 설정은 이제 false). 이 결정에 대한 이유는 이슈 #160806에서 확인할 수 있습니다.

충돌이 있는 파일의 경우, 이제 사용자는 **병합 편집기에서 해결**을 선택하여 3자 병합 편집기를 열 수 있습니다.

A screenshot of a file with conflicts, showing the "Resolve in Merge Editor" button

CodeLens UI

사용자 피드백에 따르면 확인란에 몇 가지 UX 문제가 있었습니다. 확인란은 발견하기 어려웠고 모든 가능한 상태를 올바르게 나타내지 않아 혼란을 야기했습니다. 이번 업데이트에서는 텍스트 레이블(들어오는 변경 내용 수락, 현재 변경 내용 수락, 두 변경 내용 수락)을 사용하는 CodeLens UI로 전환했습니다.

Merge editor before with checkboxes and after with CodeLens

이 디자인은 계속 개선하고 모든 피드백을 면밀히 모니터링할 것입니다.

결과 파일이 처음부터 다시 계산됨

지난 업데이트에서는 충돌이 있는 파일의 대체 보기로 병합 편집기를 디자인하려고 했습니다. 충돌 표시기 대신 별도의 편집기 창에 충돌 세부 정보가 표시되었습니다. 이 디자인은 병합 편집기를 열어도 디스크의 파일이 수정되지 않고 병합 편집기를 열기 전에 사용자가 만든 변경 사항을 유지할 수 있다는 장점이 있었습니다. 그러나 이는 혼란스러울 뿐만 아니라 병합 알고리즘과 Git 병합 알고리즘이 완벽하게 일치하지 않아 모든 경우에 작동하지 않았습니다.

이번 릴리스에서는 충돌 표시기가 있는 파일을 병합 편집기에서 열면, 첫 번째 단계로 충돌 표시기를 삽입하지 않고 병합 알고리즘을 사용하여 결과 파일을 다시 계산합니다. 일방적인 충돌은 자동으로 해결되며, 제대로 된 충돌은 두 버전의 공통 조상으로 재설정되고 **처리되지 않음**으로 표시됩니다.

기본 보기

이제 병합 편집기에 공통 조상과 어떤 쪽이든 비교하는 데 사용할 수 있는 별도의 기본 보기가 있습니다.

트리 보기 찾기 컨트롤 개선

이제 트리 보기 찾기 컨트롤을 수직으로 이동하여 그 뒤에 있는 UI 요소에 액세스할 수 있습니다. 트리 보기 내에서 ⌥⌘F (Windows, Linux Ctrl+Alt+F)를 누르면 찾기 컨트롤이 표시됩니다.

Tree view Find control supports vertical movement

또한 트리 보기 찾기 컨트롤은 다시 열 때 마지막 검색어를 기억합니다.

Tree view Find control remembers last search text

일부 오디오 및 비디오 파일에 대한 내장 미리 보기

VS Code가 이제 일부 오디오 및 비디오 파일 형식 미리 보기를 지원합니다.

Previewing an MP4 video in VS Code

현재 지원되는 오디오 형식은 다음과 같습니다.

  • WAV
  • MP3
  • Ogg
  • FLAC

다음 비디오 형식도 미리 볼 수 있습니다.

  • H.264
  • VP8

비디오 파일의 경우, 비디오 및 오디오 트랙의 미디어 형식이 모두 지원되어야 한다는 점을 명심하세요. 예를 들어 많은 .mp4 파일은 비디오에 H.264를, 오디오에 AAC를 사용합니다. VS Code는 .mp4의 비디오 부분은 재생할 수 있지만, AAC 오디오는 지원되지 않으므로 소리가 나지 않습니다. 오디오 트랙에는 MP3를 사용해야 합니다.

증분 이름 지정 비활성화

이제 파일 탐색기에서 `explorer.incrementalNaming` 설정에 `disabled` 값을 사용하여 증분 파일 이름 지정을 비활성화할 수 있습니다. 이 값은 파일 탐색기 내에서 붙여넣기 시 파일 이름을 변경하는 로직을 비활성화합니다. 파일 이름이 이미 존재하면 대부분의 기본 탐색기와 마찬가지로 덮어쓰기할지 묻는 메시지가 표시됩니다.

VS Code 애플리케이션 폴더 내에서 편집할 때 경고 표시

VS Code 애플리케이션 폴더 내의 파일을 편집할 때 이제 편집기에 경고가 표시됩니다. 애플리케이션 폴더의 파일을 실수로 수정하는 것은 흔한 실수이며 일반적으로 의도한 것이 아닙니다.

VS Code warns when editing its application folder files

편집기

자동 스크롤 동작 개선

선택 및 드래그 시 편집기는 디스플레이의 초당 프레임(FPS)에 따라 스크롤되었으며, 때로는 마우스가 편집기 가장자리에 닿자마자 편집기가 빠르게 스크롤되었습니다. 이제 편집기는 마우스가 가장자리 근처에 있을 때 초당 약 1개의 뷰포트 속도로, 편집기에서 더 멀리 떨어져 있을 때는 더 빠르게, FPS와 독립적으로 스크롤됩니다.

아래 동영상에서는 마우스 커서가 편집기에서 멀어져 아래로 이동함에 따라 스크롤 속도가 증가합니다.

호버 개선

편집기 호버는 특히 마우스가 편집기의 빈 영역 위로 이동할 때 매우 공격적으로 숨겨졌습니다. 이로 인해 호버에 표시된 일부 동작에 도달하기 어려웠습니다. 이제 호버는 마우스가 호버 쪽으로 움직이는 동안 계속 표시됩니다. `"editor.hover.sticky": false` 설정을 사용하면 이전 동작으로 되돌릴 수 있습니다.

오른쪽의 "수정 후" 동영상에서는 호버에서 빠른 수정을 선택하는 것이 훨씬 쉬워졌습니다.

새로운 코드 동작 그룹

**코드 동작** 컨트롤에는 `In-line`과 `Move`라는 두 개의 새로운 그룹이 있습니다.

이 그룹은 `refactor.inline` 및 `refactor.move` 코드 동작 종류에 해당합니다.

새로운 코드 동작 색상

이번 업데이트에서 **코드 동작** 컨트롤의 모양도 약간 달라졌음을 알 수 있습니다. 스타일이 업데이트되어 더 적절한 테마 색상을 사용합니다. 가장 큰 변화는 컨트롤 본문이 이제 `menu.*` 색상 대신 `editorWidget.*` 색상을 사용한다는 것입니다.

이 색상은 계속 다듬어지고 있으므로, 특정 테마에 잘 맞지 않거나 색상 사용자 지정 옵션이 누락된 경우 알려주시기 바랍니다.

확장

최근 업데이트된 확장 프로그램

VS Code는 이제 확장 프로그램 보기의 **업데이트** 섹션에 있는 **최근 업데이트**에 지난 7일 동안 업데이트된 확장 프로그램을 표시합니다.

Recently Updated section in the Extensions view

주의가 필요한 확장 프로그램

VS Code는 이제 확장 프로그램 보기의 **설치됨** 섹션 기본값의 맨 위에 주의가 필요한 확장 프로그램을 표시합니다. 여기에는 보류 중인 업데이트가 있거나 업데이트되었거나 비활성화되어 VS Code를 다시 시작해야 하는 확장 프로그램이 포함됩니다.

Extensions requiring attention are displayed at the top of the Extensions view

활동 막대의 확장 프로그램 아이콘에 있는 배지가 이제 주의가 필요한 확장 프로그램 수를 표시합니다.

Extensions badge showing that four extensions require attention

확장 프로그램 업데이트 무시

이제 확장 프로그램 보기의 **업데이트** 드롭다운 메뉴에서 **업데이트 무시** 단추를 클릭하여 확장 프로그램의 업데이트를 무시할 수 있습니다. 이렇게 하면 주의가 필요한 확장 프로그램 목록에서 해당 확장 프로그램이 제거됩니다.

Ignore Updates option in Extensions view context menu

동일한 **업데이트 무시** 단추를 선택 해제하여 이 작업을 실행 취소할 수 있습니다.

Checked Ignore Updates option in Extensions view context menu

확장 프로그램의 특정 버전을 설치하는 경우( **다른 버전 설치**를 통해) 해당 확장 프로그램에 대한 업데이트도 무시된다는 점에 유의하세요.

설치된 확장 프로그램 정렬

이제 **설치 횟수**, **평점**, **이름**, **게시 날짜**, **업데이트 날짜**별로 설치된 확장 프로그램 목록을 정렬할 수 있습니다.

Extensions view Sort By menu options

검색

트리 보기 형식으로 표시되는 결과

이제 검색 결과를 트리 형식으로 볼 수 있습니다! 검색 보기의 위쪽 모서리에 있는 목록/트리 아이콘을 클릭하여 목록 보기와 트리 보기 간에 전환하기만 하면 됩니다.

Search results shown as a tree view

테마: Night Owl Light (vscode.dev에서 미리 보기: vscode.dev)

파일 장식 설정

검색 결과에서 파일 상태를 나타내는 파일 이름 배지와 색상을 켜거나 끌 수 있습니다. 설정은 **검색 > 장식: 배지**(search.decorations.badges) 및 **검색 > 장식: 색상**(search.decorations.colors)입니다.

Search results file decoration settings

테마: Night Owl Light (vscode.dev에서 미리 보기: vscode.dev)

소스 제어

중첩된 Git 리포지토리 검색

오랫동안 요청되어 온 기능 요청을 해결하기 위해 이번 마일스톤에서는 리포지토리 검색 변경을 통해 중첩된 Git 리포지토리에 대한 지원을 추가했습니다. 중첩된 리포지토리의 위치에 따라 `git.repositoryScanMaxDepth` 설정을 수정해야 할 수 있습니다(기본값은 1 레벨).

암호가 있는 SSH 키 지원 추가

Git 작업을 위해 암호가 있는 SSH 키를 사용하는 경우, VS Code에서 빠른 입력 컨트롤을 표시하여 SSH 키에 대한 암호를 입력할 수 있습니다. 암호는 캐시되지 않으므로 Git 작업을 수행할 때마다 입력해야 합니다.

체크아웃 전 풀

이번 마일스톤에서는 브랜치 전환 프로세스를 간소화하기 위해 새로운 설정인 `git.pullBeforeCheckout`을 추가했습니다. 이 설정을 활성화하면, 나가는 커밋이 없는 경우 원격에서 풀하고 브랜치를 체크아웃하기 전에 fast-forward합니다.

리포지토리 가져오기 개선

여러 원격이 있는 Git 리포지토리의 경우, 가져오기 명령을 호출하면 이제 모든 원격 목록과 함께 빠른 선택이 표시됩니다. 사용자는 특정 원격에서 가져오거나 모든 원격에서 가져오도록 선택할 수 있습니다.

병합 중단 명령

진행 중인 병합 작업을 중단하는 새로운 명령인 **Git: 병합 중단**이 있습니다.

터미널

터미널 빠른 수정

셸 통합으로 구동되는 새로운 기능인 빠른 수정을 출시하기 시작했습니다. 이 기능은 오디오 큐 지원과 함께 제공됩니다. `audioCues.terminalQuickFix`로 활성화하여 수정 사항이 있음을 소리로 알릴 수 있습니다.

빠른 수정은 명령이 사용자가 취할 가능성이 있는 일련의 동작에 매핑될 때 사용할 수 있으며, 편집기에서 사용되는 것과 동일한 키 바인딩인 Ctrl+. 또는 Cmd+.를 통해 활성화할 수 있습니다.

초기에 지원되는 빠른 수정은 다음과 같습니다.

Git 유사 명령

Git 명령이 잘못 입력된 경우, 빠른 수정에서 유사한 명령을 제안합니다.

Run: git status is suggested after git sttatus is mistyped

Git 업스트림 설정

git push가 실행되고 업스트림 원격이 없는 경우, 빠른 수정에서 업스트림 원격 인수로 푸시하도록 제안합니다.

Run: git push set upstream is suggested

Git PR 생성

브랜치가 처음으로 원격에 푸시될 때, 빠른 수정에서 PR을 생성하는 링크를 열도록 제안합니다.

An open GitHub PR link action is offered

포트 비우기

이미 사용 중인 포트를 사용하여 서버를 시작할 때, 빠른 수정에서 해당 프로세스를 종료하고 포트를 비우는 작업을 제공합니다.

A server launch fails with a port 3000 in use error. An action to free port 3000 is offered.

셸 통합 개선

셸 통합에 다음과 같은 개선 사항이 적용되었습니다.

  • **최근 명령 실행** 및 **최근 디렉터리로 이동** 시 줄에 내용이 있거나(또는 신뢰할 수 없다고 판단되는 경우) 줄이 지워집니다.
  • bash 스크립트에서 ` $PREFIX` 환경 변수 사용을 제거하여 일부 빌드 도구와 충돌할 수 있었습니다.
  • `$ZDOTDIR` 주위의 일부 엣지 케이스를 수정하기 위해 zsh 스크립트를 개선했습니다.
  • 여러 사용자가 공유하는 컴퓨터에서 zsh 셸 통합을 더 잘 처리합니다.

하이퍼링크 지원

터미널에서 실행되는 애플리케이션에서 보낸 하이퍼링크가 지원됩니다. 이를 통해 URL을 가리키는 레이블을 표시하고 점선 밑줄로 나타낼 수 있습니다.

Hyperlinks appear in the terminal with dashed underlines, hovering the hyperlink reveals the URL

다음은 "VS Code"라는 레이블이 있고 https://vscode.gisul.kr을 가리키는 링크를 작성하는 예시입니다.

printf '\e]8;;https://vscode.gisul.kr\e\\VS Code\e]8;;\e\\'

또는 더 일반적으로

\x1b]8;; <URL> \x1b\ <Label> \x1b]8;;\x1b\'

VT 기능 지원

이번 버전에서는 이러한 VT 이스케이프 시퀀스에 대한 지원이 제공됩니다.

  • DECRQM: ANSI 및 DEC 개인 모드 보고 (CSI Ps $ p) - 이 시퀀스를 통해 프로그램은 래퍼라운드 또는 대괄호 붙은 붙여넣기 모드와 같은 터미널의 다양한 모드를 쿼리할 수 있습니다.
  • DECSCA: 보호 속성 (CSI Ps " q) - 이 속성은 `DECSED` 및 `DECSEL`이 콘텐츠를 지울 수 있는지 여부를 결정합니다.

오디오 벨

이제 터미널에서 오디오 벨이 작동하며 `terminal.integrated.enableBell`을 통해 활성화할 수 있습니다.

터미널 문서

터미널 문서가 리팩토링되어 VS Code 웹사이트의 자체 목차로 이동되었습니다.

이제 특정 주제가 있습니다.

  • 터미널 기본 사항 - VS Code 통합 터미널에 빠르게 익숙해지세요.
  • 터미널 프로필 - 프로필을 통해 터미널을 사용자 지정하는 방법을 알아보세요.
  • 셸 통합 - VS Code는 명령 상태, 기록 및 빠른 탐색과 같은 기능을 제공할 수 있습니다.
  • 모양 - 터미널 텍스트 및 커서 스타일링과 색상을 수정합니다.
  • 고급 - 사용자 지정 키 바인딩 및 유니코드 및 이모지 문자에 대한 고급 지원.

필요할 때 올바른 문서를 쉽게 찾을 수 있기를 바랍니다.

작업

작업 실행 항목 고정

작업을 **작업: 작업 실행** 목록에 고정하여 더 빠르고 쉽게 액세스할 수 있습니다.

Pinned items are the top category in the Run Task list

작업 완료 소리

작업이 완료되면 소리가 나서 멀티태스킹을 가능하게 하고 접근성을 개선합니다. `audioCues.taskCompleted` 설정을 통해 오디오 큐를 구성하세요.

언어

Markdown 링크 유효성 검사

Markdown으로 작업할 때 잘못된 파일 링크 또는 이미지 참조를 실수로 추가하기 쉽습니다. 파일 이름에 밑줄(_) 대신 대시(-)를 사용했거나, 링크하려는 파일이 다른 디렉터리로 이동되었을 수 있습니다. 이러한 실수는 Markdown 미리 보기 또는 게시 후에야 발견되는 경우가 많습니다. VS Code의 새로운 Markdown 링크 유효성 검사는 이러한 실수를 잡는 데 도움이 될 수 있습니다.

시작하려면 `"markdown.validate.enabled": true`로 설정하세요. VS Code는 이제 헤더, 이미지 및 기타 로컬 파일에 대한 Markdown 링크를 분석합니다. 잘못된 링크는 경고 또는 오류로 보고됩니다.

A warning shown in the editor when linking to a file that does not exist

VS Code는 다른 Markdown 파일의 특정 헤더에 대한 잘못된 링크도 감지할 수 있습니다!

링크 유효성 검사를 사용자 지정하는 데 사용할 수 있는 몇 가지 설정이 있습니다.

  • markdown.validate.fileLinks.enabled - 로컬 파일에 대한 링크 유효성 검사 활성화/비활성화: [링크](/경로/파일.md)
  • markdown.validate.fragmentLinks.enabled - 현재 파일의 헤더에 대한 링크 유효성 검사 활성화/비활성화: [링크](#_some-header)
  • markdown.validate.fileLinks.markdownFragmentLinks - 다른 Markdown 파일의 헤더에 대한 링크 유효성 검사 활성화/비활성화: [링크](other-file.md#some-header)
  • markdown.validate.referenceLinks.enabled - 참조 링크 유효성 검사 활성화/비활성화: [링크][ref].
  • markdown.validate.ignoredLinks - 유효성 검사를 건너뛸 링크 globs 목록. 이는 Markdown이 게시된 후에 디스크에 존재하지 않지만 존재하는 파일에 링크하는 경우 유용합니다.

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

Markdown에서 링크 정의로 추출

참조 스타일 링크를 사용하면 Markdown 소스에서 동일한 링크를 여러 번 쉽게 사용할 수 있습니다.

This [link][example-link] and [this link][example-link] both point to the same place!

[example-link]: http://example.com

파일의 한 곳만 변경하면 두 링크를 모두 업데이트할 수 있으므로 편리합니다.

새로운 **링크 정의로 추출** 리팩토링은 기존 Markdown 링크를 링크 정의 및 참조 링크로 변환하는 데 도움이 됩니다. 이 리팩토링은 현재 문서의 링크 발생을 모두 변환합니다. 예를 들어, Markdown 문서의 경우

[Markdown](https://daringfireball.net/projects/markdown/) and you: Adventures in [Markdown linking](https://daringfireball.net/projects/markdown/)!

https://daringfireball.net/projects/markdown/ 링크 중 하나에서 **링크 정의로 추출**을 실행하면 다음과 같이 됩니다.

[Markdown][md] and you: Adventures in [Markdown linking][md]!

[md]: https://daringfireball.net/projects/markdown/

리팩토링을 실행한 후, VS Code에서 링크 정의의 이름을 묻는 메시지가 표시됩니다. 위 예시에서는 `md`를 입력했습니다.

Markdown에서 링크 정의 정리

Markdown 파일에 대한 새로운 **링크 정의 정리** 코드 동작(source.organizeLinkDefinitions)은 모든 링크 정의를 파일 하단으로 그룹화하고 알파벳순으로 정렬하며 사용되지 않는 정의를 제거합니다. 이는 **소스 동작** 명령을 사용하여 실행할 수 있습니다.

예를 들어, Markdown 소스에서

Some [link][example] and an image:

![An image of a cat][cat-gif]

[example]: http://example.com
[cat-gif]: /keyboard-cat.gif
[some unused link]: http://example.com/file2

**링크 정의 정리**를 실행하면 다음과 같습니다.

Some [link][example] and an image:

![An image of a cat][cat-gif]

[cat-gif]: /keyboard-cat.gif
[example]: http://example.com

사용되지 않는 `some unused link` 정의가 제거되고 나머지 정의가 알파벳순으로 정렬된 것을 확인하세요.

CSS / LESS / SCSS

CSS 언어 지원은 이제 @property 및 @layer at-규칙을 이해합니다.

노트북

노트북 JavaScript 출력은 이제 모듈로 평가됨

노트북의 JavaScript 출력은 이제 모듈로 처리됩니다. 이는 출력 내에서 선언된 변수가 더 이상 다른 출력으로 누출되지 않음을 의미합니다(const 변수의 경우, 충돌하는 변수 이름을 가진 다른 출력이 실행되는 것을 잠재적으로 방지할 수도 있습니다).

이는 JavaScript 출력 내에서 import를 사용할 수도 있음을 의미합니다.

%%javascript
import { myFunction } from './myModules.js';

console.log(myFunction());

노트북 개요에서 HTML 헤더 지원

Markdown 셀의 HTML 헤더를 감지하고 노트북 **개요** 보기에서 렌더링할 수 있습니다.

HTML headers in notebook Markdown cells

웹용 VS Code

브라우저 주소창에서 'code' 사용

GitHub 리포지토리를 vscode.dev에서 더 쉽게 열 수 있는 Chrome/Edge 브라우저 확장 프로그램이 새로 나왔습니다.

시작하기

  1. Chrome 웹 스토어에서 확장 프로그램을 설치하세요.
  2. 주소창을 활성화하려면 브라우저 검색창에 code 를 입력하세요.
  3. 이름으로 GitHub 리포지토리를 검색하고 Enter를 누릅니다. 제안은 브라우저 검색 기록에서 채워지므로 원하는 리포지토리가 나타나지 않으면 전체 이름인 <owner>/<repo>를 입력하여 열 수도 있습니다. 예를 들어 microsoft/vscode.

아래 동영상에서는 사용자가 code vscode를 입력하여 microsoft/vscode 리포지토리를 vscode.dev에서 여는 것을 보여줍니다.

이 확장 프로그램은 전 VS Code 팀원인 Pine Wu가 만든 Goto GitHub Repo Chrome 확장 프로그램에서 많은 영감을 받았습니다.

개발 환경 전환 시 변경 사항 유지

GitHub 또는 Azure Repos 리포지토리를 탐색할 때(예: https://vscode.dev/github/microsoft/vscode), **계속 작업** 명령을 사용하여 리포지토리에 사용할 다른 개발 환경을 선택할 수 있습니다.

이전에는 가상 작업 공간에 커밋되지 않은 변경 사항이 있는 경우, 다른 곳에서 보려면 GitHub 또는 Azure Repos에 푸시해야 했습니다. 이번 마일스톤에서는 **계속 작업** 기능에 **편집 세션** 통합을 추가하여, 커밋되지 않은 변경 사항이 대상 개발 환경(예: GitHub codespace)으로 자동으로 이동합니다.

아래 동영상에서는 웹용 VS Code를 사용할 때 JavaScript 파일에 대한 사용자의 변경 사항이 새 GitHub codespace를 생성하고 전환할 때 적용되는 것을 보여줍니다.

이번 릴리스에서는 커밋되지 않은 변경 사항으로 **계속 작업**을 처음 사용할 때, VS Code 서비스를 사용하여 보류 중인 변경 사항을 저장하는 **편집 세션**을 사용하여 편집 내용을 선택한 개발 환경으로 가져오는 옵션이 제공됩니다. 이러한 변경 사항은 대상 개발 환경에 적용되면 저희 서비스에서 삭제됩니다. 커밋되지 않은 변경 사항 없이 계속 진행하기로 선택한 경우, `"workbench.editSessions.continueOn": "prompt"` 설정을 구성하여 이 환경 설정을 나중에 변경할 수 있습니다.

Prompt to bring working changes with you when using Continue Working On

웹용 VS Code를 사용할 때, **계속 작업**을 사용할 때 커밋되지 않은 변경 사항은 다음과 같은 환경으로 이동합니다.

  • GitHub Codespaces의 새로운 클라우드 호스팅 환경
  • GitHub 리포지토리의 새로운 로컬 복제본
  • 동일한 가상 GitHub 리포지토리를 가진 로컬 VS Code 인스턴스

데스크톱 VS Code를 원격 리포지토리 확장 프로그램과 함께 사용할 때, **계속 작업**을 사용할 때 커밋되지 않은 변경 사항은 다음과 같은 환경으로 이동합니다.

  • GitHub Codespaces의 클라우드 호스팅 환경 (GitHub Codespaces 확장 프로그램을 통해 사용 가능)
  • GitHub 리포지토리의 새로운 로컬 복제본
  • 컨테이너 볼륨의 GitHub 리포지토리 새 복제본 (Dev Containers 확장 프로그램을 통해 사용 가능)
  • https://vscode.dev
  • 리포지토리 복제본을 포함하는 기존 로컬 폴더

이슈 보고

이슈 임계값 7500자로 증가

VS Code 또는 확장 프로그램의 문제를 보고하기 위해 내장된 이슈 보고서를 사용할 때 github.com에서 이슈를 여는 데 사용되는 URL의 문자 수에 제한이 있습니다. 이 제한에 도달하면 이슈 본문에 전송하기에는 너무 커서 필요한 데이터를 클립보드에 저장했습니다. 붙여넣어 주세요.라는 메시지가 표시됩니다. 안타깝게도 일부 사용자는 이 메시지를 놓치고 데이터를 이슈 본문에 붙여넣는 것을 잊습니다.

이번 마일스톤에서는 임계값을 7500자로 늘렸습니다. 그 이유는 다음과 같습니다.

  1. URL의 문자 수에 하드 제한이 있는 특정 브라우저 (EOL)는 더 이상 지원되지 않습니다.
  2. GitHub 자체에도 URL의 문자 수 제한이 있습니다.

이렇게 하면 URL에 포함되는 문자의 수가 거의 세 배가 되어 대부분의 사용자에게 충분할 것이며 클립보드 메시지가 덜 표시될 것입니다.

실행 중인 확장 프로그램 편집기에서 사용하는 이슈 보고서

**개발자: 실행 중인 확장 프로그램 보기** 명령을 사용하여 **실행 중인 확장 프로그램** 편집기를 열고 **이슈 보고** 단추를 선택하면 내장 이슈 보고서가 표시됩니다. 이전에는 GitHub 이슈로 이동하여 붙여넣도록 요청했으며, 이는 확장 프로그램 리포지토리에 불필요하고 품질이 낮은 이슈를 많이 생성했습니다. 이제 확장 프로그램의 **이슈 보고** 단추는 내장 이슈 보고서를 통해 작동하며 사용자가 품질 좋은 확장 프로그램 이슈를 제출할 수 있도록 합니다.

확장 프로그램 기여

원격 개발

원격 개발 확장 프로그램은 개발 컨테이너, 원격 머신 또는 Linux용 Windows 하위 시스템(WSL)을 전체 기능 개발 환경으로 사용할 수 있게 해줍니다.

**원격 - WSL** 및 **원격 - 컨테이너** 확장 프로그램의 명명에 대한 피드백을 들었습니다. 이들의 이름에 있는 `원격`은 전통적인 로컬 개발이 아닌 "원격" 또는 "별도" WSL 배포판 또는 개발 컨테이너에서 개발함을 나타내기 위한 것이었습니다. 그러나 이는 많은 사람들이 사용하는 "원격"의 용법과 다르며 혼란을 야기할 수 있습니다(예: 개발 컨테이너가 내 컴퓨터에 있습니까?).

따라서 이러한 확장 프로그램의 명칭과 제품 내 명령을 더 명확하게 업데이트하여 **WSL** 및 **Dev Containers**로 이름을 변경했습니다. 마켓플레이스의 확장 프로그램 식별자 및 문서와 같은 링크는 그대로 유지되므로 이러한 두 확장 프로그램의 현재 사용에 문제가 발생하지 않을 것입니다.

WSL extension in the Marketplace

Dev Containers extension in the Marketplace

이름 변경과 함께 이러한 확장 프로그램의 기능 및 수정 작업도 계속되었습니다. 자세한 내용은 원격 개발 릴리스 노트에서 확인할 수 있습니다.

개발 컨테이너 기능

Dev Container 기능을 사용하면 미리 패키지된 기능을 dev container에 쉽게 추가할 수 있습니다. Git 또는 Docker와 같은 도구나 Go 또는 Java와 같은 프로그래밍 언어 지원이든, 사용 가능한 기능 목록을 검토하고 `devcontainer.json`에 추가할 수 있습니다. 기능 템플릿을 사용하여 자신만의 기능을 만들어 게시하고 다른 사람들과 공유할 수도 있습니다.

GitHub Pull Requests 및 Issues

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

  • GitHub Enterprise Server에 대한 지원이 개선되었습니다. 여기에는 다음이 포함됩니다.
    • VS Code의 내장 GitHub Enterprise Server 인증 공급자 덕분에 PAT 없이 인증할 수 있습니다.
    • Enterprise 리포지토리의 폴더를 열 때 자동 감지 및 설정을 위한 시작 경로를 제공합니다.
    • GitHub Enterprise Server 버그 수정.
  • 파일을 본 것으로 표시하기 위한 체크박스.

확장의 0.52.0 릴리스에 대한 변경 로그를 확인하여 다른 주요 내용을 알아보세요.

GitHub 이슈 노트북

작업 영역 편집

GitHub 이슈 노트북 확장은 노트북 API를 보여주고 매우 유용하다는 것이 입증되었습니다. 이러한 정신으로 작업 영역 편집 API의 최신 개선 사항을 채택했습니다. 다음과 같은 새로운 코드 작업이 있습니다.

  • 셀을 새 노트북으로 이동/복사합니다.
  • OR 문을 사용하여 셀을 분할할 수 있습니다.
  • 스니펫 편집을 사용하여 `label:bug`와 같은 정규화된 값을 변수로 추출합니다.
  • 값 집합 오류에 대한 스니펫 기반 빠른 수정.

Move cell into new notebook and Quick Fix for value set violation

지역화

이 확장은 이제 VS Code에서 지원하는 13개 언어로 완전히 지역화되었습니다. 또한 새로운 지역화 API를 사용하여 지역화된 첫 번째 확장 프로그램이므로 데스크톱 및 웹에서 지역화가 작동합니다.

Jupyter

셀 태그 및 슬라이드쇼 편집 지원

이제 문서를 JSON 형식으로 열지 않고 노트북 편집기에서 직접 셀 태그 및 슬라이드쇼 유형을 편집할 수 있습니다.

이를 통해 papermill용 노트북을 매개변수화하거나 nbconvert용 노트북을 사용자 정의할 수 있습니다.

Edit Jupyter notebook cell tags

이제 명령을 통해 노트북의 슬라이드쇼 유형을 직접 업데이트하여 노트북을 프레젠테이션 슬라이드로 만들 수도 있습니다.

Edit Jupyter notebook slideshow

위의 두 예는 노트북 작업 영역 편집 API를 사용하여 셀 메타데이터를 편집합니다. 사용자 정의 셀 메타데이터의 다른 편집을 지원하는 방법에 관심이 있다면 GitHub 리포지토리(cell-tags, slideshow)에서 자세히 알아볼 수 있습니다.

대화형 창에 대한 명령 상호 작용 개선

interactive.input.focus 명령은 이제 가장 최근에 사용된 대화형 창의 입력 상자로 포커스를 이동합니다. 아래 짧은 비디오에서는 사용자 지정 키보드 바로 가기와 함께 명령이 사용되고 있습니다.

Interactive Window navigation using keyboard shortcuts

노트북 **삭제** 셀 명령이 대화형 창 셀에 대해 활성화되었으며 이제 실행 취소할 수 있습니다.

Python 파일 셀 접기

# %% 마커로 표시된 Python 파일 내의 "셀"을 편집기에서 접을 수 있습니다.

GitHub Enterprise Server 인증 지원

이전에는 GitHub Enterprise Server 사용자가 VS Code에서 GitHub Enterprise Server에 로그인하려면 (예: GitHub Pull Requests 및 Issues 확장에 사용하기 위해) 수동으로 개인 액세스 토큰(PAT)을 생성해야 했습니다. 이는 사용자가 PAT를 생성하기 위해 VS Code를 종료하고, 올바른 권한으로 생성되었는지 확인하고, 복사하여 VS Code에 다시 붙여넣어야 하는 번거로운 프로세스였습니다.

이제 더 이상 필요하지 않습니다. 이제 GitHub Enterprise Server 로그인 흐름은 github.com 로그인 흐름과 동일하며, 사용자는 PAT를 생성할 필요 없이 GitHub Enterprise Server에 로그인할 수 있습니다. 이 환경을 실제로 확인하려면 Marketplace에서 GitHub Pull Requests and Issues 확장을 다운로드하고 github-enterprise.uri 설정을 GitHub Enterprise Server URI로 설정한 다음 확장을 사용해 보세요. 새로운 환경을 보여주는 비디오입니다.

테마: Panda Theme (vscode.dev에서 미리 보기)

Python

환경 만들기 명령

VS Code의 Python 사용자를 위해 가상 환경 또는 conda 환경을 자동으로 생성하는 새로운 **환경 만들기** 명령이 추가되었습니다. 사용자는 명령 팔레트를 통해 명령을 트리거하고 venv를 사용한 새 가상 환경 또는 Conda 환경을 만들지 여부를 선택한 다음 프로젝트에 대한 원하는 인터프리터를 선택할 수 있습니다. 이 명령은 또한 프로젝트 폴더에 있는 requirements.txt 파일에 나열된 필요한 패키지를 설치합니다. 이 새로운 기능이 환경 생성 프로세스를 간소화하고 사용자가 코딩 모범 사례를 위해 환경을 사용하도록 장려하기를 바랍니다.

Create new virtual environment with Create Environment command

확장 저자를 위한 새 환경 API

Python API는 이제 확장이 Python 확장으로 감지된 사용자 컴퓨터에서 사용 가능한 Python 환경과 함께 작동할 수 있는 방법을 제공합니다. 또한 확장은 이를 사용하여 Python 확장 프로그램이 스크립트를 실행하는 데 사용하는 선택한 환경 경로에 액세스하거나 기본 설정으로 업데이트할 수 있습니다.

의견이 있으시면 이슈 #18888에 자유롭게 제공해 주세요. API가 아직 최종 확정되지 않았으므로 피드백에 따라 이전 호환성을 제공하지 않고 변경될 수 있습니다.

Python 확장 템플릿

Python 확장 템플릿은 린터, 포맷터 또는 코드 분석 유틸리티와 같은 좋아하는 Python 도구를 위한 Visual Studio Code 확장을 빌드하는 데 도움이 됩니다. 템플릿은 도구를 VS Code에 통합하는 확장을 빌드하는 데 필요한 기본 빌딩 블록을 제공합니다.

미리 보기 기능

설정 프로필

지난 몇 달 동안 VS Code에서 가장 많이 요청되는 기능 중 하나인 **설정 프로필** 지원을 위해 노력해 왔습니다. 이 기능은 workbench.experimental.settingsProfiles.enabled 설정을 통해 미리 볼 수 있습니다. 사용해 보고 vscode 저장소에 이슈를 생성하거나 이슈 #116740에 댓글을 달아 피드백을 제공해 주세요.

설정 프로필 표시기

VS Code는 활동 표시줄 하단에 설정 프로필 표시기를 표시합니다. 기본적으로 프로필 이름의 처음 두 글자가 표시기에 표시됩니다. 짧은 이름을 두 글자 또는 이모티콘 또는 코드 아이콘으로 사용자 지정할 수도 있습니다. 코드 아이콘은 `$(codicon-id)` 구문을 사용하여 참조할 수 있습니다.

Settings Profiles indicator

이 표시기를 클릭하면 **짧은 이름 변경** 옵션이 있는 메뉴가 표시됩니다.

Settings Profiles menu

설정 프로필 동기화

VS Code는 이제 VS Code 인스턴스 간에 설정 프로필을 동기화하는 것을 지원합니다.

**참고:** 이 기능은 현재 VS Code의 Insiders 릴리스에서만 사용할 수 있습니다.

웹에서의 WebAssembly 및 Python 실행

지난 몇 달 동안 VS Code에 WebAssembly(WASM)를 도입하기 위해 노력했습니다. 지원을 위해 두 가지 작업을 수행했습니다.

  • 확장이 WebAssembly 코드를 실행할 수 있도록 하는 라이브러리. WebAssembly는 작업 영역의 파일 및 VS Code 터미널에 투명하게 액세스할 수 있습니다. 이러한 라이브러리는 vscode-wasm 리포지토리에서 개발되었으며 npm에 @vscode/sync-api-common, @vscode/sync-api-client, @vscode-sync-api-service 및 @vscode/wasm-wasi로 게시되었습니다. 이러한 리포지토리의 README 파일에는 라이브러리 사용 방법에 대한 예제가 포함되어 있습니다.
  • VS Code for the Web (예: vscode.dev 및 insiders.vscode.dev)에서 Python 파일을 실행하는 것을 지원하는 VS Code 확장입니다. 이 확장은 Marketplace에서 Experimental - Python for the Web으로 사용할 수 있습니다. 한 가지 제약은 실행하려는 Python 코드가 GitHub 리포지토리에 호스팅되어야 한다는 것입니다.

아래 스크린샷은 `Hello World` 프로그램을 실행하는 것을 보여줍니다.

Execute Python file in VS Code for the Web

명령 **Python WASM: Start REPL**을 사용하여 Python REPL을 시작할 수도 있습니다.

Python REPL running in VS Code for the Web

참고: 라이브러리와 확장 프로그램 모두 개발 중이며 미리 보기로 제공됩니다. WebAssembly Python 인터프리터 및 VS Code 자체에는 제한 사항이 있습니다. 인터프리터의 주요 제한 사항은 다음과 같습니다.

  • pip 지원 없음.
  • 소켓 지원 없음.
  • 스레드 지원 없음. 결과적으로 비동기 지원도 없습니다.

그러나 자체 Python 환경을 만드는 지원이 제공되며, 여기에는 소스 휠 Python 패키지가 포함됩니다. 자세한 내용은 확장 프로그램의 README를 확인하세요.

VS Code의 제한 사항은 다음과 같습니다.

  • 디버그 지원 없음. Python 파일만 실행할 수 있습니다.
  • 기본 Python 모듈 지원 없음.

하지만 계속 지켜봐 주세요. 이러한 제한 사항 중 일부를 해제하기 위해 준비 중인 것들이 있습니다.

확장 프로그램 작성

깨끗한 환경에서 확장 디버깅

확장을 디버깅할 때 확장이 확장 작성자의 개발 환경(사용자 설정 및 설치된 확장)에서 실행되고 대상 사용자에게 더 적합한 환경에서는 실행되지 않는 문제가 항상 있었습니다.

최근에 도입된 "프로필" 기능을 사용하면 확장 디버그 구성에서 프로필을 지정하여 개발 중인 확장을 다른 환경에서 실행할 수 있습니다. 프로필 기능을 활성화하려면 workbench.experimental.settingsProfiles.enabled 설정을 활성화하세요.

두 가지 시나리오가 지원됩니다.

  • **깨끗한 환경에서 디버깅**: 확장 디버깅이 중지되면 자동으로 삭제되는 이름 없는 "빈" 프로필을 사용합니다.
  • **제어된 환경에서 디버깅**: 개발 중인 확장을 위해 특별히 생성되었으며 특정 사용자 설정 및 확장을 포함하는 이름이 지정된 프로필을 사용합니다.

이 디버그 구성은 `---profile-temp` 스위치를 사용하여 깨끗한 환경에서 디버깅하는 방법을 보여줍니다.

{
  "name": "Extension",
  "type": "extensionHost",
  "request": "launch",
  "args": ["--profile-temp", "--extensionDevelopmentPath=${workspaceFolder}"],
  "outFiles": ["${workspaceFolder}/dist/**/*.js"],
  "preLaunchTask": "npm: watch"
}

이것은 이전에 "extensionContext"라는 이름의 프로필을 사용하는 제어된 환경에서 디버깅하기 위한 디버그 구성입니다.

{
  "name": "Extension",
  "type": "extensionHost",
  "request": "launch",
  "args": ["--profile=extensionContext", "--extensionDevelopmentPath=${workspaceFolder}"],
  "outFiles": ["${workspaceFolder}/dist/**/*.js"],
  "preLaunchTask": "npm: watch"
}

원격 위치(원격 개발 확장의 Dev Containers, SSH 또는 WSL을 통해)에서 확장을 디버깅할 때 `---profile-temp` 플래그를 사용하면 이 상태 메시지가 표시됩니다.

Disconnected Status bar message

임시 프로필에는 확장이 포함되지 않으므로 원격 개발 확장이 누락되었기 때문에 이는 예상되는 결과입니다. 원격 시나리오의 경우 이름 없는 프로필을 생성하고 원격 개발 확장을 추가한 다음 `---profile=....` 명령줄 옵션을 사용하는 것이 좋습니다.

작업 영역 편집 API 개선

WorkspaceEdit으로 노트북 편집

작업 영역 편집을 통해 이제 vscode.NotebookEdit으로 노트북을 수정할 수 있습니다. vscode.NotebookEdit 클래스에는 노트북에서 셀을 삽입, 바꾸기 및 삭제하는 편집을 생성하기 위한 정적 팩터리 함수가 포함되어 있습니다.

const currentNotebook = vscode.window.activeNotebookEditor?.notebook;
if (currentNotebook) {
  const edit = new vscode.WorkspaceEdit();

  // Use .set to add one or more edits to the notebook
  edit.set(currentNotebook.uri, [
    // Create an edit that inserts one or more cells after the first cell in the notebook
    vscode.NotebookEdit.insertCells(/* index */ 1, [
      // ... new notebook cell data
    ])

    // Additional notebook edits...
  ]);

  await vscode.workspace.applyEdit(edit);
}

WorkspaceEdit을 사용한 스니펫 편집 수행

새로운 SnippetTextEdit 유형을 통해 확장은 WorkspaceEdit을 사용하여 스니펫 편집을 수행할 수 있습니다. 스니펫 편집은 일반 텍스트 편집과 유사하지만 사용자가 자리 표시자를 탭하고, 변수를 삽입하고, 선택 항목에서 선택하는 등의 작업을 할 수 있습니다. 스니펫에 대한 자세한 내용은 이 가이드에서 확인할 수 있습니다.

참고: 스니펫 편집에는 코드 또는 노트북 편집기가 필요하며 단일 편집기만 지원할 수 있습니다. 그렇지 않으면 일반 텍스트 편집처럼 작동합니다.

스니펫 편집과 작업 영역 편집을 결합하면 GitHub 이슈 노트북 확장 프로그램의 샘플과 같이 새롭고 더욱 원활한 코드 작업 및 리팩터링이 가능하다고 생각합니다.

WorkspaceEdit으로 콘텐츠가 있는 파일 만들기

이제 WorkspaceEdit을 사용하여 파일을 만들 때 콘텐츠를 지정할 수 있습니다. 그렇게 하려면 옵션 가방과 함께 콘텐츠를 전달합니다.

const edit = new vscode.WorkspaceEdit();
edit.createFile(newFileUri, { contents: new Unit8Array([1, 2, 3]) });

await vscode.workspace.applyEdit(edit);

기여된 웹뷰 컨텍스트 메뉴

새로운 웹뷰 컨텍스트 메뉴 API를 통해 고급 웹뷰는 사용자가 웹뷰 안에서 마우스 오른쪽 버튼을 클릭할 때 표시되는 컨텍스트 메뉴를 쉽게 사용자 정의할 수 있습니다. 이 새로운 기여 지점은 VS Code의 일반 컨텍스트 메뉴를 사용하므로 사용자 정의 메뉴는 편집기의 나머지 부분과 잘 어울립니다. 웹뷰는 웹뷰의 다른 섹션에 대한 사용자 정의 컨텍스트 메뉴를 표시할 수도 있습니다.

웹뷰에 새 컨텍스트 메뉴 항목을 추가하려면 먼저 새로운 webview/context 섹션 아래의 menus에 새 항목을 추가합니다. 각 기여는 command (항목 제목도 여기에서 나옵니다)와 when 절을 받습니다. when 절에는 webviewId == 'YOUR_WEBVIEW_VIEW_TYPE'을 포함하여 컨텍스트 메뉴가 확장 프로그램의 웹뷰에만 적용되도록 해야 합니다.

"contributes": {
  "menus": {
    "webview/context": [
      {
        "command": "catCoding.yarn",
        "when": "webviewId == 'catCoding'"
      },
      {
        "command": "catCoding.insertLion",
        "when": "webviewId == 'catCoding' && webviewSection == 'editor'"
      }
    ]
  },
  "commands": [
    {
      "command": "catCoding.yarn",
      "title": "Yarn 🧶",
      "category": "Cat Coding"
    },
    {
      "command": "catCoding.insertLion",
      "title": "Insert 🦁",
      "category": "Cat Coding"
    },
    ...
  ]
}

웹뷰 내부에서는 `data-vscode-context` 데이터 속성(또는 JavaScript에서 `dataset.vscodeContext`)을 사용하여 HTML의 특정 영역에 대한 컨텍스트를 설정할 수도 있습니다. `data-vscode-context` 값은 사용자가 요소를 마우스 오른쪽 버튼으로 클릭할 때 설정할 컨텍스트를 지정하는 JSON 객체입니다. 최종 컨텍스트는 문서 루트에서 클릭된 요소까지의 경로를 통해 결정됩니다.

예를 들어 이 HTML을 고려해 보세요.

<div class="main" data-vscode-context='{"webviewSection": "main", "mouseCount": 4}'>
  <h1>Cat Coding</h1>

  <textarea data-vscode-context='{"webviewSection": "editor", "preventDefaultContextMenuItems": true}'></textarea>
</div>

사용자가 textarea에서 마우스 오른쪽 버튼을 클릭하면 다음 컨텍스트가 설정됩니다.

  • webviewSection == 'editor' - 이것은 상위 요소의 webviewSection을 재정의합니다.
  • mouseCount == 4 - 이것은 상위 요소에서 상속됩니다.
  • preventDefaultContextMenuItems == true - 이것은 VS Code가 일반적으로 웹뷰 컨텍스트 메뉴에 추가하는 복사 및 붙여넣기 항목을 숨기는 특수 컨텍스트입니다.

사용자가 `