문제

TS 공부를 하려던 중 타입 명시하는 부분에서 글자색이 변경하지 않는 것을 확인하였다. 강의와 코드 색상이 달랐음.

왼쪽이 내 에디터, 오른쪽이 색상이 적용된 에디터이다. (테마는 둘 다 Community Material Theme 사용)

해결법

1. cmd + shift + p (window: ctrl + shift + p)로 명령팔레트를 연후 settiing.json 입력 -> 기본설정: 사용자 설정 열기 클릭

2. 여기 맨 밑에다 코드를 추가해서 색상을 바꿔줄거다.

3. setting.json 켜놓고 이제 색상을 변경할 코드 파일에 들어간 다음 다시 cmd + shift + p -> developer: inspect editor tokens and scopes 입력 -> 개발자: 편집기 토큰 및 범위 검사 클릭

4. 이제 색깔 바꾸고 싶은 코드에 마우스를 갖다대면 이렇게 정보가 나온다. 여기서 필요한건 foreground와 textmate scopes의 첫 줄 값!

• foreground는 현재 선택된 텍스트의 색상이고 textmate scopes는 이 설정들이 적용되는 범위이다. (아래 코드에서는 타입코드를 의미)

• 바꿔야 하는 코드의 textmate scopes와 바꿀 색상이 적용된 코드의 foreground를 잘 복사해준다 (원하는 색상이 따로 있다면 그냥 그 색상 16진수 복사해서 쓰면 됨 꼭 있는 색상 쓸 필요 x)

5. 이제 setting.json 에 아래와 같이 코드를 작성해주면된다. (scope 하나 더 추가해서 씀)

• 색상이 잘 적용된 것을 확인할 수 있다.

테마를 어떤 걸 쓰냐에 따라서 코드 수정이 조금씩은 필요할거다. 중요한건 이런 방식으로 내가 원하는 scope에 디자인을 커스텀할 수 있다는 점!

"editor.tokenColorCustomizations": {
    "[Community Material Theme]": {
      "textMateRules": [
        {
          "scope": [
            "support.type.primitive.ts",
            "support.type.builtin.ts"
          ],
          "settings": {
            "foreground": "#FFCB6B"
          }
        },
      ]
    }
  }