저는 Mac에서 VSCode 라는 에디터를 사용하고 있습니다. Mac 유저로서 apple 고유의 글씨체도 예뻐서 바꿀 생각이 없었지만 아래 Fira code 나 D2Coding 글씨체처럼 특수문자가 예쁘게 표현되는 ligature 옵션이 지원되는 글씨체들이 있습니다. 특히 비교연산자나 arrow function을 사용할 때 ligature 옵션을 적용해주면 예쁜 화살표로 변해서 나오게 되어 저도 설치해보고 싶어서 해보았습니다~!
많이 사용되어지는 글씨체가 두가지 있습니다.
첫번째 추천 글씨체는 코드 가독성이 좋다고 알려진 D2coding 이고
두번째 추천 글씨체는 지인추천 FIRA Code 입니다.
그럼 어떻게 내 visual studio code에 적용시킬 수 있을지 알아볼까요?
1. 마음에 드는 코드를 아래 url 에서 다운로드 해줍니다.
1-1. Fira 폰트 다운로드 링크
https://github.com/tonsky/FiraCode
tonsky/FiraCode
Free monospaced font with programming ligatures. Contribute to tonsky/FiraCode development by creating an account on GitHub.
github.com
1-2. D2Coding 폰트 다운로드 링크
github.com/naver/d2codingfont/releases
Releases · naver/d2codingfont
D2 Coding 글꼴. Contribute to naver/d2codingfont development by creating an account on GitHub.
github.com
2. 다운로드해서 압축을 풀어주면 다음과 같은 글씨체들을 볼 수 있습니다. 여기서 글씨체를 클릭해서 '서체설치'를 클릭하여 설치해줍니다.
3. vscode - preferences - settings에서 'font'를 검색해준 후 'Edit in settings.json' 을 클릭해서 아래와 같이 옵션을 설정해줍니다.
|
1
2
3
4
5
6
7
|
// D2Coding
"editor.fontFamily": "'D2Coding'",
"editor.fontLigatures": true,
// FiraCode
"editor.fontFamily": "'Fira Code'",
"editor.fontLigatures": true,
|
cs |
두개 모두 적용해보았는데 개인적으로는 Fira Code가 느낌이 더 좋아서 사용하고 있는중입니다. 'ligature' 옵션 적용해서 코드 예쁘게 보세요 ㅎㅎ
'업무이야기' 카테고리의 다른 글
| VS Code 자주 사용하는 단축키 정리 (0) | 2021.03.08 |
|---|---|
| VS Code 보기 좋은 테마 변경 방법 및 추천 (0) | 2021.03.06 |
| React background-image 로드 에러 해결하기 url([object Module]) (0) | 2021.01.23 |
| 자바스크립트 부드럽게 느려지는 애니메이션 - progress bar (0) | 2021.01.09 |
| 타입스크립트 typescript 자바스크립트 적용 및 기본 문법 (0) | 2020.12.31 |
