나와 같은 사람이라면 개발 환경을 제대로 만드는 데 시간을 할애할 것입니다. 내 말은, 왜 안돼. 당신은 하루에도 여러 시간 동안 그것을 응시하고 있습니다. 그것은 당신이 그것을 좋아하는 방식이어야합니다.

나는 VSCode에 살고 있고, 예전에는 NeoVim이었지만 VSCode 타이프스크립트 지원이 훨씬 뛰어나서 약 1년 전에 풀 타임 스위치를 만들었습니다. 저는 합자와 이탤릭체 변형이 있는 글꼴( Dank Mono )을 사용하는 사람 중 한 명이며 이러한 기능의 모든 이점을 얻고 싶습니다.

모든 VSCode 테마는 편집기에 따라 합자를 지원합니다. 하지만 좋아하는 테마가 이탤릭체 글꼴을 지원하지 않는다면 어떻게 하시겠습니까?

누가 이탤릭체 변형을 원하지 않습니까? 너무 예뻐요!



매우 쉽다는 것이 밝혀졌습니다. 거의 모든 것이 VSCode라는 설정이 있습니다. 여기에는 테마가 코드의 특정 부분을 처리하는 방식을 변경하는 것이 포함됩니다.

설정을 열려면(Mac에서) cmd + 를 누른 다음 탭 상단 모서리에 있는 이 버튼을 클릭합니다.



먼저 설정 파일에 "editor.tokenColorCustomizations" 속성을 추가해야 합니다. 그런 다음 테마 이름을 키로 추가합니다. 이탤릭체 설정이 다른 다양한 테마를 타겟팅할 수 있다는 점에서 매우 훌륭합니다.

"editor.tokenColorCustomizations": {
    "[Nord]": {
      "textMateRules": []
    }
}

이제 코드의 다른 부분을 대상으로 설정했습니다. 이것의 구조는 다음과 같습니다.

{
  "scope": "emphasis",
  "settings": {
    "fontStyle": "italic"
  }
},

범위는 우리가 목표로 삼고 있는 대상이며 설정은 선택한 범위에 영향을 미치고자 하는 방식입니다. 여기에서 글꼴 두께, 색상 등과 같은 다른 설정을 변경할 수도 있지만 코드의 특정 부분을 이탤릭체로 표시하는 데만 관심이 있다는 점을 명심하십시오.

이제 각 설정을 거치지는 않겠지만 저에게 맞는 설정이 포함되어 있습니다.

"editor.tokenColorCustomizations": {
    "[Nord]": {
      "textMateRules": [
        {
          "scope": "emphasis",
          "settings": {
            "fontStyle": "italic"
          }
        },
        {
          "scope": "strong",
          "settings": {
            "fontStyle": "bold"
          }
        },
        {
          "scope": "entity.other.attribute-name",
          "settings": {
            "fontStyle": "italic"
          }
        },
        {
          "scope": "markup.underline",
          "settings": {
            "fontStyle": "underline"
          }
        },
        {
          "scope": "markup.bold",
          "settings": {
            "fontStyle": "bold"
          }
        },
        {
          "scope": "markup.heading",
          "settings": {
            "fontStyle": "bold"
          }
        },
        {
          "scope": "markup.italic",
          "settings": {
            "fontStyle": "italic"
          }
        },
        {
          "scope": "storage.type",
          "settings": {
            "fontStyle": "italic"
          }
        },
        {
          "scope": "storage.modifier",
          "settings": {
            "fontStyle": "italic"
          }
        },
        {
          "name": "String interpolation",
          "scope": [
            "punctuation.definition.template-expression.begin",
            "punctuation.definition.template-expression.end",
            "punctuation.section.embedded"
          ],
          "settings": {
            "fontStyle": "italic"
          }
        },
        {
          "scope": "keyword.control",
          "settings": {
            "fontStyle": "italic"
          }
        },
        {
          "scope": [
            "keyword.operator.new",
            "keyword.operator.expression",
            "keyword.operator.cast",
            "keyword.operator.sizeof",
            "keyword.operator.logical.python"
          ],
          "settings": {
            "fontStyle": "italic"
          }
        },
        {
          "name": "this.self",
          "scope": "variable.language",
          "settings": {
            "fontStyle": "italic",
            "foreground": "#ff5874"
          }
        },
        {
          "name": "@Decorator",
          "scope": ["meta.decorator punctuation.decorator"],
          "settings": {
            "fontStyle": "italic"
          }
        },
        {
          "scope": ["punctuation.definition.comment", "comment"],
          "settings": {
            // "foreground": "#ff5874",
            "fontStyle": "italic"
          }
        }
      ]
    },
}

이것이 다른 사람들에게 도움이 되었기를 바랍니다. 내가 원하는 테마를 선택하고 내가 원하는 대로 쉽게 조정할 수 있다는 점이 마음에 듭니다.

읽어주셔서 감사합니다 🙏

제가 놓친 것이 있거나 뭔가를 할 수 있는 더 좋은 방법이 있다면 알려주세요.