내 편집기가 내가 원하는 방식으로 보이도록 하면 코딩할 때 기분이 정말 좋아집니다.

VS Code 편집기를 사용자 지정하기 위해 몇 가지 작업을 수행할 수도 있습니다.

🖥 테마

지금은 VS Code에 "Tokyo Night"테마를 사용합니다. 나는 색과 그 불쾌하고 밝은 색으로 내 눈을 아프게하지 않는다는 사실을 정말 좋아합니다.

테마를 변경하려면 설정 > 워크벤치 > 모양 > 색상 테마로 이동합니다.

✏️ 글꼴

글꼴은 현재 Microsoft의 Cascadia Code을 사용합니다.

다른 유사한 글꼴: Victor Mono 또는 Fira Code

가장 읽기 쉬운 것 같아서 Cascadia Code를 사용했습니다. 그러나 결국 그것은 의견의 문제입니다.

컴퓨터에 글꼴을 다운로드하여 설치한 후 설정 > 텍스트 편집기 > 글꼴로 이동하여 글꼴 패밀리 입력에 "cascadia 코드"를 입력할 수 있습니다.

글꼴 합자

Cascadia Code 글꼴에 대해 제가 좋아하는 점은 글꼴 합자를 지원한다는 것입니다. 즉, ===, <= 또는 =>와 같은 특정 문자 조합을 일부 아이콘으로 대체하여 코드를 더욱 보기 좋게 만듭니다.

또한 아래에 표시할 일부 토큰 색상 사용자 정의를 사용합니다 👇

이것이 내 VS 코드가 지금 보이는 방식입니다.


여기 내 전체 VS Code 글꼴 구성이 있습니다.

"editor.fontFamily": "'cascadia code'",
    "editor.fontLigatures": true,
    "editor.fontWeight": 400,
    "editor.fontSize": 12,
    "editor.lineHeight": 23,
    "editor.tokenColorCustomizations": {
        "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"
                }
            },
            {
                "name": "String interpolation",
                "scope": [
                    "punctuation.definition.template-expression.begin",
                    "punctuation.definition.template-expression.end",
                    "punctuation.section.embedded"
                ],
                "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"
                }
            },
            {
                "scope": [
                    //following will be in italic =FlottFlott
                    "entity.name.type.class", //class names
                    "keyword", //import, export, return…
                    "constant", //String, Number, Boolean…, this, super
                    "storage.modifier", //static keyword
                    "storage.type",
                    "storage.type.class.js" //class keyword
                ],
                "settings": {
                    "fontStyle": "italic"
                }
            },
            {
                "scope": [
                    //following will be excluded from italics VSCode has some defaults for italics
                    "invalid",
                    "keyword.operator",
                    "constant.numeric.css",
                    "keyword.other.unit.px.css",
                    "constant.numeric.decimal.js",
                    "constant.numeric.json"
                ],
                "settings": {
                    "fontStyle": ""
                }
            }
        ]
    }

사용 중인 VS Code 테마 및 글꼴을 댓글로 알려주세요 👇

연락을 원하시면 my website을 확인하세요.