VSCode 꾸미기

Lev·2022년 2월 26일
vscode
2

💻코딩환경 꾸미기

목록 보기
2/2

테마 설정하기

Extentions에서 찾아서 설치하는 방식

  1. 제일 왼쪽의 ‘확장’ 탭을 선택해 들어간다.

  2. 검색창에 ‘theme’ 혹은 ‘@category:"themes”’을 검색한 뒤 원하는 테마 찾아보기 (역으로 인터넷에서 원하는 테마를 찾아보고 그 이름을 알아내어 확장탭에서 검색하는 방법도 있다)

  3. 해당 extension을 설치

  4. 여러 테마가 포함된 extension이라면, ‘색 테마 설정’에서 선택 가능

  5. 설치된 모든 테마 중에서 고르고 싶다면 ‘Ctrl + K + T’를 눌러 고를 수 있다.

폰트 설정하기

Nerd Fonts - Iconic font aggregator, glyphs/icons collection, & fonts patcher
폰트를 다운받은 후, ttf 확장자로 되어 있는 파일들을 우클릭하여 ‘모든 사용자용으로 설치’를 누르면 폰트가 설치된다

Font Family

  1. (윈도우 기준) ‘Ctrl + ,’ 을 눌러 설정 창 열기 → 텍스트 편집기 → 글꼴 순으로 이동

  2. 사용하고 싶은 글꼴을 ‘Font Family’ 항목의 가장 앞에 추가 (밑의 ligature 설정과 함께 settings.json에서 진행해도 된다)

  3. 가장 앞에서부터 적용 가능한 폰트로 출력된다.

Font Ligatures

  • 코딩용 폰트에 존재하는 합자를 사용 가능하다
  • 경우에 따라 가독성을 올려주기도 하므로 선택적으로 설정 가능
  1. (윈도우 기준) ‘Ctrl + ,’ 을 눌러 설정 창을 연 뒤, 오른쪽위의 세 버튼 중 가장 왼쪽을 누르면 settings.json 파일이 열린다.
  2. settings.json 파일에 editor.fontLigatures 항목을 추가하고 true로 설정해준다.
"editor.fontLigatures": true
  1. settings.json 파일 저장하면 ligature가 적용되어 있다

터미널 꾸미기

  • 기본적으로 Windows Terminal을 꾸밀 때 사용된 Oh My Posh는 그대로 설정되어 있다
  • Windows Terminal을 꾸미는 방법이 궁금하다면 Windows Terminal (Windows Powershell) 꾸미기 참고
  • 그러나 테마는 터미널 기본 상태 그대로이고, 폰트는 VSCode의 폰트가 그대로 사용되어 만약 Nerd Fonts를 사용하지 않았다면 Oh My Posh의 그래픽 문자들이 네모로 깨져보인다
  • 따라서 터미널용 테마를 별도로 설정해주고, 폰트도 Nerd Fonts로 변경해주어야 한다

터미널용 테마 변경하기

VSCode의 settings.json 파일에 직접적으로 추가해주는 방식

Base16 Terminal Colors for Visual Studio Code
테마는 위 링크에서 확인 가능 (다른 곳에서 찾거나, 테마 하나를 복사해서 형태를 익힌 뒤 직접 색을 설정하여 커스텀해도 된다)

  1. 위 사이트에서 원하는 테마 복사
  2. (윈도우 기준) ‘Ctrl + ,’ 을 눌러 설정 창을 연 뒤, 오른쪽위의 세 버튼 중 가장 왼쪽을 누르면 settings.json 파일이 열린다
  3. settings.json 파일에 workbench.colorCustomizations 항목을 추가해주고 테마를 붙여넣기 (하단의 예시처럼 작성하면 성공, 해당 테마는 ‘Gruvbox Dark Hard’)
    "workbench.colorCustomizations": {
        "terminal.background": "#1D2021",
        "terminal.foreground": "#D5C4A1",
        "terminalCursor.background": "#D5C4A1",
        "terminalCursor.foreground": "#D5C4A1",
        "terminal.ansiBlack": "#1D2021",
        "terminal.ansiBlue": "#83A598",
        "terminal.ansiBrightBlack": "#665C54",
        "terminal.ansiBrightBlue": "#83A598",
        "terminal.ansiBrightCyan": "#8EC07C",
        "terminal.ansiBrightGreen": "#B8BB26",
        "terminal.ansiBrightMagenta": "#D3869B",
        "terminal.ansiBrightRed": "#FB4934",
        "terminal.ansiBrightWhite": "#FBF1C7",
        "terminal.ansiBrightYellow": "#FABD2F",
        "terminal.ansiCyan": "#8EC07C",
        "terminal.ansiGreen": "#B8BB26",
        "terminal.ansiMagenta": "#D3869B",
        "terminal.ansiRed": "#FB4934",
        "terminal.ansiWhite": "#D5C4A1",
        "terminal.ansiYellow": "#FABD2F"
    }
  1. settings.json 파일 저장 후, VSCode에서 터미널을 열어보면 테마가 적용된다

프롬프트를 위한 Nerd Fonts로 변경하기

  • 테마는 적용되었지만 여전히 프롬프트의 그래픽문자는 깨져서 출력된다
  • 따라서 Windows Terminal에 설정해둔 Nerd Fonts 계열의 ‘CaskaydiaCove Nerd Font’로 변경하기로 결정
  • 방법은 상단의 ‘폰트 설정하기’ 항목 참조

결과

23.11.03 '폰트 설정하기'에 내용 추가

profile
Lev
⋆꙳⊹⋰ 𓇼⋆ 𝑻𝑰𝑳 𝑨𝑹𝑪𝑯𝑰𝑽𝑬 ⸝·⸝⋆꙳⊹⋰
이전 포스트

Windows Terminal (Windows Powershell) 꾸미기

0개의 댓글