VSCODE 변수, 주석 등 코드 색상 설정하기

VSCODE의 변수, 주석 등의 코드 색상을 지정하는 방법을 알아보았다!

 

1. settings.json 파일 열기

ctrl + shift + p -> settings 검색 -> Preferences: Open Settings (JSON) 클릭

 

2. 프로퍼티 적용

 

"editor.tokenColorCustomizations": {
    "textMateRules": [
            {
                "scope": "범위 지정",
                "settings": {
                    "foreground": "#색상코드",
                    "fontStyle" : "이텔릭, '굵게', '밑줄' 또는 '취소선 등"
                }
            }
        ],
}

위의 내용을 적용해 주면 되는데

이때 scope를 쉽게 알아내는 방법이 있다.

 

3. 편집기 토큰 및 범위 검사 (꿀팁!)

ctrl + shift + p -> Inspect 검색 -> Developer: Inspect Editor Tokens and Scopes 클릭

 

클릭을 한 후 코드를 클릭하면

아래 처럼 정보가 팝업창에 출력이 된다.

 

이 중 textmate scopes에 있는 내용을

범위로 적어주면

원하는 색상으로 적용이 된다!

 

예시

"editor.tokenColorCustomizations": {
    "textMateRules": [
        {
            "scope": [
                "comment",
                "comment punctuation.definition.comment",
            ],
            "settings": {
                "foreground": "#9b70c4",
                "fontStyle":" " (빈칸으로 놓으면 normal)
            }
        },
        .
        .
        .
    ]
}