VS Code 셋팅하기 - 1

VS Code 셋팅하기 - 1

Themes 변경

VS Code에서는 선택할 수있는 많은 테마들이 있다. 그중에서 인기있고 가장 많이 쓰는 테마들 입니다.

밝은테마 어둔운테마 재밌는테마
Hop Light Night Owl Slack
Night Owl Light Cobalt2 Hot Dog Stand
Min Noctis wind95
Noctis Dracula  

단축키를 사용해서 Command Palette(ctrl + shift + P) 를 누른다

image

기본설정 색 테마를 누르고

image

원하는 테마를 선택한다. 테마가 없는 경우 마켓플레이스에서 설치 한다.

image

icon 변경

아이콘 테마는 탐색기 파일, 폴더, 프로젝트 등 아이콘을 변경한다.

VS Code Can Do That 확장팩에는 두가지 아이콘 테마가 포함되어 있다.

  1. Material Icons
  2. Chalice Icons

단축키를 사용해서 Command Palette(ctrl + shift + P) 를 누른다

image

Material Icons 테마를 선택한다.

image

Chalice Icons 테마를 선택한다.

image

image

Font 변경

무료 폰트 유료
FiraCode Dank Mono
Hasklig Operator Mono
Monoid Pragmata Pro

폰트를 다운로드 하고 VS Code 셋팅 방법

  • Ctrl + , 눌러서 Settings Editor 실행한다
  • Font 검색한다.
  • 새로운 폰트를 입력한다.

예제) FriaCode Git Hub (링크로) 들어간다

image

  1. 최신 releases로 들어가 zip 파일 다운로드를 한다.
  2. os에 글꼴 설치를 한다
  3. setting 가서 설정한다.

image

요렇게 이쁘게 표현 가능

image

Editor 편집 부가 기능

Minimap 기능

image

미니맵은 긴 파일을 쉽게 탑색 할 수 있도록 우측에 디스플레이를 제공합니다. 하지만 읽을 수 없기 때문에 사용하지 않을 가능성이 높고 공간만 차지하므로 이 기능을 끄는 것을 추천 드립니다.

  • ctrl + ,
  • minimap 검색
  • 미니맵 사용 끄기

image

side bar를 오른쪽으로 이동

image

  • ctrl + shift + P
  • toggle sidebar Position 선택

image

image

열려 있는 편집기 숨기기

기본적으로 VS Code는 Open Editors라고 있습니다 (열러있는 편집기)

image

열려있는 편집기 제거

  • ctrl + ,
  • open editors visible
  • 편집기 열기 표시를 0으로 설정

image

editor instances를 쉽게 식별하기

우선 “Peacock” 확장프로그램을 설치 한다.

  • Ctrl + shift + P
  • Peacock 색상입력을 선택
  • 원하는 색상 입력 (Ex ffa07a)

image

image

VS Code / 확장 다운로드 목록 (/w 김도은)

  • Auto Close Tag
  • ESLint
  • Korean Language Pack for
  • Live Server
  • Material Icon Theme
  • Night Owl
  • Prettier
  • Vetur
  • Vue 3 Snippets
  • Vue VSCode Snippets
  • Eclipse Keymap

reference