여러 VS Code 창에서 작업하는 데 어려움을 겪은 적이 있다면 현재 작업 중인 창을 구별하는 데 도움이 되는 정말 깔끔한 솔루션이 있습니다. Wes Bos 튜토리얼(React+Node)에서 이 솔루션을 본 적이 있을 것입니다.

React와 Node 리포지토리에서 동시에 작업하고 현재 어떤 창이 활성화되어 있는지 눈으로 더 쉽게 이해하고 싶다고 가정해 보겠습니다.

몇 줄의 코드로 제목 표시줄의 색상을 변경하고 이 설정을 프로젝트에 연결할 수 있습니다. 리포지토리에 푸시할 수도 있으므로 다른 개발자도 사용할 수 있습니다(꼭 그렇게 할 필요는 없습니다).

일하러 가자!

설정으로 파일 만들기

수동

저장소의 폴더 내부에 .vscode 폴더 및 settings.json 파일을 만듭니다.

자동화

1) 스타일을 지정하려는 프로젝트로 VS Code를 엽니다.
2) ⌘ + ⇧ + P를 클릭하면 명령 목록이 열립니다(Windows의 경우 Ctrl+Shift+p).



3) Preferences: Open Workspace Settings를 검색합니다. 그러면 VS Code에서 새Settings 탭이 열립니다.



4) 사이드바에서 Workbench > Appearance를 선택합니다.



5) Color Customizations에서 Edit in settings.json를 클릭합니다. 이렇게 하면 리포지토리 내부에 .vscode 파일이 있는 새 settings.json 폴더가 생성됩니다.

창 색상 설정

settings.json 파일 내부에는 설정할 수 있는 몇 가지 옵션이 있습니다.
titleBar.activeBackground - 창이 활성 상태일 때 색상 창 제목 표시줄.
titleBar.inactiveBackground - 다른 창이 활성 상태일 때 색상 창 제목 표시줄.
titleBar.activeForeground - 제목 표시줄의 컬러 텍스트.

Protip: set inactiveBackground to just slightly darker color from activeBackground to identify which window are you currently using.

There's a lot of different options that you can set to customize the whole window: https://code.visualstudio.com/api/references/theme-color

{
  // rest of your settings,
  "workbench.colorCustomizations": {
    "titleBar.activeBackground" : "#f2c216",
    "titleBar.inactiveBackground": "#ac8b12",
    "titleBar.activeForeground":"#000",
  }
} 

결과

기타 VS 코드 팁 및 요령