VS CODE 에서 != 대신 ≠, => 대신 ⇒, <= 대신 ≤ 사용하는 꿀팁

코드를 직관적으로 보기 위해서 !=, => 대신에 ≠, ⇒ 이런 수학 기호를 사용할 수 있습니다.

VS CODE 에서도 이런 설정이 적용 가능합니다.

그러기 위해선 VS CODE  기본값으로 있는 폰트는 불가능해, 폰트를 다운받고 폰트에서 제공해주는 리가처를 적용해야합니다.

 

VS Code의 리가처 기능은

✅ "폰트 자체에 포함된 특수 글자 조합(=리가처)을 사용해서 표시하는 기능"입니다.

즉,

• 리가처는 "폰트 디자인" 안에 포함된 기능입니다.(fontLigatures)
• 리가처가 없는 폰트는 !=을 절대 ≠로 바꿔주지 않습니다.
• 반대로 리가처를 적용하려면 폰트 자체를 리가처를 지원하는 폰트로 바꿔야 합니다.

 

✨Ligatures  적용 예시

 

💠같지 않음 비교 연산자

💠화살표 함수

💠동등 비교 연산자와 할당 연산자 차이

💠이상, 이하

💠일치 연산자(===)

이 밖에도 더 있습니다 ㅎㅎ

 

💡 폰트 적용 방법

1️⃣ 폰트 다운로드

VS CODE settings.json 에 설정을 바꾸기 위해선 먼저 폰트를 다운받아야합니다.
그중에서도 인텔리제이로 널리 쓰이는 제트브레인 사의 폰트를 다운 받도록 하겠습니다.

 

JetBrains Mono: A free and open source typeface for developers

 

 

2️⃣ 폰트 설치

다운 받은 ZIP 파일을 압축 해제해줍니다.
그리고 아래 경로에 가면 여러가지 폰트들을 볼 수 있습니다.

 

🪟 Windows (10/11 기준)

다운로드한 .ttf 파일(위 이미지의 폰트 파일)을 더블 클릭하면 미리보기가 열립니다

[설치] 버튼 클릭하여  자동으로 C:\Windows\Fonts 폴더에 설치합니다.

 

또는, 여러 개를 한 번에 설치하려면,

 

 

파일들 모두 선택 → 마우스 오른쪽 클릭 → "설치"

 

 

만약 정상적으로 폰트가 설치되었는지 확인하고 싶다면, C:\Windows\Fonts 폴더에서  "JetBrains Mono" 이 있는지 확인하면 됩니다.

 

🍎 macOS

폰트 파일(.ttf 또는 .otf)을 더블 클릭 → "Font Book" 앱에서 [Install Font] 하면 자동으로 시스템에 폰트 추가

 

폰트 설치를 확인하려면, Font Book 앱 실행 → 설치한 폰트 파일이나 JetBrains Mono 검색

 

3️⃣ VS CODE 설정

이젠 VS CODE 의 설정을 바꿔보겠습니다.

(1) 명령 팔레트(Command Palette)을 엽니다.

Ctrl + Shift + P

 

(2) VS CODE 의 settings.json 을 열겠습니다.

Preferences: Open User Settings (JSON)

 

입력 후 Enter

설정 JSON 을 열어보시면 아래처럼 되어 있을 겁니다.

{
  "editor.fontFamily": "Consolas, 'Courier New', monospace",
  "workbench.settings.applyToAllProfiles": ["editor.fontFamily"]
}

​
(3) 이젠 다운 받은 폰트 폰트 패밀리에 넣어주고, 리가처 사용을 허용하겠습니다.
     아래 내용을 복붙 해주시면 됩니다.

{
  "editor.fontLigatures": true,
  "editor.fontFamily": "JetBrains Mono, Consolas, 'Courier New', monospace",
  "workbench.settings.applyToAllProfiles": ["editor.fontFamily"]
}

이런 설정은 다음과 같은 내용입니다.
  

• "editor.fontLigatures": true, // 리가처(기호 합성) 기능 켜기
• "editor.fontFamily": "JetBrains Mono, Consolas, 'Courier New', monospace", // 폰트 우선순위 - 그렇기에 폰트 패밀리에서 제일 앞에 추가해줘야합니다.
• "workbench.settings.applyToAllProfiles": ["editor.fontFamily"] // 여러 프로필에 동일 폰트 적용

 

4️⃣ 적용 확인

이제 !=가 ≠처럼, ===가 ≡처럼 보이는지 확인하면 됩니다.
만약 안 보인다면  에디터 탭을 닫았다 다시 열거나, VS Code를 완전히 재시작하면 됩니다.