바로 결론부터 !
결론은 반영이 안된게 아니라 반영이 안된 것처럼 보였던 것 !
// settings.json
{
"editor.fontLigatures": true
}
위 옵션이 있어야 ==> 또는 === 같은 기호를 사용했을 때 이쁘게 표현되는데,
위 옵션이 설정되어 있지 않아서 반영 안된 것 처럼 보였던 것 !!
그래서
// settings.json
{
"editor.fontFamily": "'Fira Code', Menlo, Monaco, 'Courier New', monospace",
"editor.fontLigatures": true
}
fontFamily 적용과 함께 리가처 옵션도 함께 반영해 주어야 정상적으로 표현되어 보입니다.
⚠️ "editor.fontFamily"에서 적용해주려는 폰트가 다른 폰트보다 제일 앞에 배치되어 있어야 적용됩니다.
후위에 있을 경우 우선순위에 밀려서 적용되지 않아요.
폰트 적용 방법
Cursor 또는 VScode의 Settings로 이동하려면 단축키 cmd + , 를 활용하거나
(Cursor 기준) 최상단 툴바의 Cursor > Preferences > VS Code Settings
항목을 클릭하면 Settings로 접근할 수 있습니다.
Settings로 이동해 위 참고 이미지에 추가한 것 처럼 다른 기본 적용되어있는 폰트들 보다 제일 앞에 'Fira Code' 라고 적용해주면 정상적으로 반영됩니다.
✔️ 폰트를 적용해 주려면 우선 컴퓨터에 해당 폰트가 설치되어 있어야 합니다.
-> 다양한 개발 관련 폰트: https://devfonts.gafi.dev/
-> Fira Code 다운로드: https://fonts.google.com/specimen/Fira+Code
에서 다운로드 가능합니다.
✔️ 여기서 주의할 점은 적용해주려는 폰트에 띄어쓰기가 있는 폰트명인 경우 따옴표를 붙여주어야 합니다.
-> 단, 테스트해보니까 대소문자는 상관 없더라구요. fira code, Fira code 전부 상관 없어요.
✔️ 그리고 우선순위 원칙에 의해 다른 기본 폰트들보다 제일 앞에 추가해주어야 합니다.
마지막으로,
settings.json 파일로 접근 방법
settings.json 파일로 접근하려면 cmd + p를 눌러서 settings.json을 검색해서 파일로 이동하거나
Settings에서 오른쪽 위쪽을 보면 위 빨간색 박스에 표시된 버튼이 있어요.
해당 버튼을 클릭하면 settings.json 파일로 접근할 수 있답니다.
접근해서 아래 옵션까지 깔끔하게 추가해주면
// settings.json
{
...
"editor.fontLigatures": true
}
요런 이쁘장한 모양이 반영된답니다.
끝 !