Visual Studio Code 拡張機能を使用したコードのシンタックスハイライトの設定

先日、Visual Studio Codeの新しい拡張機能で、VS Codeが4Dと通信してコードを管理できるようになったことをお話しました。シンタックスハイライトは、4D v19 R6の最初のLanguage Server Protocolの機能でした。それでは、ソースコードのレンダリングをカスタマイズする方法を見ていきましょう。

下図のように、シンタックスハイライトを独自のスタイルシートまたは4Dのデフォルトスタイルシートにカスタマイズすることができます。

さらに技術的な情報を見てみましょう。

セマンティックトークン

すべてのプログラミング言語において、コードはセマンティックトークンで構成されています。セマンティック・トークンとは、クラス、メソッド、変数など、ユニークな意味を持つコードの一部分です。他の言語と同様に、4Dコードもセマンティックトークンとモディファイアに分割されています。

VS Codeでは、コードエディターでセマンティックトークンを確認することができます。表示方法は、VSコードのコマンドパレットを開き、「エディタのトークンとスコープを検査」を検索し、選択します。

パレットには、セマンティックトークンとそのモディファイアを含む、カーソルの後ろのコード部分のプロパティが表示されます（もしあれば）。コードの他の部分を選択するだけで、関連するプロパティを直接見ることができます。

以下は、4D言語とLSPセマンティックトークン間のマッピング表です。

フォントの設定方法は？

VS Codeは、4Dコードを自動的に認識しますが、それ以上何が必要でしょうか？これは最後のステップで、それぞれのセマンティックトークンのフォントを設定するのです。
これをカスタマイズするには、VS Codeが使用する設定ファイルを編集する必要があります。そのためには、VS Codeのコマンドパレットを開き、「Settings.json」を検索して編集してください。
ちなみに、VS CodeのSettings.jsonファイルは、ここに置かれています。

macOSの場合は、/Users/{UserName}/Library/Application Support/Code/User/settings.jsonとなります。
Windowsの場合は、C:³ Files³ Electronics Tools³ Electronics Tools³ Electronics Tools³ Electronics Tools³ Electronics Tools³ Electronics Tools³ Electronics Tools³.json。

4Dコードを「light 4D」と「dark 4D」のスタイルシートで表示するために追加するJSON設定は以下の通りです（settings.jsonで「4D-Analyzer.server.path」という行を探し、以下のブロック全体を上か下の行に挿入してください）。

"editor.semanticHighlighting.enabled": true,
    "editor.semanticTokenColorCustomizations": {
        "[Default Light+]":{
            "enabled": true,
            "rules": {
                "*:4d": {"foreground": "#000000", "bold": false, "italic": false, "underline": false, "strikethrough": false},
                "method:4d": {"foreground": "#000088", "bold": true, "italic": true},
                "method.defaultLibrary:4d": {"foreground": "#068c00", "italic": false},
                "method.plugin:4d": {"foreground": "#000000"},
                "property:4d": {"foreground": "#a0806b"},
                "function:4d": {"foreground": "#5f8e5e", "italic": true},
                "parameter:4d": {"foreground": "#000b76", "bold": true},
                "variable.interprocess:4d": {"foreground": "#ff0088"},
                "variable.process:4d": {"foreground": "#0000ff"},
                "variable.local:4d": {"foreground": "#0031ff"},
                "keyword:4d": {"foreground": "#034d00", "bold": true},
                "table:4d": {"foreground": "#532300"},
                "field:4d": {"foreground": "#323232"},
                "comment:4d": {"foreground": "#535353"},
                "type:4d": {"foreground": "#068c00", "bold": true},
                "constant:4d": {"foreground": "#4d004d", "underline": true},
                "string:4d": {"foreground": "#000000"},
                "error:4d": {"foreground": "#ff0000", "bold": true, "italic": true}
            }
        },
        "[Default Dark+]":{
            "enabled": true,
            "rules": {
                "*:4d": {"foreground": "#FFFFFF", "bold": false, "italic": false, "underline": false, "strikethrough": false},
                "method:4d": {"foreground": "#1B79F3", "bold": true, "italic": true},
                "method.defaultLibrary:4d": {"foreground": "#59BB00", "italic": false},
                "method.plugin:4d": {"foreground": "#BFBFBF"},
                "property:4d": {"foreground": "#A0806B"},
                "function:4d": {"foreground": "#4EC36E", "italic": true},
                "parameter:4d": {"foreground": "#0C70FF", "bold": true},
                "variable.interprocess:4d": {"foreground": "#FF0088"},
                "variable.process:4d": {"foreground": "#53B0EB"},
                "variable.local:4d": {"foreground": "#18B3F1"},
                "keyword:4d": {"foreground": "#575757", "bold": true},
                "table:4d": {"foreground": "#CF5600"},
                "field:4d": {"foreground": "#9C6765"},
                "comment:4d": {"foreground": "#8F8F8F"},
                "type:4d": {"foreground": "#59BB00", "bold": true},
                "constant:4d": {"foreground": "#FA647F", "underline": true},
                "string:4d": {"foreground": "#FFFFFF"},
                "error:4d": {"foreground": "#ff0000", "bold": true, "italic": true}
            }
        }
    },

各意味トークン型の後の「:4d」は必須ではありませんが、このシンタックスハイライトを4D言語に対してのみ設定できるようにすることに注意してください。こうすることで、他の言語に対するシンタックスハイライトはそのままになります。
設定を保存すると、コードエディタで直接効果を確認することができます

このカスタマイズは、Webパーツを含む4DプロジェクトでVS Codeを使用する際に有効です。すべての言語は、それぞれのシンタックスハイライトを保持しています。HTML、CSS、Javascript、そして今回は…。4D!