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

터미널 모양

Visual Studio Code의 터미널 모양은 광범위하게 사용자 지정할 수 있습니다.

An example of a custom UI, using Powerline and Nerd Font symbols in the prompt and a custom workbench theme

Sapphire 테마와 사용자 지정 Starship 프롬프트를 사용하고 Hack 글꼴과 Nerd Font 기호를 활용한 모습

텍스트 스타일

터미널의 텍스트는 다음 설정을 사용하여 사용자 지정할 수 있습니다.

Powerline 기호 및 Nerd Fonts

Powerline 글꼴은 터미널에서 사용할 수 있는 추가 문자가 포함된 특수 패치 글꼴입니다. VS Code의 터미널은 글꼴을 구성할 필요 없이 일부 Powerline 기호를 렌더링하지만, 더 많은 글리프가 필요한 경우 글꼴 모음 설정으로 Powerline 글꼴을 구성하세요. Powerline 글꼴은 일반적으로 " for Powerline"으로 끝나며, 다음 설정은 패치된 DejaVu Sans Mono를 구성하는 방법의 예입니다.

"editor.fontFamily": "'DejaVu Sans Mono for Powerline'"

Nerd Fonts도 동일하게 작동하며 일반적으로 " NF" 접미사를 가집니다. 다음은 Hack의 nerd fonts 변형을 구성하는 방법의 예입니다.

"terminal.integrated.fontFamily": "'Hack NF'"

터미널 커서

터미널 커서 스타일과 깜박임 여부는 다음 설정을 사용하여 사용자 지정할 수 있습니다.

탭 사용자 지정

기본적으로 터미널 탭은 두 개 이상 있을 때 터미널 보기의 오른쪽에 나타나며, 하나만 있을 때는 보기 헤더에서 활성 터미널을 표시합니다.

A blank terminal without tabs and then with tabs displayed for three terminals

가시성

기본 가시성은 가로 공간을 절약하도록 설계되었지만 원하지 않을 수 있습니다. 탭이 표시되는 방식은 다음 설정을 사용하여 구성할 수 있습니다.

탭 텍스트

각 탭의 텍스트는 다음 설정으로 결정됩니다.

기본적으로 제목은 셸에서 감지된 프로세스 이름을 표시합니다.

다른 터미널은 종종 셸에서 보낸 이스케이프 시퀀스를 제목으로 표시하며, 이는 다음으로 구성할 수 있습니다.

"terminal.integrated.tabs.title": "${sequence}"

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

  • ${cwd}: 터미널의 현재 작업 디렉토리입니다.
  • ${cwdFolder}: 터미널의 현재 작업 디렉토리이며, 다중 루트 작업 공간 또는 값이 초기 작업 디렉토리와 다른 단일 루트 작업 공간에서 표시됩니다. Windows에서는 셸 통합이 활성화된 경우에만 표시됩니다.
  • ${workspaceFolder}: 터미널이 시작된 작업 공간입니다.
  • ${workspaceFolderName}: 터미널이 시작된 작업 공간의 이름입니다.
  • ${local}: 원격 작업 공간에서 로컬 터미널임을 나타냅니다.
  • ${process}: 터미널 프로세스의 이름입니다.
  • ${progress}: OSC 9;4 시퀀스에서 보고된 진행률 상태입니다.
  • ${separator}: 값이 있는 변수나 정적 텍스트로 둘러싸인 경우에만 표시되는 조건부 구분 기호(-).
  • ${sequence}: 프로세스에서 터미널에 제공된 이름입니다.
  • ${task}: 이 터미널이 작업과 연결되어 있음을 나타냅니다.
  • ${shellType}: 감지된 셸 유형입니다.
  • ${shellCommand}: 셸 통합에 따라 실행되는 명령입니다. 또한 감지된 명령줄에 대한 높은 신뢰도가 필요하며, 이는 일부 프롬프트 프레임워크에서는 작동하지 않을 수 있습니다.
  • ${shellPromptInput}: 셸 통합에 따른 셸의 전체 프롬프트 입력입니다.

아이콘

각 터미널에는 터미널 프로필에 의해 결정되는 관련 아이콘이 있습니다. 프로필에서 정의되지 않은 경우 사용될 기본 아이콘 및 색상은 terminal.integrated.tabs.defaultIconterminal.integrated.tabs.defaultColor 설정을 사용하여 구성할 수 있습니다.

상태

터미널의 "상태"는 탭 오른쪽에 나타나는 아이콘으로 표시됩니다. 일부 상태는 애니메이션을 포함합니다. 이것이 산만하다면 애니메이션은 다음을 사용하여 비활성화할 수 있습니다.

"terminal.integrated.tabs.enableAnimation": false

시각적 벨

터미널 벨이 트리거되면 노란색 벨 아이콘이 잠시 표시됩니다. terminal.integrated.enableBell을 사용하여 비활성화할 수 있으며, 지속 시간은 terminal.integrated.bellDuration으로 구성할 수 있습니다.

터미널 색상

터미널은 트루 컬러를 표시할 수 있지만, 프로그램은 일반적으로 8가지 ANSI 색상(검정, 빨강, 녹색, 노랑, 파랑, 마젠타, 시안 및 흰색)과 각 색상의 밝은 변형을 사용합니다. 이러한 ANSI 색상은 활성 색상 테마에 의해 결정되지만, workbench.colorCustomizations 설정을 사용하여 테마와 독립적으로 구성할 수도 있습니다.

굵은 텍스트가 일반 ANSI 색상을 사용할지 밝은 변형을 사용할지는 terminal.integrated.drawBoldTextInBrightColors 설정을 사용하여 구성할 수 있습니다.

최소 대비 비율

터미널은 어두운/밝은 테마, ANSI 색상 또는 실행 중인 셸/프로그램과의 충돌 등으로 인해 대비 문제가 발생하는 경우가 많습니다.

최소 대비 비율 기능은 4.5:1 대비 비율을 충족할 때까지 전경색의 휘도를 높이거나 낮추어 이 문제를 해결합니다.

이 기능의 한 가지 단점은 때때로 색상 텍스트의 채도가 떨어질 수 있다는 것입니다. 이 기능은 다음을 사용하여 원래 색상을 얻기 위해 구성하거나 비활성화할 수 있습니다.

"terminal.integrated.minimumContrastRatio": 1

글리프

터미널 글꼴 결합을 사용하면 여러 문자를 하나로 렌더링할 수 있습니다. 터미널 글꼴 모음(terminal.integrated.fontFamily)에서 지원하는 경우 terminal.integrated.fontLigatures.enabled 설정을 구성하여 터미널에서 글꼴 결합을 활성화할 수 있습니다.

Enabling ligatures will combine certain sets of characters into one, for example >= into the greater than or equals sign

글꼴 기능 설정

글꼴 결합이 활성화되면 font-feature-settings CSS 속성 형식으로 글꼴 기능 설정의 상세 목록을 설정할 수도 있습니다. 이를 통해 글꼴 결합 렌더링을 더 세밀하게 제어할 수 있습니다. 예를 들어, 표준 calt 글꼴 결합을 비활성화하고 특정 글꼴 변형을 활성화하는 것은 "calt" off, "ss03"과 유사합니다. 글꼴에서 지원하는 변형 목록은 글꼴 설명서를 참조하세요.

대체 글꼴 결합

글꼴은 글꼴 결합을 지원하지만 VS Code에서 해당 글꼴을 구문 분석하는 것을 지원하지 않는 경우, GPU 가속을 비활성화하거나 글꼴 결합을 수동으로 결합할 문자 시퀀스 목록을 지정할 수 있습니다.

기본적으로 대체 글꼴 결합은 코딩에 자주 사용되는 글꼴 결합 목록입니다. terminal.integrated.fontLigatures.fallbackLigatures 설정을 구성하여 목록을 미세 조정하세요. 예를 들어

// Only use ligatures for `ff`, `fi` and `fl`
"terminal.integrated.fontLigatures.fallbackLigatures": [
    "ff",
    "fi",
    "fl"
]

GPU 가속

터미널은 서로 다른 장단점을 가진 두 가지 렌더러를 제공합니다.

  • WebGL 렌더러 - 진정한 GPU 가속입니다.
  • DOM 렌더러 - 훨씬 느리지만 호환성이 뛰어난 대체 렌더러입니다.

WebGL 렌더러에서 제공하는 GPU 가속은 터미널에서 기본적으로 활성화됩니다. 이를 통해 CPU가 각 프레임을 렌더링하는 데 걸리는 시간을 크게 줄여 터미널이 더 빠르게 작동하고 높은 FPS로 표시될 수 있습니다.

기본 terminal.integrated.gpuAcceleration 값인 auto는 WebGL 렌더러를 시도하고 실패하면 DOM 렌더러로 대체됩니다. Linux VM, WebGL을 지원하지 않는 브라우저 또는 오래된 드라이버가 있는 컴퓨터에서는 WebGL이 제대로 작동하지 않을 수 있습니다.

사용자 지정 글리프

GPU 가속이 활성화되면 글꼴 대신 사용자 지정 렌더링이 터미널에서 일부 문자의 표시 방식을 개선합니다. 여기에는 상자 그리기 문자(U+2500-U+257F), 블록 요소(U+2580-U+259F) 및 Powerline 기호 하위 집합(U+E0B0-U+E0BF)이 포함됩니다. 이는 구성된 글꼴이 이러한 문자를 지원할 필요가 없을 뿐만 아니라 문자가 픽셀 단위로 완벽하게 그려지고 셀 크기에 맞게 확장된다는 것을 의미합니다.

아래는 사용자 지정 줄 높이 및 문자 간격이 구성된 이러한 문자의 몇 가지 예입니다. 사용자 지정 글리프 덕분에 셀 사이에 간격이 없음을 알 수 있습니다.

Box drawing, block characters and some Powerline symbols fill the entire cell in the terminal

이 기능은 terminal.integrated.customGlyphsfalse로 설정하여 비활성화할 수 있습니다.

모호한 너비의 글리프 재조정

일부 유니코드 문자는 모호한 너비를 가지며, 터미널의 백엔드와 프론트엔드가 크기에 대해 동의하지 않을 수 있습니다. GPU 가속이 활성화되어 있고 이러한 모호성이 발생하는 경우, 글리프는 단일 셀에 맞도록 가로로 재조정되어 겹침을 방지합니다.

예를 들어, 아래 이미지는 단일 셀로 압축된 로마 숫자 문자를 보여줍니다.

VIII and XII characters would be rescaled horizontally so as to not overlap with following characters. They feature a thinner stroke width when this happens due to the scaling

이 기능은 terminal.integrated.rescaleOverlappingGlyphsfalse로 설정하여 비활성화할 수 있으며, 그러면 다음과 같은 겹치는 렌더링이 발생합니다.

When off, the VIII and XII characters may overlap the following characters

프롬프트 사용자 지정

대부분의 셸은 터미널 프롬프트의 광범위한 사용자 지정을 허용합니다. 이는 VS Code 외부에서 셸을 구성하여 수행되며, 일반적으로 $PS1 변수를 수정하거나 $PROMPT_COMMAND를 설정하거나 플러그인을 설치하여 수행됩니다.

Starshipoh-my-posh와 같은 일부 프롬프트는 git 상태와 같은 것을 표시하고 대부분의 셸과 함께 작동하므로 초기에 좋은 선택입니다.

자주 묻는 질문

터미널에 여러 색상의 삼각형이나 검은색 사각형이 표시되는 이유는 무엇인가요?

터미널은 일부 환경에서 GPU 가속 렌더링에 문제가 있을 수 있습니다. 예를 들어, 텍스트 대신 크고 여러 색상의 삼각형이 보일 수 있습니다. 이는 일반적으로 드라이버/VM 그래픽 문제로 인해 발생하며 Chromium에서도 동일한 문제가 발생합니다. --disable-gpu 플래그로 code를 시작하거나 terminal.integrated.gpuAccelerationoff로 설정하여 터미널에서 캔버스 사용을 피함으로써 이러한 문제를 해결할 수 있습니다. 자세한 내용은 GPU 가속 섹션을 참조하세요.

터미널 색상이 올바르게 표시되지 않는 이유는 무엇인가요?

최소 대비 비율 기능으로 인해 색상이 예상대로 표시되지 않을 수 있습니다. 다음을 사용하여 비활성화할 수 있습니다.

"terminal.integrated.minimumContrastRatio": 1

이것이 기본값인 이유에 대한 배경은 vscode#146406에서 설명합니다.

© . This site is unofficial and not affiliated with Microsoft.