[vscode] Color Theme - 변수, 객체 색상 바꾸기

Color Theme

• vscode에서 화면에 보이는 색상을 변경해주는 세팅
• vue 작업하다 object.item 이런 식으로 되어 있는 선언되어 있는 변수가 같은 색이라 구분이 잘 안 간다는 느낌을 받아서 찾기 시작

내용

1. F1(ctrl+shift+p) > Color theme를 선택하면 기본적인 color theme를 바꿀 수 있습니다.
2. 그런데.. 여기서 기본 테마를 적용했는데 몇몇 색상만 바꾸고 싶다 하시는 분들만 이 글을 읽으시면 됩니다.

커스텀

1. setting(ctrl + ,) 에 가서 color를 검색하면 'Editor: Semantic Token Color Customizations' 이 나옵니다.
   여기서 'Edit in setting.json' 클릭
2. setting.json 에서 기본적인 function, property, parameter 같은 semantic token type 기준으로 변경하고 싶으면 아래 코드처럼 작성하면 됩니다.

  "editor.semanticTokenColorCustomizations": {
    "[Default Dark+]": {
      "rules": {
        "property": "#ff0000"
      }
    }
  },

property 빨간색(#ff0000)으로 적용한 결과

여기서 더 나아가 커스텀을 하고 싶은 경우 아래 코드처럼 추가하면 됩니다.

  "editor.tokenColorCustomizations": {
    "textMateRules": [
      {
        "name": "Variable Property Other object",
        "scope": [
            "variable.other.object.ts"
        ],
        "settings": {
          "foreground": "#DCDCAA"
        }
    },
    ]

1. 이때, 내가 수정하고 싶은 부분이 어떤 scope인지 알기 위해서 F1(ctrl+shift+p) > inspect editor tokens and scopes를 클릭해서 아래 사진 같이 나오는 걸 확인 후, textmeta scopes에 적혀있는 값을 하나 적어주면 됩니다.

scopes 확인한 결과

list에 커스텀 적용한 결과

최종 setting.json의 구조

setting.json

참고 : vscode공식

Visual Studio Code Themes