VSCode 초기 설정과 유용한 Extensions

D2Coding 폰트 설정

D2Coding은 코딩 시 영문자와 숫자 등 유사 기호 간 명확하게 구분할 수 있는 폰트

 

다운로드 및 설치

아래의 Github에서 D2Coding 폰트 다운로드

GitHub - naver/d2codingfont: D2 Coding 글꼴

 

다운로드 영역의 하이퍼링크 클릭

 

Assets에서 .zip 파일 다운로드

 

VSCode 폰트 설정

`Ctrl` + `,`

(`Cmd⌘` + `,`)

또는

`File` → `Preferences` → `Settings`

으로 설정(Settings)에 들어가서 `font` 검색

 

`Font Family` 부분의 가장 앞쪽에 `D2Coding` 입력

(가장 앞쪽의 폰트부터 적용하고, 해당 폰트가 없으면 그 다음 폰트가 적용됨)

Font Family 가장 앞에 D2Coding 입력

 

indent-rainbow

들여쓰기(indentation)별로 색상을 부여해주어 코드 가독성 향상

미적용(좌), 적용(우)

 

VSCode Extensions에 `indent-rainbow` 검색 후 설치

 

Material Icon Theme

파일 아이콘을 직관적으로 표현

미적용(좌), 적용(우)

 

VSCode Extensions에 `Material Icon Theme` 검색 후 설치

 

Prettier

코드를 일관된 스타일로 자동 포매팅

 

VSCode Extensions에 `Material Icon Theme` 검색 후 설치

 

Live Server

로컬 서버를 바로 실행

(HTML, CSS, JavaScript 활용 시 유용)

 

VSCode Extensions에 `Live Server` 검색 후 설치

 

Code Runner

코드 스니펫(snippet)을 부분적으로 혹은 코드 전체를 실행

(JavaScript 활용 시 유용 + Node.js)

 

VSCode Extensions에 `Code Runner` 검색 후 설치