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

2022년 5월 (버전 1.68)

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

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

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

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

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

워크벤치

표시 언어 구성 개선

표시 언어 구성 명령이 새로워져 다음 내용이 포함됩니다.

  • 해당 언어로 된 언어 이름.
  • 사용 가능한 언어 섹션에는 컴퓨터에 설치되지 않은 언어가 표시되며, 해당 언어를 선택하면 자동으로 설치되고 적용됩니다.

Configure Display Language dropdown with installed and available Language Packs in their language

테마: Panda Theme

이를 통해 언어 팩을 더 쉽게 찾을 수 있을 것입니다. 여러분의 의견을 들려주세요!

문제 패널 테이블 보기

이번 마일스톤에서는 사용자가 문제 패널의 보기 모드를 트리와 테이블 간에 전환할 수 있는 새로운 기능을 추가했습니다. 트리 보기와 비교하여 테이블은 각 문제의 출처(언어 서비스 또는 확장 프로그램)를 표시하여 사용자가 출처별로 문제를 필터링할 수 있도록 합니다.

Problems panel table view

테마: GitHub Dark Dimmed Theme

문제 패널의 오른쪽 상단에 있는 테이블로 보기/트리로 보기 버튼을 사용하여 보기 UI를 전환하거나, 문제: 기본 보기 모드 설정 (problems.defaultViewMode)으로 기본 보기 모드를 변경할 수 있습니다.

Problems panel View at Table button

지원 중단된 확장 프로그램

이번 마일스톤에서는 VS Code에서 지원 중단된 확장 프로그램에 대한 지원을 추가했습니다. 확장 프로그램은 단순히 지원 중단되거나, 다른 확장 프로그램을 대신하여 지원 중단되거나, 기능이 VS Code에 내장될 수 있습니다. VS Code는 확장 프로그램 보기에서 다음과 같이 지원 중단된 확장 프로그램을 표시합니다.

더 이상 유지 관리되지 않는 지원 중단된 확장 프로그램.

Deprecated extension with no maintenance

다른 확장 프로그램을 대신하여 지원 중단된 확장 프로그램. 이 경우 VS Code는 사용자에게 이 확장 프로그램을 설치할 수 없습니다.

Deprecated extension with alternative

기능이 VS Code에 내장되어 설정 구성을 통해 활성화할 수 있는 지원 중단된 확장 프로그램.

Deprecated extension with builtin to VS Code

VS Code는 지원 중단된 확장 프로그램을 자동으로 마이그레이션하거나 제거하지 않습니다. 권장 확장 프로그램으로 전환하는 데 도움이 되는 마이그레이션 버튼이 표시됩니다.

Migrate deprecated extension

테마: GitHub Dark Dimmed Theme

참고: 지원 중단된 확장 프로그램 목록은 VS Code에서 관리합니다. 지원 중단되어야 한다고 생각하는 확장 프로그램이 있다면, 이 토론에 댓글을 달아 저희에게 알려주세요.

확장 프로그램 후원

VS Code는 이제 사용자가 좋아하는 확장 프로그램에 후원할 수 있도록 허용합니다. 확장 프로그램을 후원할 수 있으면, VS Code는 확장 프로그램 보기 세부 정보 페이지에 다음과 같이 후원 버튼을 표시합니다.

Sponsor extension button on Extensions view Details page

테마: GitHub Dark Dimmed Theme

후원 버튼을 클릭하면 확장 프로그램의 후원 URL로 이동하여 지원을 제공할 수 있습니다. 확장 프로그램에 대한 이 기능을 사용 설정하는 방법에 대해 알아보려면 확장 프로그램 후원을 참조하세요.

.gitignore 기반 탐색기 파일 숨기기

파일 탐색기에서 이제 .gitignore 파일에 의해 제외된 파일을 구문 분석하고 숨기는 기능을 지원합니다. 이는 탐색기: Git 무시 제외 (explorer.excludeGitIgnore) 설정을 통해 활성화할 수 있습니다. 이 설정은 files.exclude와 함께 작동하여 원치 않는 파일을 탐색기에서 숨깁니다.

참고: 현재 !package.json과 같은 부정 패턴은 구문 분석할 수 없습니다.

호버 위치 잠금

일부 사용자 지정 호버는 다른 UI 요소(예: 스크롤 막대)의 존재로 인해 마우스로 이동하기 어렵거나 불가능합니다. 호버가 활성 상태일 때 Alt 키를 누르면 호버가 "잠금"되어 더 넓은 테두리가 표시되고 호버 외부로의 마우스 이동이 숨겨지는 것을 방지합니다. 이것은 주로 호버가 화면 확대/축소 프로그램과 잘 작동하도록 하는 접근성 기능이지만, 호버에서 텍스트를 복사하는 데도 유용합니다. 이 기능은 편집기 호버가 editor.hover.sticky 설정을 통해 명시적으로 지정되지 않는 한 항상 마우스 이동이 가능하므로 편집기 외부에서만 적용됩니다.

설정 편집기 개선

설정 편집기에는 이제 언어별 설정에 대한 기본값 재정의 표시기가 표시됩니다. 설정 편집기 검색창에서 언어 필터를 추가하여 언어별 설정을 볼 수 있습니다. 명시적으로 입력하거나(@lang:javascript), 검색창 오른쪽에 있는 필터 버튼을 클릭하고 언어 옵션을 선택하여 필터링할 수 있습니다.

기본값 재정의 표시기가 표시되면, 언어별 설정의 기본값이 확장 프로그램에 의해 재정의되었음을 나타냅니다. 표시기는 또한 기본값을 재정의한 확장 프로그램을 나타냅니다.

테마: Light Pink

이번 반복에서는 설정 편집기의 일부 링크가 설정 편집기 검색창에 이미 검색 쿼리가 있을 때 올바르게 리디렉션되지 않던 동작이 수정되었습니다. 또한 링크에 올바른 스타일이 적용되어 마우스를 올렸을 때 더 명확하게 표시됩니다.

<video src="/assets/updates/1_68/settings-editor-working-links.mp4" autoplay loop controls muted title="설정 편집기에서 "font"라는 단어를 검색한 후 목차에서 터미널 범주를 선택하면, 설정 terminal.integrated.fontFamily가 표시되고 해당 설명에는 editor.fontFamily 설정에 대한 링크가 포함됩니다. 이 링크를 클릭하면 설정으로 올바르게 이동합니다.">

테마: Light Pink

댓글 위젯 기본 버튼

댓글 위젯은 첫 번째(가장 오른쪽) 작업에 기본 버튼 색상을 사용합니다.

Add Comment has the primary button color

터미널

찾은 항목 배경색

지난 릴리스에서는 터미널에서 찾은 모든 항목 주위에 테두리를 표시하도록 구현했지만, 이는 셀 배경색을 동적으로 변경하는 기능이 가능해질 때까지 임시 해결책이었습니다. 이제 테마의 기본값으로 색상이 지정된 배경색이 적용되어 편집기와 유사한 경험을 제공합니다.

Find now uses the blue from the editor's find for the active match and the orange for highlights

terminal.findMatchBorder 또는 terminal.findMatchHighlightBorder를 사용하는 테마 작성자라면, 테마에 더 적합하거나 대비를 돕는다면 terminal.findMatchBackground 및 terminal.findMatchHighlightBackground로 마이그레이션하는 것이 좋습니다.

대비 및 최소 대비 비율 개선

찾은 항목 배경색 작업으로 인해 터미널의 배경 및 전경색 작업 방식에 더 많은 유연성이 생겼습니다. 이로 인해 터미널의 대비가 개선되었고 터미널 시각적 요소가 편집기와 더 일치하게 되었습니다. 또한 텍스트의 가시성을 높이기 위해 전경색을 동적으로 변경하는 최소 대비 비율 기능이 추가되었습니다.

  • 대비가 충족되지 않으면 이제 휘도가 반대 방향으로 이동합니다. 예를 들어, 밝은 회색 배경에 어두운 회색 텍스트로 대비가 충족되지 않고 순수한 검은색(#_000000)이라면, 색상은 흰색을 향해서도 이동하며 원하는 대비 비율을 가장 잘 충족하는 값이 사용됩니다.

    Darker grey on lighter dark can now use a light foreground color if needed

  • GPU 가속이 비활성화된 경우 선택 영역이 이제 텍스트 아래에 그려지며 불투명한 색상을 지원합니다. 이전에는 부분적으로 투명해야 했고 전경색을 희미하게 만들었습니다. 이 변경 덕분에 선택 영역 색상은 편집기와 동일한 색상을 사용합니다.

    Foreground color are retained in selections

  • Nerd font 기호는 이제 근처 텍스트와 혼합되도록 최소 대비 비율을 적용하지만, Powerline 기호 및 상자 그림 문자는 전경 문자가 없는 반전된 셀과 인접한 경우가 많기 때문에 최소 대비 비율을 적용하지 않습니다.

    Powerlines no longer have odd colors between the colored sections

  • 이제 테마에서 고대비 테마에 기본적으로 사용될 고정 선택 전경색을 지정할 수 있습니다.

    The dark high contrast theme now uses black as its selection foreground

  • 결과 전경색을 더 정확하게 만들기 위해 몇 가지 버그가 수정되었습니다.

원래 색상을 선호하는 경우 "terminal.integrated.minimumContrastRatio": 1로 설정하여 최소 대비 비율을 비활성화할 수 있다는 점을 다시 알려드립니다.

작업

기본 작업에 대한 glob 패턴

기본 빌드 및 테스트 작업은 활성 파일이 파일 이름 glob 패턴과 일치하는 경우에만 "기본"으로 범위가 지정될 수 있습니다.

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "echo txt",
            "type": "shell",
            "command": "echo TextFile",
            "group": {
                "kind": "build",
                "isDefault": "**.txt" // This is a glob pattern which will only match when the active file has a .txt extension.
            }
        },
        {
            "label": "echo js",
            "type": "shell",
            "command": "echo JavascriptFile",
            "group": {
                "kind": "build",
                "isDefault": "**.js" // This is a glob pattern which will only match when the active file has a .js extension.
            },
        }
    ]
}

소스 제어

새로운 풀 리퀘스트 흐름에 맞춰 Git 확장 프로그램에 몇 가지 업데이트가 있었습니다.

Git: 브랜치 접두사

새로운 브랜치 생성 과정을 더 부드럽게 만들기 위해, 새 브랜치를 생성할 때 접두사로 사용할 문자열을 지정하는 새 설정 git.branchPrefix가 추가되었습니다.

Git: 브랜치 이름 생성

새 설정 git.branchRandomName.enable은 새 브랜치를 생성할 때마다 VS Code가 임의의 브랜치 이름을 제안하도록 합니다. 임의의 이름은 사전에 의해 생성되며, git.branchRandomName.dictionary 설정을 통해 제어할 수 있습니다. 지원되는 사전은 다음과 같습니다: adjectives (기본값), animals (기본값), colors, numbers.

Git: 브랜치 보호

새로운 git.branchProtection 설정을 사용하면 특정 브랜치를 보호하도록 구성할 수 있습니다. VS Code는 보호된 브랜치에 직접 커밋하는 것을 방지하고 대신 커밋할 새 브랜치를 생성할 기회를 제공합니다. git.branchProtectionPrompt 설정을 사용하여 이 동작을 미세 조정할 수 있습니다.

GitHub: 풀 리퀘스트 템플릿 지원

GitHub 확장 프로그램은 이제 풀 리퀘스트 템플릿을 이해하고 새로 포크된 리포지토리에서 PR을 생성할 때 기본값으로 사용합니다.

노트북

셀 표시 변경 사항

몇 가지 시나리오에서 뷰포트 외부의 셀이 표시되는 방식을 조정했습니다.

개요 보기에서 셀을 클릭하면 해당 셀이 뷰포트 외부에 있는 경우, 노트북은 이제 해당 셀을 뷰포트의 약 1/5 지점에 표시하도록 스크롤됩니다. 이는 텍스트 편집기의 개요 동작과 일치합니다.

셀 편집기에서 커서가 있는 경우, 편집기의 첫 번째 또는 마지막 줄을 지나 커서를 이동하여 다음 셀 편집기로 이동할 수 있습니다. 이제 뷰포트 밖에 있는 셀의 편집기로 커서를 이동하면, 노트북은 뷰포트 중간에 셀을 표시하기 위해 갑자기 이동하는 대신 해당 줄을 표시할 만큼만 스크롤됩니다.

찾기 및 바꾸기에서 커서/선택 영역에서 쿼리 시드 지원

노트북 편집기의 찾기 컨트롤은 이제 편집기 선택에서 검색 문자열을 시드하는 기능을 지원합니다. 이 동작은 editor.find.seedSearchStringFromSelection 편집기 설정으로 제어됩니다.

디버깅

launch.json 없이 실행 및 디버그

launch.json 구성 파일을 설정하지 않고 F5를 누르거나 디버그 보기에서 실행 및 디버그 버튼을 선택하면, VS Code는 현재 활성 파일의 프로그래밍 언어를 기반으로 디버거를 선택합니다. 파일을 열지 않은 경우 사용할 디버거를 묻는 메시지가 표시됩니다. 이 경험은 약간 혼란스러울 수 있으므로 몇 가지 개선 사항을 적용했습니다.

Select debugger prompt before (alphabetical) and after (activated debugger at the top)

디버깅을 시작하기 전에 확장 프로그램이 이미 활성화된 경우, 해당 확장 프로그램의 디버거가 맨 위로 정렬됩니다. 예를 들어, 이전에는 해당 확장 프로그램의 명령을 실행하여 활성화되었거나, 해당 언어의 파일을 열어 활성화되었거나, 작업 영역이 일치하는 workspaceContains 패턴에 의해 활성화된 경우 유용할 수 있습니다. 이 세션에서 디버거를 사용한 경우에도 맨 위로 정렬됩니다.

Chrome/Edge 디버거는 Flutter 확장 프로그램과 같이 브라우저에서 앱을 실행하는 다른 디버거와의 혼동을 피하기 위해 웹 앱(Chrome) 및 웹 앱(Edge)으로 이름이 변경되었습니다.

언어

TypeScript 4.7

VS Code는 이제 TypeScript 4.7.3을 번들로 제공합니다. 이 주요 TypeScript 버전은 개선된 제어 흐름 분석 및 Node.js에서의 ECMAScript 모듈 지원과 같은 새로운 언어 기능을 제공합니다. 또한 새로운 도구 기능이 포함되어 있으며 중요한 버그가 많이 수정되었습니다!

소스 정의로 이동

VS Code의 가장 오래되고 가장 많이 요청된 기능 중 하나는 VS Code가 외부 라이브러리의 함수 및 기호의 JavaScript 구현으로 이동하도록 하는 것입니다. 현재 정의로 이동은 대상 함수 또는 기호의 유형을 정의하는 유형 정의 파일(.d.ts 파일)로 이동합니다. 이는 유형이나 기호 문서를 검사해야 하는 경우 유용하지만 코드의 실제 구현을 숨깁니다. 현재 동작은 .d.ts의 TypeScript 유형을 이해하지 못하는 많은 JavaScript 사용자에게 혼란을 줍니다.

정의로 이동을 기호의 JavaScript 구현으로 이동하도록 변경하는 것은 간단해 보일 수 있지만, 이 기능 요청이 오랫동안 열려 있는 데에는 이유가 있습니다. JavaScript(특히 많은 라이브러리에서 제공하는 컴파일된 JavaScript)는 .d.ts보다 분석하기 훨씬 어렵습니다. node_modules 아래의 모든 JavaScript 코드를 분석하려고 하면 속도가 느려지고 메모리 사용량이 크게 증가합니다. 또한 VS Code IntelliSense 엔진이 이해하지 못하는 많은 JavaScript 패턴이 있습니다.

새로운 소스 정의로 이동 명령은 여기서 나옵니다. 편집기 컨텍스트 메뉴 또는 명령 팔레트에서 이 명령을 실행하면 TypeScript가 기호의 JavaScript 구현을 추적하여 이동하려고 시도합니다. 시간이 몇 초 걸릴 수 있으며 항상 올바른 결과를 얻지 못할 수도 있지만, 많은 경우 유용할 것입니다.

이 기능을 개선하기 위해 적극적으로 노력하고 있으니 코드베이스에서 사용해보고 피드백을 공유해 주세요.

객체 메서드 스니펫

객체 메서드 스니펫은 주어진 인터페이스를 구현하는 객체 리터럴에 메서드를 빠르게 추가하는 데 도움이 됩니다.

객체 리터럴 내부에서는 가능한 각 메서드에 대해 두 가지 제안을 볼 수 있습니다. 하나는 메서드 이름만 삽입하고 다른 하나는 메서드의 전체 서명을 삽입합니다. "typescript.suggest.classMemberSnippets.enabled": false 또는 "javascript.suggest.classMemberSnippets.enabled": false를 설정하여 객체 메서드 스니펫을 완전히 비활성화할 수도 있습니다.

그룹 인식 가져오기 정리

JavaScript 및 TypeScript의 가져오기 정리 명령을 사용하면 가져오기 목록을 빠르게 정리할 수 있습니다. 실행하면 사용되지 않는 가져오기를 제거하고 가져오기를 알파벳순으로 정렬합니다.

그러나 일부 코드베이스에서는 가져오기를 구성하는 방식에 대해 어느 정도 수동 제어를 선호합니다. 외부 가져오기와 내부 가져오기를 그룹화하는 것이 가장 일반적인 예입니다.

// local code
import * as bbb from './bbb';
import * as ccc from './ccc';
import * as aaa from './aaa';

// built-ins
import * as path from 'path';
import * as child_process from 'child_process';
import * as fs from 'fs';

// some code...

이전 버전의 VS Code에서는 가져오기 정리를 실행하면 다음과 같은 결과가 나왔습니다.

// local code
import * as child_process from 'child_process';
import * as fs from 'fs';
// built-ins
import * as path from 'path';
import * as aaa from './aaa';
import * as bbb from './bbb';
import * as ccc from './ccc';

// some code...

끔찍하네요! 모든 가져오기가 알파벳순으로 정렬되고 VS Code가 주석과 줄 바꿈을 보존하려고 하기 때문에 이렇게 됩니다.

TypeScript 4.7에서는 가져오기 정리가 이제 그룹 인식 기능을 제공합니다. 위 코드에서 실행하면 예상했던 것과 더 유사하게 보입니다.

// local code
import * as aaa from './aaa';
import * as bbb from './bbb';
import * as ccc from './ccc';

// built-ins
import * as child_process from 'child_process';
import * as fs from 'fs';
import * as path from 'path';

// some code...

가져오기가 그룹 내에 유지되면서 정렬된 것을 확인하세요. 훨씬 낫습니다!

암시적 프로젝트에서 엄격한 null 검사 활성화

엄격한 null 검사가 JavaScript 및 TypeScript 모두에 대해 암시적 프로젝트에서 기본적으로 활성화됩니다. 이를 통해 더 정확한 IntelliSense와 일반적인 프로그래밍 오류를 잡을 수 있는 개선된 유형 검사가 가능해집니다.

A strict null error. getElementById may return null if no element with the ID exists

이 새로운 동작은 jsconfig 또는 tsconfig 프로젝트의 일부가 아닌 모든 파일에만 적용됩니다. "js/ts.implicitProjectConfig.strictNullChecks": false를 설정하여 비활성화할 수 있습니다. jsconfig 또는 tsconfig 프로젝트의 일부인 파일의 경우, 구성 파일에서 엄격한 null 검사를 활성화해야 합니다.

Markdown 참조 링크에 대한 정의로 이동

이제 Markdown 파일의 참조 링크에 대해 정의로 이동을 사용할 수 있습니다. 이는 참조에서 현재 파일의 링크 정의로 이동합니다.

JSON 스키마 지원 확장

내장 JSON 언어 서비스는 JSON Schema Draft 2019-09 및 JSON Schema Draft 2020-12에 대한 지원을 개선했습니다. 이러한 스키마를 사용할 때 더 이상 경고가 표시되지 않습니다.

아직 완전히 지원되지 않는 기능이 몇 가지 있습니다. 스키마에서 이러한 기능을 사용할 때 경고가 표시됩니다. 지원되지 않는 속성은 다음과 같습니다.

  • $id를 사용한 하위 스키마
  • $recursiveRef/Anchor (Draft 2019-09)
  • $dynamicRef/Anchor (Draft 2020-12)

웹용 VS Code

핵심 현지화 지원

웹용 VS Code에 대한 초기 현지화 지원을 도입했습니다. VS Code는 전 세계적으로 사용되며 많은 사용자에게 영어는 첫 번째 언어가 아닙니다(또는 익숙한 언어가 아닙니다!). 수년 동안 VS Code 사용자는 영어 이외의 언어로 VS Code를 사용하기 위해 Marketplace의 언어 팩을 설치해 왔습니다. 웹용 VS Code의 경우, 오늘날 웹이 작동하는 방식과 더 일치하는 다른 접근 방식을 취하기로 결정했습니다.

브라우저를 지원되는 핵심 언어 중 하나로 설정한 사용자의 경우, vscode.dev는 자동으로 해당 언어로 번역을 적용합니다. 지원하는 언어는 vscode-loc 리포지토리에 문서화되어 있습니다.

예를 들어, Microsoft Edge에서 표시 언어를 구성하려면 설정 > 언어를 사용합니다.

Microsoft Edge Settings Languages page

이렇게 설정하면 vscode.dev(또는 insiders.vscode.dev)에 접속 시 독일어로 표시됩니다.

vscode.dev in a browser displayed in German

테마: Panda Theme

향후 몇 달 안에 확장 프로그램(VS Code와 함께 제공되는 확장 프로그램 및 그렇지 않은 확장 프로그램 모두)에 대한 현지화를 활성화하여 확장 프로그램 작성자가 비영어권 사용자도 지원할 수 있도록 할 예정입니다. 계속 지켜봐 주세요!

원격 저장소

원격 리포지토리 > 작업 계속... 명령을 사용하여 GitHub 또는 Azure Repos 리포지토리를 로컬로 복제하고 데스크톱 VS Code에서 열 때, remoteHub.gitProtocol을 구성하여 항상 http 또는 ssh URL을 사용하여 복제할 수 있습니다.

개발 컨테이너 사양

Microsoft와 GitHub 전반의 개발 컨테이너 팀은 새로운 Dev Container 사양에 대한 적극적인 개발을 계속하고 있으며, 이번 반복에는 몇 가지 흥미로운 하이라이트가 있었습니다.

참조 구현

사양에 대한 오픈 소스 명령줄 인터페이스(CLI)를 참조 구현으로 출시했습니다. CLI는 devcontainer.json에서 dev container를 빌드하고 시작하며, 직접 사용하거나 제품 환경에 통합할 수 있습니다.

CLI는 새로운 devcontainers/cli 리포지토리에서 사용할 수 있습니다. README에서 시작하는 방법을 배우고, 이 블로그 게시물에서 자세히 읽어보세요.

CLI는 적극적으로 개발 중이며 개별 사용자 지원 강화와 같은 더 많은 시나리오를 더 잘 지원하도록 계속 발전할 것입니다. 진행하면서 피드백을 듣고 싶으므로 CLI 피드백을 위해 이슈를 열었습니다. 리포지토리에서 추가 이슈 및 PR을 환영합니다.

CI에서 Dev Container

GitHub Action 및 Azure DevOps Task를 사용하여 지속적 통합(CI) 빌드에서 리포지토리의 dev container를 실행할 수 있습니다. 이를 통해 로컬 개발에 사용하는 것과 동일한 설정을 사용하여 CI에서도 코드를 빌드하고 테스트할 수 있습니다. 자세한 내용은 devcontainers/ci README를 참조하세요.

GitHub Action의 예시 사용법

- name: Build and run dev container task
  uses: devcontainers/ci@v0.2
  with:
    imageName: ghcr.io/example/example-devcontainer
    runCmd: make ci-build

Azure DevOps Task의 예시 사용법

- task: DevcontainersCI@0
  inputs:
    imageName: 'yourregistry.azurecr.io/example-dev-container'
    runCmd: 'make ci-build'
    sourceBranchFilterForPush: refs/heads/main

사양

사양에 대한 적극적인 개발이 계속되고 있으며, 초안 버전을 devcontainers/spec 리포지토리에 게시했습니다.

CLI와 마찬가지로, 향후 업데이트 및 진행 상황을 계속 지켜봐 주시고 피드백을 기다리겠습니다.

추가 자료

개발 컨테이너 및 사양에 대한 모든 내용은 https://containers.dev에서 확인할 수 있습니다.

확장 프로그램 기여

Python

시작 시 인터프리터 검색 없음

Python 확장 프로그램은 이제 다음과 같은 경우에만 검색을 자동 트리거합니다.

  • Python: 인터프리터 선택 명령을 사용하여 다른 인터프리터를 선택하는 경우.
  • 특정 범위(작업 영역 또는 전역)가 처음 열리는 경우.
  • Python이 설치되지 않은 경우.

시작 시 검색이 자동으로 트리거되지 않으므로 로드 시간이 즉각적이며 언어 서버와 같은 다른 기능이 더 빠르게 시작됩니다. 그러나 Jupyter 확장 프로그램이 설치/활성화된 경우 Jupyter에서 시작 시 검색이 여전히 트리거됩니다.

현지화 활성화

Python 확장 프로그램은 이제 VS Code가 지원하는 모든 언어로 번역을 지원합니다. 명령, 알림, 제목 등의 번역을 얻는 방식을 vscode-nls를 사용하여 업데이트했습니다. 이러한 번역은 현지화 팀에서 최신 상태를 유지하고 정확하도록 관리합니다.

Jupyter

웹 확장

웹 버전의 Jupyter 확장 프로그램의 핵심 기능 지원에 진전을 이루었습니다.

이번 달에 웹 확장 프로그램으로 포팅된 기능은 다음과 같습니다.

  • https 지원
  • 커널 완료
  • ipywidgets
  • 노트북 디버깅
  • 변수 보기
  • 내보내기
  • 대화형 창

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

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

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

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

원격 개발

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

원격 개발 릴리스 노트에서 확장 프로그램의 새 기능 및 버그 수정에 대해 알아보세요.

GitHub Pull Requests 및 Issues

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

  • 풀 리퀘스트 만들기 보기의 자동 병합 확인란

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

원격 리포지토리 확장 프로그램

GitHub 리포지토리 및 Azure Repos 확장 프로그램 모두 VS Code가 지원하는 모든 언어로 번역을 지원합니다.

미리 보기 기능

Markdown 링크 유효성 검사

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

링크 유효성 검사를 통해 VS Code는 헤더, 이미지 및 기타 로컬 파일에 대한 Markdown 링크를 분석합니다. 잘못된 링크는 경고 또는 오류로 보고됩니다.

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

VS Code는 다른 Markdown 파일의 특정 헤더에 대한 잘못된 링크까지 잡아낼 수 있습니다!

링크 유효성 검사는 기본적으로 비활성화되어 있습니다. "markdown.experimental.validate.enabled": true를 설정하여 링크 유효성 검사를 시도할 수 있습니다.

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

  • markdown.experimental.validate.fileLinks.enabled - 로컬 파일에 대한 링크 유효성 검사 활성화/비활성화: [link](/path/to/file.md)

  • markdown.experimental.validate.headerLinks.enabled - 현재 파일의 헤더에 대한 링크 유효성 검사 활성화/비활성화: [link](#_some-header)

  • markdown.experimental.validate.referenceLinks.enabled - 참조 링크 유효성 검사 활성화/비활성화: [link][ref].

  • markdown.experimental.validate.ignoreLinks - 유효성 검사를 건너뛸 링크 목록입니다. 이 기능은 디스크에 존재하지 않지만 Markdown이 게시된 후에는 존재하는 파일에 링크하는 경우에 유용합니다.

새로운 기능에 대한 여러분의 의견을 알려주세요!

파일을 붙여넣어 Markdown 링크 삽입

Markdown에 이미지 또는 파일 링크를 삽입하기 위한 붙여넣기 기능에 대한 실험적 지원을 추가했습니다.

이를 위해서는 markdown.experimental.editor.pasteLinks.enabled와 "editor.experimental.pasteActions.enabled"를 모두 활성화해야 합니다. 현재 VS Code 파일 탐색기에서 파일을 복사할 수 있습니다. 이미지 파일을 붙여넣으면 이미지 참조가 삽입되고 일반 텍스트 파일을 붙여넣으면 해당 파일에 대한 링크가 삽입됩니다.

터미널 셸 통합

쉘 통합(terminal.integrated.shellIntegration.enabled 설정으로 활성화됨) 및 명령 장식이 이번 반복에서 다듬어지고 개선되었습니다.

업데이트 중 일부는 다음과 같습니다.

  • 146377 bash-git-prompt 및 기타 프로그램이 작동하도록 쉘 상태 유지
  • 148635 zsh에 사용자 지정 ZDOTDIR 사용 허용
  • 145801 느린 컴퓨터에서 장식이 동기화되지 않는 문제 수정
  • 146873 bash의 기존 디버그 트랩 처리 개선
  • 148839 이것은 어떻게 작동합니까? 명령 및 탭 호버의 활성화 상태에 대한 메시지 개선
  • 151223 버퍼 지운 후 명령이 올바르게 추적되도록 보장

Windows의 창 제어 오버레이

Electron에서 제공하는 API를 채택하여 Windows에서 Window Controls Overlay를 지원합니다. 이 변경으로 인한 주요 사용자 혜택은 Windows 11의 Snap Layouts 기능에 액세스하는 것입니다. 일부 지속적인 문제로 인해 Window Controls Overlay는 기본적으로 비활성화되어 있지만, 실험적 설정 window.experimental.windowControlsOverlay.enabled를 사용하여 활성화할 수 있습니다.

Hover over the maximize/restore window control to see Windows 11 Snap layouts

명령 센터

파일, 명령 등을 위한 더 간단한 빠른 선택 트리거 방법인 명령 센터를 추가하고 있습니다.

Command Center in the VS Code title bar

이는 window.experimental.commandCenter 설정을 통해 활성화할 수 있으며 여러분의 의견을 기다리겠습니다.

병합 편집기

더 나은 병합 경험을 개발하기 시작했습니다. 아직 초기 단계이며 피드백을 받을 준비는 되지 않았지만, git.experimental.mergeEditor를 통해 사용해 볼 수 있습니다. 이 설정을 활성화하면 병합 충돌이 있는 파일이 새 병합 편집기에서 열려 충돌 해결이 더 쉬워집니다.

이 작업을 계속 진행할 예정입니다. 진행 상황을 따라가려면 Insiders를 사용하세요. 이 노력에 도움을 주고 있는 Mingpan과 Google의 동료들에게 진심으로 감사드립니다. ❤️

확장 프로그램 작성

인라인 완료 최종화

인라인 완료 API를 최종화했습니다. 이를 통해 확장 프로그램은 제안 위젯과 분리된 인라인 완료를 제공할 수 있습니다. 인라인 완료는 이미 수락된 것처럼 회색으로 렌더링됩니다. 사용자는 Tab 키로 제안을 순회하고 수락할 수 있습니다. 인라인 완료를 사용하는 예시 확장 프로그램은 GitHub Copilot입니다. API로의 진입점인 vscode.d.ts 파일에서 languages.registerInlineCompletionItemProvider에서 자세한 정보를 확인할 수 있습니다.

InputBox 유효성 검사 메시지 심각도 최종화

사용자 입력 유효성 검사에 심각도를 제공하는 InputBox API(window.showInputBox 및 window.createInputBox 사용)가 최종화되었습니다.

예를 들어, 입력에 따라 사용자에게 정보 메시지를 표시하고 싶다면, 유효성 검사 메시지는 다음과 같이 반환할 수 있습니다.

{
  message: 'this is an info message';
  severity: InputBoxValidationSeverity.Info;
}

이것은 다음과 같이 보일 것입니다.

Input box with 'this is an info message' severity message

노트북 편집기 API

새로운 노트북 편집기 API는 TextEditor와 유사하지만 일반 텍스트 편집기가 아닌 노트북을 위한 새로운 NotebookEditor 유형을 도입합니다.

const editor = vscode.window.activeNotebookEditor;
if (editor) {
  // Access the underlying notebook document associated with the editor
  console.log(editor.notebook.uri);

  // Change the selection in the current notebook
  editor.selection = new vscode.NotebookRange(1, 3);
}

window.activeNotebookEditor를 사용하여 현재 노트북 편집기를 가져올 수 있고, 사용자가 새 노트북 편집기로 전환할 때 window.onDidChangeActiveNotebookEditor와 같은 이벤트를 관찰할 수 있습니다.

타임라인 보기 기반 확장 프로그램 활성화

타임라인 보기가 보일 때 새로운 활성화 이벤트가 추가되었습니다. 이 이벤트 onView:timeline은 모든 확장 프로그램에서 사용할 수 있지만, 제안된 Timeline API를 구현하는 확장 프로그램에 가장 유용합니다.

UX 지침

확장 프로그램 제작자를 위한 UX 가이드라인이 업데이트 및 확장되어 더 많은 VS Code 사용자 인터페이스 요소를 포함하게 되었습니다.

UX Guideline example image pointing to View Actions elements

개정된 개요 페이지는 VS Code UI를 따라가며 인터페이스와 일반적인 UI 요소에 대한 시각적 투어를 제공합니다.

관련 가이드, API 참조 및 확장 프로그램 샘플에 대한 링크가 각 영역의 전용 페이지에 추가되었습니다. 또한, 가이드라인 전반에 걸쳐 모든 예제 이미지가 업데이트되어 최신 UI 버전을 보여줍니다.

이제 이러한 UI 요소를 추가하거나 기여하는 확장 프로그램에 대한 권장되는 "해야 할 것"과 "하지 말아야 할 것"을 읽어볼 수 있습니다.

확장 프로그램 후원

이번 마일스톤에서는 확장 프로그램의 package.json에 sponsor 필드를 도입하여 확장 프로그램이 후원을 선택할 수 있도록 했습니다. sponsor 객체에는 확장 프로그램 제작자의 후원 링크를 위한 url 필드가 있습니다. 예를 들어

"sponsor": {
    "url": "https://github.com/sponsors/nvaccess"
}

확장 프로그램이 이에 참여하면 VS Code의 확장 프로그램 보기 세부 정보 페이지에 위의 "확장 프로그램 후원" 섹션에 표시된 대로 후원 버튼이 렌더링됩니다.

참고: 후원을 활성화하여 확장 프로그램을 게시하려면 최신 vsce 명령줄 도구(>=2.9.1)를 사용해야 합니다.

제안된 API

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

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

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

DataTransfer에서 파일 읽기

새로운 dataTransferFiles API 제안을 통해 확장 프로그램은 vscode.DataTransfer 객체에서 파일을 읽을 수 있습니다. 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');
     }

    ...
  }
}

현재 파일 데이터 전송 항목은 VS Code 외부(예: 바탕 화면에서 트리 보기 또는 편집기로 드래그 앤 드롭)에서 오는 경우에만 DataTransfer에 추가됩니다.

복사 붙여넣기 API

새로운 documentPaste 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,
    _range: vscode.Range,
    dataTransfer: vscode.DataTransfer,
    _token: vscode.CancellationToken
  ): void | Thenable<void> {
    dataTransfer.set(this.countMimeTypes, new vscode.DataTransferItem(this.count++));
  }

  async provideDocumentPasteEdits(
    _document: vscode.TextDocument,
    range: vscode.Range,
    dataTransfer: vscode.DataTransfer,
    token: vscode.CancellationToken
  ) {
    const countDataTransferItem = dataTransfer.get(this.countMimeTypes);
    if (!countDataTransferItem) {
      return undefined;
    }

    const textDataTransferItem = dataTransfer.get('text/plain') ?? dataTransfer.get('text');
    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 new vscode.SnippetTextEdit(range, snippet);
  }
}

vscode.languages.registerDocumentPasteEditProvider(
  { language: 'markdown' },
  new CopyCountPasteEditProvider()
);

새로운 Notebook Workspace 편집 제안

새로운 notebookWorkspaceEdit API 제안을 통해 확장 프로그램은 노트북의 내용을 편집할 수 있습니다. 이는 이전 notebookEditorEdit 제안을 대체합니다.

이 제안을 통해 노트북에서 셀을 삽입, 교체 또는 수정하는 워크스페이스 편집을 만들 수 있습니다.

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

  edit.set(
    currentNotebook.uri,
    vscode.NotebookEdit.insertCells(/* index*/ 1, [
      // ... new notebook cell data
    ])
  );

  await vscode.workspace.applyEdit(edit);
}

엔지니어링

풀 리퀘스트 사용

vscode 리포지토리 main 브랜치에 직접 변경 사항을 푸시하는 방식에서 벗어나 이제 풀 리퀘스트(PR)를 통해서만 VS Code에 변경 사항을 푸시합니다. 각 PR은 최소한 다른 팀원으로부터 한 번의 승인을 받아야 합니다. 이를 활용하여 PR이 병합되기 전에 몇 가지 기본 검사가 통과하도록 요구합니다. 이러한 검사는 일반적으로 10분 이상 걸리지 않는 TypeScript 컴파일, 서식 규칙, 단위 테스트 및 통합 테스트와 같은 작업입니다. 이 흐름으로 전환하면서 프로그래밍 실수로 인해 Insiders 빌드가 중단되는 횟수가 줄어들었습니다.

VS Code OSS 빌드

프로덕션 빌드와 동일한 빌드 정의를 재사용하는 새로운 공개 Code OSS 빌드가 있습니다. 이 빌드는 현재 각 PR당 30분 미만이 소요되며, 이를 더 빠르게 만드는 데 계속 투자할 계획입니다.

문서

업데이트된 버전 관리 비디오

VS Code에 내장된 Git 통합 사용을 시작하는 데 도움이 되도록 Visual Studio에서 Git 사용 소개 비디오가 다시 제작되었습니다.

또한 VS Code YouTube 채널에서 다른 훌륭한 비디오를 찾을 수 있습니다.

code.visualstudio.com의 vscode.dev

웹용 VS Code를 사용하고 싶지만 URL을 잊으셨나요? vscode.dev가 이제 VS Code 다운로드 페이지에 눈에 띄게 표시되어 브라우저에서 VS Code를 빠르게 실행할 수 있습니다.

vscode.dev on the code.visualstudio.com download page

주요 수정 사항

  • 141157 디버그 모드가 아닌 상태에서 F11을 누르면 전체 화면으로 전환되는 대신 디버그가 켜짐
  • 148864 TypeScript 파일의 바인딩되지 않은 중단점
  • 149638 지연 변수 평가 버튼으로 인해 노드 사이에 문제가 있는 간격과 잘못된 정렬이 발생함

감사합니다

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

웹 확장

코드를 웹 확장 프로그램으로 실행하는 확장 프로그램을 가능하게 만든 확장 프로그램 제작자 (다음 목록은 2022년 5월 2일부터 6월 6일까지입니다)

이슈 추적

이슈 추적에 대한 기여

풀 리퀘스트

vscode 기여

vscode-extension-samples 기여

vscode-generator-code에 대한 기여

vscode-html-languageservice에 대한 기여

vscode-js-debug 기여

vscode-languageserver-node에 기여

vscode-pull-request-github 기여

  • @jpspringall: 이슈 #3371 | GitHub Enterprise AuthProvider의 경우 getAuthSessionOptions 업데이트 PR #3565

debug-adapter-protocol에 기여

language-server-protocol 기여

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