[22.03.14 Update] VSCode 키워드 컬러 변경하기 (Semantic Highlighting 설정)

[Before]

[After]

 

어느 날 갑자기 에디터에서 낯선 느낌이 드는 거 같아서 보니까... 위처럼 키워드의 색이 바뀐 것을 눈치챌 수 있었습니다. 아마도 VSCode 1.43 버전에서 Semantic Highlighting 세부설정 업데이트 이후 발생한 현상으로 보입니다.
찾아보니 이 부분 설정값을 바꿔주면 다시 해결할 수 있다고 하네요.
저는 console 글자 색이 초록색인게 더 가독성이 좋다고 느껴서 아래와 같은 원상 복구하는 작업을 진행했습니다.

 

[ Semantic Highlighting 설정 변경하기 ]

 

1. [ Ctrl + , ] 또는 상단 메뉴의 File > Preferences > Settings 를 통해 Settings 화면으로 이동합니다.

그리고 입력창에 'editors.tokenColorCustomizations' 라고 입력하게 되면 Edit in settings.json이라는 텍스트 링크가 나오게 되는데 이것을 클릭합니다.

 

2. settings.json에 입력된 내용은 사용자마다 다를 수 있습니다. 붉은 박스부분을 추가로 입력해줍니다.

 

// 22.03.14 기준 적용 안됨!! 
"editor.tokenColorCustomizations": {
    "semanticHighlighting": false
},

(22.03.14 수정) VSCode 버전이 업데이트 되면서 위 내용은 사용이 불가능해졌습니다. 
아래 내용으로 변경해주시기 바랍니다!

// 22.03.14 기준 적용 가능한 코드!
"editor.semanticTokenColorCustomizations": {
    "[Default Dark+]": {
        "rules": {
          "variable.defaultLibrary": "#4EC9B0",
          "variable.readonly": "#51a3c4"
        }
      }
},

3. 원래대로 console 키워드의 색이 돌아온 것을 확인할 수 있습니다.

 

위에 추가한 tokenColorCustomizations는 사용하는 테마별로 다르게 적용할 수 있다고 합니다.

 

[Reference]

https://code.visualstudio.com/docs/getstarted/themes#_semantic-highlighting

https://medium.com/@danromans/how-to-customize-semantic-token-colorization-with-visual-studio-code-ac3eab96141b