VSCode – シンタックスカラーのカスタマイズ例

VSCode の配色カスタマイズの例を紹介します。
Dark Modern のカラースキームをベースにしています。

主として Python と Rust をターゲットにカスタマイズしていますが、他の言語でもある程度有用な設定と思います。

配色のポイントとして、次のような点を気にしました。

  • 色の種類を増やしすぎない
  • 目に優しそうな色合いにする
  • かと言って淡くしすぎず、鮮やかさと淡さの中間くらいを目指す

自作テーマ紹介の記事リンク

なお、この記事は VSCode の設定でがんばる方法の紹介ですが、後日、自作テーマを作成しました。
もし興味あればこちらもご覧ください。

シンタックスカラーの表示サンプル(Python)

カスタマイズ後の Python コード表示例は次のようになります。

シンタックスカラーの表示サンプル(Rust)

Rust のサンプルも掲載しておきます。

settings.json への記述内容

ちょっと長いですが、settings.json の設定です。
以下の2項目を修正しています。

  • editor.tokenColorCustomizations
  • editor.semanticTokenColorCustomizations

Filename: settings.json

{
    "editor.tokenColorCustomizations": {
        "comments": {
            "foreground": "#666",
            "fontStyle": "italic",
        },
        "functions": "#ee8",
        "keywords": "#dbf",
        "numbers": "#fb8",
        "strings": "#ae8",
        "types": "#ee8",
        "variables": "#ddd",
        "textMateRules": [
            {
                "scope": [
                    "keyword.operator", // override
                    "punctuation",
                    "source",
                    "variable.other.constant", // override
                ],
                "settings": {
                    "foreground": "#ddd",
                },
            },
            {
                "scope": [
                    "constant.character", // override
                    "constant.character.escape", // override
                    "markup.inline.raw", // override
                    "punctuation.definition.template-expression.begin", // override
                    "punctuation.definition.template-expression.end", // override
                ],
                "settings": {
                    "foreground": "#ae8",
                },
            },
            {
                "scope": [
                    "keyword", // override
                    "keyword.codetag.notation",
                    "storage.modifier", // override
                ],
                "settings": {
                    "foreground": "#dbf",
                },
            },
            {
                "scope": [
                    "entity.other.inherited-class", // override
                    "meta.function-call.generic",
                    "punctuation.definition.quote.begin.markdown", // override
                ],
                "settings": {
                    "foreground": "#ee8",
                },
            },
            {
                "scope": [
                    "entity.name.scope-resolution", // override
                    "entity.name.namespace", // override
                    "entity.name.tag", // override
                    "markup.bold", // override
                    "markup.heading", // override
                    "punctuation.definition.list.begin.markdown", // override
                    "support.type.property-name", // override
                    "support.variable", // override
                    "variable.other.enummember", // override
                    "variable.parameter",
                ],
                "settings": {
                    "foreground": "#9df",
                },
            },
            {
                "scope": [
                    "constant",
                    "constant.language", // override
                    "entity.name.function.macro.rust",
                    "entity.name.function.preprocessor", // override
                    "keyword.operator.logical.python", // override
                    "support.function.builtin",
                    "variable.language.self",
                    "variable.language.special",
                    "variable.parameter.function.language.special",
                ],
                "settings": {
                    "foreground": "#fb8",
                },
            },
        ],
    },
    "editor.semanticTokenColorCustomizations": {
        "rules": {
            // for Python
            "operator": "#ddd",
            "class.builtin": "#fb8",
            "function.builtin": "#fb8",
            "property.builtin": "#9df",
            "variable.builtin": "#9df",
            // for Rust
            "builtinAttribute": "#9df",
            "selfKeyword": "#fb8",
            "selfTypeKeyword": "#fb8",
        },
    },
    "vsicons.dontShowNewVersionMessage": true,
}

カスタマイズの詳細説明

カスタマイズ方法についての詳細説明は以下の記事を参照です。

  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

このサイトは reCAPTCHA と Google によって保護されていますプライバシーポリシー利用規約 申し込み。

The reCAPTCHA verification period has expired. Please reload the page.

目次