하고 싶은 일

Visual Studio Code를 자신의 취향에 커스터마이즈하고 싶다.

구체적으로는 테마와 설정으로 변경할 수 없습니다.

시스템 글꼴을 원하는 글꼴로 변경하고 싶습니다

UI 자체의 세련된 스타일을 조정하고 싶습니다

VSCode 자체는 Electron이므로, 설치된 패키지를 직접 만지고 좋아하는 디자인으로 조정하려고 하면 가능.
그러나 그것도 업데이트에 의해 매회 원래대로 돌아 버리므로 번거로움.

※ 변경 전

Customize UI(확장)란 무엇입니까?

Customize UI - Visual Studio Marketplace



VSCode의 UI를 설정의 범위를 넘어서 커스터마이즈 할 수 있는 확장 기능.

구체적으로 :

시스템 글꼴 변경

등폭 폰트와 통상 폰트를 각각 변경

글꼴 크기 조정

활동 막대의 표시 위치 변경 (왼쪽에서 하단으로)

제목 표시줄을 인라인으로 설정(macOS 전용)

파일 트리의 항목 높이 변경

사용자 지정 스타일 설정

덧붙여 동제작자가 만든 JavaScript의 인젝션을 실시하는 Monkey Patch에 의존하고 있기 (위해)때문에, 양쪽 모두 인스톨 된다.

변경 후

타이틀 바가 깨끗이 해, 코드의 가시 영역도 퍼지고 있다.
이후는 Customize UI에서 실시한 설정 변경과 미세 조정한 스타일을 소개한다.

시스템 글꼴 변경

다음 설정을 변경합니다.

customizeUI.font.regular : 시스템 UI의 일반 글꼴

customizeUI.font.monospace : 시스템 UI의 코드 표시에 사용되는 등폭 글꼴

개인적으로 UI에 둥근 고딕 (히라기노 둥근 고)을 설정하고 싶었기 때문에 :

{
  "customizeUI.font.regular": "HiraMaruProN-W4",
  "customizeUI.font.monospace": "Cascadia Code"
}

제목 표시줄 및 활동 표시줄 변경

customizeUI.titleBar 및 customizeUI.activityBar로 변경합니다.

{
  "customizeUI.titleBar": "inline", // macOS のみ
  "customizeUI.activityBar": "bottom"
}

타이틀 바와 탭 바의 위치를 ​​정렬할 수 있으므로, 화면이 깨끗이 한다.
다만 액티비티 바는, 확장 기능을 많이 인스톨 하고 있으면 오버플로우 해 표시되기 (위해)때문에 사용성이 나빠질지도.

파일 트리의 항목 높이 변경

customizeUI.listRowHeight에서 변경할 수 있습니다.

{
  "customizeUI.listRowHeight": 27
}

27 픽셀 높이로 조정됩니다 (단, 아이콘 높이가 보정되지 않으므로 아래에 설명 된 사용자 정의 스타일로 조정해야 함).

맞춤 스타일 설정

VSCode 상의 스타일 클래스를 지정해, 기존의 스타일을 덧쓰기하는 설정을 기술할 수 있다.

{
  "customizeUI.stylesheet": {
    "selector": "style"
  }
}

이후는 커스텀 스타일로 설정한 미조정의 설정예를 소개한다.

목록 아이콘의 위치 조정 예

리스트의 높이와 같은 정도로 조정하면 예쁘게 표시된다.

{
  "customizeUI.stylesheet": {
    ".show-file-icons .folder-icon::before": "height: 26px",
    ".show-file-icons .file-icon::before": "height: 26px"
  }
}

명령 팔레트의 글꼴 크기 조정 예

{
  "customizeUI.stylesheet": {
    ".monaco-list-rows": "font-size: 12.5px",
    ".monaco-tree-wrapper": "font-size: 12.5px"
  }
}

빵 부스러기 목록 및 쉘 선택 콤보 상자 미세 조정

폰트 사이즈나 요소의 높이를 바꾸는 것으로 불모호함을 없앤다.

{
  "customizeUI.stylesheet": {
    ".monaco-select-box": "height: 23px",
    ".monaco-breadcrumbs": "font-size: 11.5px"
  }
}