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

2021년 5월 (버전 1.57)

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

작업 영역 신뢰 기능은 CVE-2021-34529를 해결합니다.

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

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

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

이 버전의 새로운 기능을 **하이라이트 영상**으로 VS Code 팀의 릴리스 파티에서 확인해 보세요. YouTube 채널에서 이벤트 녹화본을 찾을 수 있습니다.

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

워크벤치

작업 영역 신뢰

Visual Studio Code는 보안을 중요하게 생각하며, 소스나 제작자에 관계없이 안전하게 코드를 탐색하고 편집할 수 있도록 돕습니다. 작업 영역 신뢰 기능을 사용하면 프로젝트 폴더에서 자동 코드 실행을 허용하거나 제한할지 여부를 결정할 수 있습니다.

Trust this folder dialog

참고: 의심스러울 때는 폴더를 제한 모드로 두십시오. 나중에 언제든지 신뢰를 활성화할 수 있습니다.

안전한 코드 탐색

공개 리포지토리 및 파일 공유에서 사용할 수 있는 소스 코드가 많다는 것은 매우 좋습니다. 코딩 작업이나 문제 해결과 관련된 거의 모든 것에 대해 이미 좋은 해결책이 어딘가에 있을 것입니다. 그러나 오픈 소스 코드와 도구를 사용하면 위험이 따르며 악성 코드 실행 및 악용에 노출될 수 있습니다.

작업 영역 신뢰는 익숙하지 않은 코드를 작업할 때 제한 모드에서 작업 영역이 열리면 자동 코드 실행을 방지하여 추가적인 보안 계층을 제공합니다.

참고: 작업 영역 신뢰 기능을 비활성화하려면 security.workspace.trust.enabled를 false로 설정하면 됩니다. 작업하고 있는 파일의 출처와 무결성을 알고 있다고 확신하는 경우에만 작업 영역 신뢰를 비활성화하십시오.

제한 모드

작업 영역 신뢰 대화 상자에서 프롬프트가 표시될 때 아니요, 제작자를 신뢰하지 않습니다를 선택하면 VS Code가 제한 모드로 전환되어 코드 실행을 방지합니다. 워크벤치 상단에 폴더를 작업 영역 신뢰 편집기를 통해 관리하고 작업 영역 신뢰 사용자 가이드로 이동하는 더 알아보기 링크가 있는 배너가 표시됩니다.

Workspace Trust Restricted Mode banner

상태 표시줄에도 제한 모드 배지가 표시됩니다.

Workspace Trust Restricted Mode Status bar badge

제한 모드는 작업, 디버깅, 작업 영역 설정 및 확장을 비활성화하거나 제한하여 자동 코드 실행을 방지하려고 시도합니다.

제한 모드에서 비활성화된 기능의 전체 목록을 보려면 배너의 관리 링크를 클릭하거나 상태 표시줄의 제한 모드 배지를 클릭하여 작업 영역 신뢰 편집기를 열 수 있습니다.

Workspace Trust editor

작업 영역 신뢰

프로젝트의 제작자와 유지 관리자를 신뢰하는 경우 로컬 컴퓨터에서 해당 프로젝트의 폴더를 신뢰할 수 있습니다. 예를 들어, github.com/microsoft 또는 github.com/docker와 같이 잘 알려진 GitHub 조직의 리포지토리는 일반적으로 신뢰해도 안전합니다. 새 폴더를 열 때 표시되는 초기 작업 영역 신뢰 프롬프트를 통해 해당 폴더 및 하위 폴더를 신뢰할 수 있습니다.

또한 작업 영역 편집기를 불러와 폴더의 신뢰 상태를 빠르게 전환할 수도 있습니다. 작업 영역 편집기 대화 상자를 불러오는 방법은 여러 가지가 있습니다.

제한 모드일 때

  • 제한 모드 배너의 관리 링크
  • 제한 모드 상태 표시줄 항목

언제든지 다음을 사용할 수도 있습니다.

  • 명령 팔레트의 작업 영역: 작업 영역 신뢰 관리 명령 (⇧⌘P (Windows, Linux Ctrl+Shift+P))
  • 활동 표시줄의 관리 기어 아이콘에서 작업 영역 신뢰 관리

Manage Workspace Trust command in the Manage gear context menu

폴더 선택

폴더를 신뢰하면 작업 영역 신뢰 편집기에 표시되는 신뢰된 폴더 및 작업 영역 목록에 추가됩니다.

Workspace Trust editor Trusted Folders and Workspaces list

이 목록에서 폴더를 수동으로 추가, 편집 및 제거할 수 있으며, 신뢰가 활성화된 현재 폴더는 굵게 표시됩니다.

부모 폴더를 신뢰하는 옵션도 있습니다. 이렇게 하면 해당 부모 폴더와 모든 하위 폴더에 신뢰가 적용됩니다. 한 폴더 아래에 신뢰할 수 있는 콘텐츠가 포함된 여러 폴더가 있는 경우 유용할 수 있습니다.

확장 프로그램 활성화

제한 모드를 사용하고 싶지만 가장 좋아하는 확장 프로그램이 작업 영역 신뢰를 지원하지 않으면 어떻게 될까요? 이는 유용하고 기능적이지만 적극적으로 유지 관리되지 않아 작업 영역 신뢰 지원을 선언하지 않은 확장 프로그램의 경우 발생할 수 있습니다. 이 시나리오를 처리하기 위해 extensions.supportUntrustedWorkspaces 설정을 사용하여 확장 프로그램의 신뢰 상태를 재정의할 수 있습니다.

참고: 확장 프로그램의 작업 영역 신뢰 지원을 재정의할 때는 주의하세요. 확장 프로그램 작성자가 제한 모드에서 확장 프로그램을 비활성화하는 데에는 타당한 이유가 있을 수 있습니다.

아래는 Prettier 확장 프로그램에 대한 사용자 settings.json 항목입니다.

  "extensions.supportUntrustedWorkspaces": {
    "esbenp.prettier-vscode": {
      "supported": true,
      "version": "6.4.0"
    },
  },

supported 속성을 사용하여 작업 영역 신뢰 지원을 활성화하거나 비활성화할 수 있습니다. version 속성은 적용되는 정확한 확장 프로그램 버전을 지정하며, 모든 버전에 대한 상태를 설정하려면 버전 필드를 제거할 수 있습니다.

확장 프로그램 작성자가 제한 모드에서 어떤 기능을 제한할지 평가하고 결정하는 방법에 대해 더 알고 싶다면 작업 영역 신뢰 확장 프로그램 가이드를 읽어보세요.

설정

아래는 사용 가능한 작업 영역 신뢰 설정입니다.

  • security.workspace.trust.enabled - 작업 영역 신뢰 기능을 활성화합니다. 기본값은 true입니다.
  • security.workspace.trust.startupPrompt - 시작 시 작업 영역 신뢰 대화 상자를 표시할지 여부를 결정합니다. 기본값은 고유한 폴더 또는 작업 영역당 한 번만 표시하는 것입니다.
  • security.workspace.trust.emptyWindow - 빈 창(열린 폴더 없음)을 항상 신뢰할지 여부를 결정합니다. 기본값은 true입니다.
  • security.workspace.trust.untrustedFiles - 작업 영역의 느슨한 파일을 처리하는 방법을 제어합니다. 기본값은 프롬프트입니다.
  • extensions.supportUntrustedWorkspaces - 확장 프로그램의 작업 영역 신뢰 선언을 재정의합니다. true 또는 false 값을 가집니다.

작업 영역 신뢰에 대해 더 자세히 알아보고 싶다면 작업 영역 신뢰 사용자 가이드를 읽어보세요.

새로운 시작하기 환경

지난 몇 번의 반복을 통해 VS Code의 환영 페이지를 개선하는 작업을 진행했으며, 이번 반복부터 모든 사용자에게 새 환영 페이지(시작하기)가 기본적으로 활성화됨을 발표하게 되어 기쁩니다. 이 새로운 환경에서는 VS Code 자체 또는 설치된 확장 프로그램 모두 "가이드"를 환영 페이지에 기여할 수 있으며, 이는 VS Code 자체 또는 새 확장 프로그램 시작에 도움이 되도록 설계되었습니다. 예를 들어, Luna Paint 확장 프로그램은 이미지 편집기의 각 구성 요소를 이해하는 데 도움이 되는 가이드가 포함된 가이드를 제공합니다.

New welcome page, showing some of the walkthroughs core and extensions can contribute

또한, 모든 가이드를 완료하거나 (무시)한 후에는 VS Code가 콘텐츠를 재정렬하여 한 번의 클릭으로 액세스할 수 있는 최근 작업 영역 수를 두 배로 늘립니다.

New welcome page with all walkthroughs dismissed, showing extra recent workspaces entries

설정

  • workbench.startupEditor - 시작 시 표시될 기본 편집기를 제어합니다. 새로운 값 gettingStarted는 이전 기본값 welcome을 대체합니다. 다른 사용 가능한 옵션으로는 readme, gettingStartedInEmptyWorkbench, newUntitledFile 또는 none이 있습니다.
  • workbench.welcomePage.walkthroughs.openOnInstall - 확장 프로그램에서 제공하는 가이드가 설치 시 자동으로 열릴지 여부를 결정합니다.

기존 환영 페이지가 완전히 제거될 때까지 새 페이지는 시작하기라고 불립니다.

원격 저장소

원격 리포지토리 확장 프로그램은 1.56 버전에서 미리 보기 기능으로 내장되었으며 이제 공개적으로 사용 가능하지만, 더 이상 VS Code에 내장되지 않으므로 VS Code Marketplace에서 설치해야 합니다.

간단히 요약하면, 원격 리포지토리 확장 프로그램을 사용하면 리포지토리를 로컬로 복제하거나 로컬에 보유할 필요 없이 VS Code 내에서 직접 GitHub 리포지토리를 즉시 탐색, 검색, 편집 및 커밋할 수 있습니다.

이번 반복에서는 주로 버그 수정 및 릴리스를 위한 확장을 다듬는 데 중점을 두었지만 몇 가지 새로운 기능도 추가했습니다. 이제 원격 탐색기에서 원격 리포지토리를 보고 로컬에 커밋되지 않은 변경 사항을 빠르게 열거나 비교할 수 있습니다. 또한 동일한 리포지토리의 변경 사항을 현재 원격 리포지토리에 적용하여 커밋되지 않은 변경 사항을 한 브랜치에서 다른 브랜치로 빠르고 쉽게 이동할 수 있습니다.

Remote Repositories Remote Explorer view

테마: Amethyst Dark Theme

원격 리포지토리에 대해 더 자세히 알아보려면 원격 리포지토리 블로그 게시물과 YouTube 동영상을 확인하세요.

향상된 편집기 창 간 드래그 앤 드롭

이 릴리스에서는 편집기를 다른 창으로 드래그하는 기능이 향상되었습니다. 이제 diff 편집기, 사용자 지정 편집기 및 전체 편집기 그룹을 다른 창으로 드래그하여 해당 창에서 편집기를 열 수 있습니다.

Improved editor drag and drop across windows

테마: GitHub Light Theme

참고: 이 기능을 자주 사용하는 경우 자동 저장(files.autoSave)이 활성화되어 있는지 확인하여 한 창의 변경 사항이 다른 창에 자동으로 반영되도록 하십시오.

열린 편집기가 없을 때 창을 닫는 Cmd+W / Ctrl+W 키 바인딩 제거

빠른 Cmd+W / Ctrl+W 사용으로 마지막 편집기를 닫은 후 VS Code 창(인스턴스)이 갑자기 닫히는 것에 대해 사용자들이 좌절감을 느낀다는 피드백을 받았습니다. 팀 내에서의 빠른 설문 조사에서도 많은 사람들이 창을 닫기 위한 이 키 바인딩을 할당 해제했음을 밝혔으므로, 열린 편집기가 없을 때 창을 닫는 키 바인딩으로 Cmd+W / Ctrl+W를 제거했습니다.

사용자 keybindings.json 파일에서 다음을 구성하여 키 바인딩을 쉽게 복원할 수 있습니다.

macOS

{
  "key": "cmd+w",
  "command": "workbench.action.closeWindow",
  "when": "!editorIsOpen && !multipleEditorGroups"
}

Windows/Linux

{
  "key": "ctrl+w",
  "command": "workbench.action.closeWindow",
  "when": "!editorIsOpen && !multipleEditorGroups"
}

참고: 모든 플랫폼에는 창을 닫기 위한 전용 할당 키 바인딩이 있습니다.

  • macOS: Cmd+Shift+W
  • Linux: Alt+F4
  • Windows: Alt+F4

노트북 레이아웃 사용자 지정

이번 달에 노트북 편집기를 사용자의 워크플로에 맞게 사용자 지정할 수 있도록 여러 노트북 레이아웃 설정을 추가했습니다. 기본적으로 활성화되는 사용자 지정은 다음과 같습니다.

노트북 도구 모음

편집기에 노트북 도구 모음을 추가했습니다. 이를 통해 셀 삽입, 모든 셀 실행 또는 커널 전환과 같은 작업을 쉽게 수행할 수 있습니다. 도구 모음은 notebook.globalToolbar를 false로 설정하여 비활성화할 수 있습니다.

Notebook toolbar

출력 도구 모음

셀 출력 지우기 작업과 다른 출력 렌더러 또는 mime 형식을 선택하는 버튼이 셀 출력 옆의 단일 ... 줄임표 메뉴로 통합되었습니다. notebook.consolidatedOutputButton을 false로 설정하여 비활성화할 수 있습니다.

Notebook output toolbar

포커스 셀 테두리 강조 표시

VS Code는 이제 셀의 테두리 영역에 포커스 셀 강조 표시를 렌더링하는 것을 지원합니다. 이를 통해 많은 셀을 포함하는 노트북에서 어떤 셀에 포커스가 있는지 식별하는 데 도움이 됩니다. notebook.cellFocusIndicator 설정은 gutter(새로운 기본값) 또는 전체 셀 테두리를 강조 표시하는 border가 될 수 있습니다.

Notebook focus indicator on gutter

마우스 오버 시 접기 아이콘 표시

Markdown 셀의 접기 아이콘은 이제 항상 표시되는 대신 마우스 오버 시 표시됩니다. notebook.showFoldingControls를 mouseover(기본값) 또는 always로 설정하여 동작을 사용자 지정할 수 있습니다.

Notebook show focus icon on mouse over

이번 달에 구현된 전체 노트북 레이아웃 설정 목록은 다음과 같습니다.

  • notebook.cellFocusIndicator: 셀 측면에 색상 막대로 포커스 상태를 나타내는 옵션을 추가합니다(gutter, Jupyter와 유사).
  • notebook.cellToolbarVisibility: 셀이 포커스되거나 호버될 때 셀 도구 모음이 표시될지 여부를 결정합니다. 기본값은 셀이 포커스될 때만 표시하는 것입니다.
  • notebook.compactView: 활성화되면 셀이 더 간결한 스타일로 렌더링되며 빈 공간이 적습니다. 기본적으로 활성화되어 있습니다.
  • notebook.consolidatedOutputButton: 셀 출력 지우기 작업과 다른 출력 렌더러 또는 mime 형식을 선택하는 버튼이 셀 출력 옆의 단일 ... 줄임표 메뉴로 통합되었습니다. 이 새 메뉴는 이 설정으로 비활성화할 수 있습니다.
  • notebook.consolidatedRunButton: 이전 셀 실행 및 셀 및 아래 셀 실행이라는 두 가지 새 작업이 있습니다. 기본적으로 셀 도구 모음에 표시되지만, 이 설정을 활성화하면 실행 버튼 옆의 새 컨텍스트 메뉴로 이동됩니다.
  • notebook.dragAndDropEnabled: 셀에 대한 드래그 앤 드롭을 비활성화합니다. 여전히 명령(Alt+Up/Alt+Down 기본값)을 사용하여 셀을 재정렬할 수 있습니다.
  • notebook.globalToolbar: 노트북 편집기 상단에 도구 모음을 추가합니다.
  • notebook.insertToolbarLocation: 새 셀을 삽입하는 버튼이 셀 사이에 표시될지, 도구 모음에 표시될지, 둘 다 표시될지 또는 숨겨질지 제어합니다.
  • notebook.showCellStatusBar: 이 설정에는 visibleAfterExecute라는 새 옵션이 있습니다. 이 옵션은 공간을 절약하기 위해 셀이 실행될 때까지 셀 상태 표시줄을 숨깁니다. 실행되면 사용자가 실행 세부 정보를 검토할 수 있도록 표시됩니다.
  • notebook.showFoldingControls: Markdown 헤더에 나타나는 접기 셰브런이 항상 표시될지, 아니면 마우스 오버 시에만 표시될지 제어합니다.
  • notebook.editorOptionsCustomizations: 사용자가 노트북에서 셀 편집기 설정을 사용자 지정할 수 있습니다.

아래 이미지는 이러한 설정 중 몇 가지(상단 도구 모음, 테두리 강조 표시, 출력 ... 버튼)의 효과를 보여줍니다.

Notebook layout changes

빠른 선택 및 제안 위젯 색상 업데이트

트리 위젯 스타일과 더 잘 일치하도록 빠른 선택 및 제안 위젯의 포커스 상태를 업데이트했습니다. 이를 통해 포커스 전경을 제어하는 몇 가지 새 색상 토큰이 도입되었습니다.

  • list.focusHighlightForeground
  • quickInputList.focusForeground
  • editorSuggestWidget.selectedForeground

Quick Pick style in light theme

Suggest style in light theme

아이콘 테마: Fluent Icons

macOS용 터치 바 아이콘 업데이트

macOS 터치 바 아이콘을 업데이트하여 업데이트된 아이콘 스타일과 일치하도록 했습니다.

macOS 터치 바 아이콘 기본 보기

더 많은 컨트롤이 있는 디버깅 중 macOS 터치 바 아이콘 디버깅 중

웹뷰용 컨텍스트 메뉴

VS Code는 이제 Markdown 미리 보기, 릴리스 노트, 확장 프로그램 세부 정보 페이지와 같은 웹뷰 내에서 간단한 컨텍스트 메뉴를 표시하는 것을 지원합니다.

A context menu in a webview

현재 이 컨텍스트 메뉴에는 텍스트 복사 및 붙여넣기 작업이 포함되어 있습니다. 향후 메뉴에 추가 작업을 추가할 수 있습니다.

확장 프로그램의 웹뷰에 이 컨텍스트 메뉴가 방해가 된다면 contextmenu 이벤트에 preventDefault를 호출하여 표시되지 않도록 할 수 있습니다.

document.body.addEventListener('contextmenu', e => {
  e.preventDefault(); // cancel the built-in context menu
});

편집기

제안 미리 보기

새 설정 editor.suggest.preview를 활성화하면 선택한 제안 또는 스니펫의 미리 보기가 커서 위치에 표시됩니다.

Suggestion preview showing smart completions for the letter 'i'

테마: Dark+ (기본 다크)

사용 중단된 제안 숨기기

editor.suggest.showDeprecated라는 새 설정이 있으며, 기본값은 on이지만 off로 설정하면 사용 중단으로 표시된 항목이 제안에 표시되지 않습니다.

통합 터미널

터미널 탭

터미널 탭은 1.56 버전에서 미리 보기 기능으로 소개되었으며 이제 기본적으로 활성화됩니다. 새 탭 보기는 기본적으로 최소 두 개의 터미널이 있을 때만 표시됩니다. 단일 터미널의 경우 탭은 패널 제목에 "인라인"으로 표시됩니다. 또한 작업이 실행 중인지, 성공했는지 또는 실패했는지와 같은 터미널 상태라는 개념도 도입되었습니다.

Single inlined terminal tab, terminal tabs with status, and collapsed terminal tabs

아래는 이 릴리스의 주요 내용입니다.

  • 탭의 색상을 변경하여 빠르게 탐색하고 구분할 수 있습니다.
  • 탭을 드래그 앤 드롭하여 재정렬할 수 있습니다.
    drag and drop
  • 터미널 그룹의 탭을 빈 영역으로 드래그하면 그룹에서 제거됩니다(터미널 분할 해제, 컨텍스트 메뉴에서도 사용 가능).
    unsplit
  • 탭을 주 터미널 영역으로 드래그하면 그룹에 참여할 수 있습니다(컨텍스트 메뉴에서도 사용 가능).
    dragging a terminal tab to join a tab group
  • 이제 탭, + 버튼 또는 단일 탭의 아이콘을 클릭할 때 Alt 키를 누르면 터미널이 분할됩니다. 같은 방식으로 가운데 클릭으로 터미널을 종료할 수 있습니다.
    split terminal buttons
  • 실수로 터미널을 분할/종료하는 것을 방지하기 위해 탭 목록이 충분히 크지 않으면 인라인 작업이 표시되지 않습니다.
  • 터미널을 종료하여 하나만 남게 될 경우, 마우스가 뷰를 벗어나기 전까지 탭 목록이 숨겨지지 않습니다.

새로운 UX가 마음에 들지 않으면 "terminal.integrated.tabs.enabled": false를 설정하여 드롭다운으로 돌아갈 수 있습니다. 이 옵션은 앞으로도 계속 지원할 계획입니다.

터미널 프로필 개선

이번 릴리스에서는 터미널 프로필 시스템에 많은 개선 사항이 있었으며, 주요 내용은 다음과 같습니다.

  • VS Code 시작 시 터미널이 복원되면 defaultProfile이 존중되며 작업 및 디버깅에 사용됩니다.
  • settings.json에서 icon 및 defaultProfile에 대한 IntelliSense가 작동합니다.
  • overrideName이 기본 프로필에 대해 작동합니다.
  • defaultProfile은 작업 영역 설정에 설정할 수 있습니다. 또한 이제 새로운 작업 영역 신뢰 기능에 의해 제어됩니다.
  • defaultProfile과 shell 또는 shellArgs 설정이 사용되면, 이제 사용되지 않는 설정을 프로필 시스템으로 마이그레이션하라는 메시지가 표시됩니다.
  • color를 프로필에 설정할 수 있습니다.

제목 시퀀스 지원

terminal.integrated.experimentalUseTitleEvent 설정이 terminal.integrated.titleMode로 안정화되었습니다. 기본적으로 이 설정은 executable로 설정되어, 감지된 전경 프로세스를 기반으로 터미널 이름을 지정합니다.

Running 'git show' will result in the terminal's title changing to 'git'

이것을 sequence로 설정하면, 쉘이 설정하는 내용에 따라 제목이 결정됩니다. 이를 사용하려면 쉘 지원이 필요합니다. oh-my-zsh의 기본 프롬프트와 같이 세션에 대한 추가 정보를 표시하는 예시가 있습니다.

The oh-my-zsh default prompt will show the computer's name and current working directory

깨끗한 환경으로 시작하는 기능 개선

terminal.integrated.inheritEnv 설정은 v1.36부터 사용할 수 있었지만, Linux의 권한 문제로 실패하거나 macOS에서 예상대로 작동하지 않는 등 구현에 몇 가지 결함이 있었습니다.

VS Code가 기본 환경을 설정하는 방식이 개선되어, 시작 시의 초기 환경에 접근할 수 있게 되었습니다. 이는 대부분의 터미널이 작동하는 방식입니다. inheritEnv가 true로 설정되면 VS Code는 이제 초기 환경을 사용하고, false로 설정되면 소싱된 "쉘 환경"을 사용합니다. 이 설정은 터미널이 일반 터미널처럼 작동하도록 도울 수 있습니다. 그러나 프로필/rc 구성이 올바르게 설정되지 않은 경우 문제가 발생할 수 있습니다.

Windows에서 네이티브 줄 바꿈 지원

터미널의 줄 바꿈은 작업 문제 구분 기호 및 링크 감지에 영향을 줍니다. 역사적으로 Windows 터미널은 Unix pty를 에뮬레이션하는 기술이 줄 바꿈을 지원하지 않았기 때문에 줄을 줄 바꿈으로 표시하기 위해 휴리스틱을 사용했습니다. 이는 최근 Windows 버전에서 변경되었으며, Windows 10 21376+ (현재 Insiders만 해당)로 업데이트하면 이 휴리스틱이 비활성화되고 Windows Terminal과 마찬가지로 줄 바꿈된 줄이 올바르게 작동해야 합니다.

작업

터미널 탭의 작업 상태

작업의 상태가 이제 터미널 탭에 표시됩니다. 백그라운드 작업의 경우, 관련 문제 구분 기호가 있는 경우에만 상태가 표시됩니다.

Task status on a terminal tab

작업 터미널 자동 닫기

작업 presentation 속성에 새로운 close 속성이 있습니다. close를 true로 설정하면 작업이 종료될 때 터미널이 닫힙니다.

{
  "type": "shell",
  "command": "node build/lib/preLaunch.js",
  "label": "Ensure Prelaunch Dependencies",
  "presentation": {
    "reveal": "silent",
    "close": true
  }
}

디버깅

JavaScript 디버깅

언제나 그렇듯이, 모든 변경 사항 목록은 vscode-js-debug 변경 로그에서 확인할 수 있습니다.

Edge 개발자 도구 통합

JavaScript 디버거는 Microsoft Edge 개발자 도구와 통합되어 브라우저 디버깅을 위한 DOM, 스타일 및 네트워크 검사기를 제공합니다. 이는 디버그 도구 모음의 새로운 "검사" 아이콘을 통해 액세스할 수 있습니다.

Debugger inspect button

아래 짧은 동영상은 "검사" 버튼을 선택하고 Edge DevTools에서 요소를 탐색하는 것을 보여줍니다.

"검사" 아이콘을 클릭하고 Edge에서 요소를 클릭하는 시연 테마: Codesong

브라우저 디버깅에 Microsoft Edge를 이미 사용하고 있지 않다면, launch.json에서 "type": "chrome" 또는 "type": "pwa-chrome"을 "type": "pwa-msedge"로 바꿔서 Edge로 전환할 수 있습니다. 이는 Blazor 애플리케이션에서도 해당 시작 구성에 "browser": "edge"를 설정하여 지원됩니다.

소스맵에서 이름이 변경된 식별자 지원

오랫동안 요청되었던 기능으로, JavaScript 디버거는 이제 소스맵에서 이름이 변경된 식별자를 지원합니다. 이는 특히 압축된 코드를 디버깅할 때 유용합니다.

중단점에서 일시 중지된 스크린샷. 압축된 코드가 실행되고 있지만 변수, 감시 및 디버그 콘솔 보기는 원래 이름으로 변수에 액세스할 수 있음을 보여줍니다. 테마: Codesong

이름이 변경된 변수는 변수 보기, 감시 보기 및 디버그 콘솔 REPL에서 지원됩니다. 도구가 이름을 변경하는지 확인하려면 생성하는 소스맵 파일에서 비어 있지 않은 "names" 배열을 확인하세요.

BREAKPOINTS 보기에서 히트 중단점 표시

중단점이 히트되면 VS Code는 이제 BREAKPOINTS 보기에서 해당 중단점을 선택하고 표시합니다. 이렇게 하면 프로그램이 중단된 정확한 중단점을 이해하기 쉬워집니다.

현재 JS-debug 확장 프로그램만 이 기능을 지원하지만, 다른 디버그 확장 프로그램도 곧 지원할 것으로 예상됩니다.

As the user steps in the program, a breakpoint that got hit is selected and revealed in the BREAKPOINTS view

언어

TypeScript 4.3.2

VS Code는 이제 TypeScript 4.3.2를 제공합니다. 이 주요 업데이트에는 많은 TypeScript 언어 개선 사항과 JavaScript 및 TypeScript 도구에 대한 많은 개선 사항 및 버그 수정이 포함되어 있습니다.

TypeScript 4.3에 대해 더 자세히 알아보려면 TypeScript 블로그를 읽어보세요.

JSDoc @link 지원

VS Code는 이제 JavaScript 및 TypeScript 주석에서 JSDoc @link 태그를 지원합니다. 이를 통해 문서에서 기호로 이동하는 클릭 가능한 링크를 만들 수 있습니다.

Navigating code using JSDoc @link tags

JSDoc @link 태그는 {@link symbolName}과 같이 작성됩니다. 기호 이름 대신 렌더링할 텍스트를 선택적으로 지정할 수도 있습니다: {@link class.property Alt text}.

@link는 호버, 제안 및 시그니처 도움말에서 지원됩니다. 또한 VS Code 확장성 타입 선언 파일 vscode.d.ts를 업데이트하여 @link를 사용하도록 했습니다.

가져오기 문에서 완성

JavaScript 및 TypeScript의 자동 가져오기는 제안을 수락할 때 자동으로 가져오기를 추가합니다. VS Code 1.57에서는 이제 가져오기 문 자체를 작성할 때도 작동합니다.

Auto imports in an import statement

수동으로 가져오기를 추가해야 할 때 시간을 절약할 수 있습니다.

코드 파일이 아닌 파일에 대한 정의로 이동

많은 최신 JavaScript 번들러 및 프레임워크는 이미지 및 스타일시트와 같은 자산을 가져오기 위해 import 문을 사용합니다. 이제 정의로 이동을 사용하여 이러한 가져오기를 탐색할 수 있습니다.

Navigating to a non-JS/TS import

이것은 코드를 탐색하기 위해 Ctrl/Cmd 클릭을 사용할 때 가장 유용할 것입니다.

가져오기 정렬 코드 작업

JavaScript 및 TypeScript에 대한 가져오기 정렬 코드 작업은 가져오기를 정렬합니다. 그러나 가져오기 구성과는 달리 사용되지 않는 가져오기는 제거하지 않습니다.

저장 시 가져오기 정렬을 활성화하려면 다음을 설정할 수도 있습니다.

"editor.codeActionsOnSave": {
    "source.sortImports": true
}

함수 반환 형식 추론 빠른 수정

TypeScript에 대한 함수 반환 형식 추론 리팩토링은 함수에 명시적인 반환 형식 주석을 추가합니다.

The Infer function return type refactoring in action

더 명시적인 형식을 추가하고 싶을 때 유용합니다. 이 리팩토링은 반환 형식을 명명된 형식/인터페이스로 추출할 때 또는 함수의 반환 형식을 수정해야 할 때 시간을 절약할 수 있습니다.

TS 서버 로깅 비활성화 프롬프트

VS Code는 이제 TypeScript 서버 로깅이 장기간 활성화되어 있는 경우 사용자에게 알립니다.

TS server logging enabled notification

로깅은 성능에 상당한 영향을 미칠 수 있으므로 문제를 진단하려고 적극적으로 노력하는 경우가 아니면 비활성화된 상태로 두는 것이 가장 좋습니다.

확장 프로그램 기여

원격 개발

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

1.57의 주요 기능 하이라이트:

  • 포워딩된 포트에 대한 원하는 프로토콜 제어.
  • 포트 충돌 포워딩에 대한 선택적 감시.
  • Dev Containers는 작업 영역 신뢰 보안 기능을 지원합니다.
  • Dev Containers에서 환경 변수 탐지 개선.

새 확장 기능 및 버그 수정에 대한 자세한 내용은 원격 개발 릴리스 노트에서 확인할 수 있습니다.

확장 프로그램 작성

Notebook API

대부분의 노트북 API를 최종 확정했습니다. API는 세 가지 별도 부분으로 구성됩니다.

  1. NotebookSerializer API는 notebooks 기여 지점과 함께 VS Code가 노트북 문서를 열고, 수정하고, 저장할 수 있도록 합니다.
  2. 셀 출력을 표시하는 노트북 렌더러입니다. 확장 프로그램의 package.json 파일에 있는 notebookRenderer 기여 지점을 통해 추가됩니다.
  3. 코드 셀에 대한 출력을 생성하는 NotebookController API입니다.

간단한 노트북 직렬 변환기와 에코 컨트롤러의 예시입니다. 직렬 변환기는 빈 파일에 대한 특수 처리를 포함하여 JSON.parse 및 stringify를 사용합니다. 컨트롤러는 셀 텍스트의 대문자 변형을 일반 텍스트와 HTML로 반환합니다.

// serialize/deserialize notebook
vscode.workspace.registerNotebookSerializer(
  'echobook',
  new (class implements vscode.NotebookSerializer {
    // serializer is relying on JSON.parse/stringify
    deserializeNotebook(content: Uint8Array) {
      return JSON.parse(new TextDecoder().decode(content) || '{"cells":[]}');
    }
    serializeNotebook(data: vscode.NotebookData) {
      return new TextEncoder().encode(JSON.stringify(data));
    }
  })()
);

// notebook controller
vscode.notebooks.createNotebookController(
  'myId',
  'echobook',
  'Echo',
  (cells, _notebook, controller) => {
    for (let cell of cells) {
      // execution means to echo in upper-case, once as plain text and once as html
      const execution = controller.createNotebookCellExecution(cell);
      execution.start();
      const echo = cell.document.getText().toUpperCase();
      const textItem = vscode.NotebookCellOutputItem.text(echo, 'text/plain');
      const htmlItem = vscode.NotebookCellOutputItem.text(`<b>${echo}</b>`, 'text/html');
      const output = new vscode.NotebookCellOutput([textItem, htmlItem]);
      execution.replaceOutput(output);
      execution.end(true);
    }
  }
);

예시는 *.echobook 파일에 대한 노트북 유형을 정적으로 등록합니다. 또한 VS Code는 이러한 노트북이 열릴 때마다 onNotebook:echobook 활성화 이벤트를 발생시킵니다.

"contributes": {
  "notebooks": [{
      "type": "echobook",
      "displayName": "Echobook",
      "selector": [{
        "filenamePattern": "*.echobook"
      }]
  }]
}

상태 표시줄 항목 'id' 및 'name' 속성

StatusBarItem 식별자 및 이름 속성에 대한 API를 최종 확정했습니다. 식별자는 createStatusBarItem 메서드의 새 오버로드에서 전달할 수 있으며, StatusBarItem 자체의 name 속성은 동적으로 변경될 수 있습니다.

이러한 새 속성은 상태 표시줄의 컨텍스트 메뉴에 사용하여 개별 항목에 이름을 지정하고 사용자가 항목을 표시하거나 숨길 수 있도록 합니다. 이러한 속성을 제공하지 않으면 메뉴는 단일 확장 프로그램의 모든 상태 항목을 단일 항목 아래에 집계합니다.

Status bar item menu

확장 프로그램이 상태 표시줄에 기여하는 경우 새 API로 업데이트하는 것을 고려하세요.

새 터미널에 메시지 인쇄

window.createTerminal을 사용하여 터미널을 만들 때, TerminalOptions.message를 통해 터미널 상단에 인쇄될 메시지를 설정할 수 있습니다. 이 메시지는 텍스트 스타일을 활성화하기 위해 ANSI 이스케이프 시퀀스를 지원합니다.

vscode.window.createTerminal({
  name: `My terminal`,
  message: '\x1b[3;1mSome custom message\x1b[0m'
});

Terminal displaying a custom message

인라인 값에 대한 새 테마 색상

디버거 인라인 값의 테마를 위한 새 색상이 추가되었습니다.

  • editor.inlineValuesBackground: 디버그 인라인 값의 전경 텍스트 색상
  • editor.inlineValuesForeground: 디버그 인라인 값의 배경 색상.

참고로, 인라인 값은 디버그 확장이 인라인 값 제공자를 등록했거나 debug.inlineValues 설정이 true인 경우 디버깅 중에 표시됩니다.

Debug inline values are shown with the foreground and background color customized

vscode-webview.d.ts

새로 게시된 @types/vscode-webview 패키지는 VS Code가 웹뷰 내에서 노출하는 API에 대한 타입을 추가합니다.

npm install --save-dev @types/vscode-webview로 이러한 타입을 설치할 수 있습니다. 웹뷰 타입이 프로젝트에서 인식되지 않으면 jsconfig / tsconfig의 typeAcquisition 섹션에 추가해 보세요.

"typeAcquisition": {
  "include": [
    "@types/vscode-webview"
  ]
}

또는 코드에 삼중 슬래시 참조를 추가하세요.

///<reference types="@types/vscode-webview"/>

향상된 웹뷰 배열 버퍼 전송

이전 버전의 VS Code에서는 웹뷰로 또는 웹뷰에서 타입 배열을 보내는 데 몇 가지 문제가 있었습니다.

  • UInt8Array와 같은 타입 배열은 비효율적으로 직렬화됩니다. 이는 많은 메가바이트의 데이터를 전송해야 할 때 성능 문제를 야기할 수 있습니다.
  • 보내진 타입 배열은 수신 측에서 올바른 유형으로 다시 생성되지 않습니다. UInt8Array를 보내면 수신자는 대신 UInt8Array의 데이터 값을 가진 일반 객체를 받게 됩니다.

이 두 가지 모두 버그이지만, 기존 동작에 의존하는 확장 프로그램을 잠재적으로 중단할 수 있기 때문에 수정할 수 없습니다. 동시에 새로 작성된 확장 프로그램이 현재의 혼란스럽고 비효율적인 동작을 원하는 이유는 전혀 없습니다.

따라서 기존 확장 프로그램의 경우 기존 동작을 그대로 유지하지만 새 확장 프로그램을 더 올바른 동작으로 이동하기로 결정했습니다. 이는 확장 프로그램의 package.json에 있는 engines 값을 확인하여 수행됩니다.

"engines": {
  "vscode": "^1.57.0",
}

확장 프로그램이 VS Code 1.57 이상을 대상으로 하는 경우, 타입 배열은 수신 측에서 다시 생성되어야 하며, 웹뷰로의 대형 타입 배열 전송이 훨씬 더 효율적이 됩니다.

디버그 세션에 parentSession 추가

얼마 전 VS Code에 계층적 디버그 세션 지원이 추가되었지만, 계층 구조에 대한 정보는 확장 API에 노출되지 않았습니다. 이를 해결하기 위해 DebugSession 인터페이스에 부모 세션을 참조하는 새로운 속성이 추가되었습니다. 세션의 부모는 변경되지 않습니다.

export interface DebugSession {
  /**
    * The parent session of this debug session, if it was created as a child.
    * @see DebugSessionOptions.parentSession
    */
  readonly parentSession?: DebugSession;

  // ...

VS Code Insiders 버전 대상 지정 개선

제안된 API를 사용하는 확장을 작업할 때, VS Code Insiders 빌드에 호환되지 않는 변경 사항이 포함될 수 있습니다. 사용자를 위해 보다 원활한 전환을 제공하기 위해 이제 날짜 태그를 사용하여 Insiders 버전을 정확하게 지정할 수 있습니다. 예를 들어, engines.vscode를 ^1.56.0-20210428로 설정하면 2020년 4월 28일 0:00 UTC 이후에 생성된 VS Code 1.56 (또는 그 이상) 빌드를 대상으로 할 수 있습니다. 이를 통해 예정된 Insiders 버전이 릴리스되기 전에 날짜가 지난 확장 프로그램 업데이트를 안전하게 릴리스할 수 있습니다.

"engines": {
  "vscode": "^1.56.0-20210428",
}

트리 호버에 명령 URI 지원

TreeItem에 신뢰할 수 있는 Markdown 툴팁이 있는 경우, 해당 툴팁에는 [this is a link](command:workbench.action.quickOpenView) 형식의 명령이 포함될 수 있습니다. 이는 Markdown에서 명령 링크가 지원되는 다른 모든 위치와 동일한 형식을 따릅니다.

제안된 확장 API

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

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

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

테스트

이번 반복에서는 테스트 API의 첫 부분을 최종 완료하려고 했지만, 다른 인플라이트 기능이 많아 연기되었습니다. 이번 반복에서는 테스트 API에 호환되지 않는 변경 사항은 없었지만, 에디터 경험에 대한 진행은 계속되었습니다. 예를 들어, Peek 보기에는 현재 및 이전 테스트 실행 결과를 탐색할 수 있는 분할 보기가 추가되었습니다.

분할 보기의 오른쪽 면에 참조 스타일 트리가 표시된 Peek 보기 이미지 테마: Codesong

테스트에 Ctrl+;로 시작하는 코드 키 바인딩 세트가 추가되었고, Peek 보기에서 Markdown 메시지에 대한 지원이 개선되었으며, 많은 버그가 수정되었습니다.

테스트를 위해 Test Explorer UI 확장을 사용하는 경우, testExplorer.useNativeTesting 설정을 토글하여 새로운 네이티브 UI로 전환할 수 있습니다. 다음 반복에서는 이 설정의 소셜라이징을 늘리고 파트너 확장 팀과의 채택을 시작할 계획입니다.

터미널 프로필 기여

이 API를 통해 확장은 터미널 프로필 시스템에 기여할 수 있습니다. 확장이 작동하려면 몇 가지 작업을 수행해야 합니다. 먼저 package.json에 프로필을 기여합니다.

"contributes": {
  "terminal": {
    "profiles": [
      {
        "title": "Profile from extension",
        "id": "my-ext.terminal-profile",
        "icon": "lightbulb"
      }
    ]
  },
}

그런 다음 새로운 onTerminalProfile 활성화 이벤트에서 확장을 활성화합니다.

"activationEvents": [
  "onTerminalProfile:my-ext.terminal-profile"
]

마지막으로, 활성화 이벤트에서 프로바이더를 등록합니다.

vscode.window.registerTerminalProfileProvider('my-ext.terminal-profile', {
  provideProfileOptions(token) {
    return {
      name: 'Profile from extension',
      shellPath: 'cmd.exe'
    };
  }
});

제안된 API가 활성화된 경우, 기여된 프로필은 프로필 목록에 표시됩니다.

Extension contributed profile is displayed in the profiles list

터미널 옵션에 iconPath 지원

표준 iconPath 유형은 터미널 탭에 표시되는 터미널 아이콘을 설정하기 위해 TerminalOptions 및 TerminalExtensionOptions에서 지원됩니다.

readonly iconPath?: Uri | { light: Uri; dark: Uri } | ThemeIcon;

가상 터미널 제목 변경

새로운 이벤트 Pseudoterminal.onDidChangeName은 가상 터미널 기반 터미널을 제어할 수 있도록 합니다.

const writeEmitter = new EventEmitter<string>();
const nameEmitter = new EventEmitter<string>();
const pty = {
  onDidWrite: writeEmitter.event,
  open: () => writeEmitter.fire('Type to change the title of the terminal'),
  close: () => {
    /* noop*/
  },
  handleInput: (data: string) => nameEmitter.fire(data)
};
const terminal = vscode.window.createTerminal({
  name: `My Terminal`,
  pty
});
terminal.show();

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

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

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

asExternalUri에서 워크스페이스 URI 지원

기존 vscode.env.asExternalUri API는 이제 워크스페이스 URI 처리를 지원합니다. 이를 통해 확장 작성자는 주어진 워크스페이스를 직접 열 수 있는 시스템 전체 URI를 만들 수 있습니다.

예를 들어,

const uri = await vscode.env.asExternalUri('file:///Users/john/work/code');

결과 uri는 운영 체제에서 열 수 있으며 VS Code는 해당 워크스페이스를 엽니다.

엔지니어링

Electron 샌드박스 지원을 위한 진행 상황

이번 마일스톤에서는 Electron의 샌드박스 및 컨텍스트 격리 기능을 활성화하기 위해 VS Code 창을 계속 준비했습니다.

구체적으로

  • 렌더러에서 사용되는 코드에서 Node.js 종속성을 제거했습니다.
  • webview 사용을 완전히 중단하고 사용자 지정 보기 및 편집기에 iframe으로 전환하는 것을 계속 조사했습니다.

문서

Build 2021의 VS Code

Microsoft Build 2021 개발자 이벤트를 놓치셨더라도 세션을 다시 시청할 수 있습니다. VS Code 사용자에게 흥미로울 것이라고 생각하는 세션 목록을 모아 놓은 Visual Studio Code at Build 2021 블로그 게시물을 확인하세요.

What's New in VS Code Build 2021 session on YouTube

브라우저 디버깅

새로운 주제 VS Code의 브라우저 디버깅은 Edge 및 Chrome 브라우저에 대한 내장 디버깅 지원을 설명합니다. VS Code를 구성하여 새 브라우저 디버그 세션(Debug: Open Link 명령을 통해)을 시작하거나 실행 중인 브라우저에 연결할 수 있습니다.

PyTorch

VS Code 내에서 PyTorch 머신 러닝 프레임워크를 사용하는 방법에 대한 새로운 주제가 있습니다. VS Code의 PyTorch 지원 기사에서는 Jupyter Notebook을 PyTorch 및 TensorFlow 데이터 형식으로 확장하는 방법을 배울 수 있습니다.

PyTorch logo

주요 수정 사항

  • 71966: 전체 창이 멈추는 경우가 잦음
  • 85332: Windows: 파일 삭제 시 멈춤
  • 95077: 터미널 "단어" 링크 제공자가 래핑을 지원하지 않음
  • 108804: 창을 열기 전에 셸 환경 해상도를 기다리지 않음
  • 120004: VS Code의 통합 터미널에서 이상한 글자 간격
  • 125035: 디버그 콘솔 필터 텍스트는 새로고침 간에 유지되어야 함
  • iOS/iPadOS: iOS/iPadOS 플랫폼에 대한 여러 가지 수정이 이루어졌습니다.

감사합니다

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

이슈 추적에 대한 기여

vscode 기여

vscode-css-languageservice에 대한 기여

vscode-eslint 기여

vscode-js-debug 기여

vscode-languageserver-node에 기여

vscode-pull-request-github 기여

vscode-vsce 기여

language-server-protocol 기여

monaco-languages에 대한 기여

monaco-typescript에 대한 기여

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