VSCode の「InterSystems Language Server」の配色をカスタマイズしよう

記事

Seisuke Nakahashi · 2023年8月14日 5m read

#InterSystems IRIS #InterSystems IRIS for Health #VSCode

突然ですが、みなさま、IRIS でのコーディングに Visual Studio Code をご利用されていますか？以前投稿しましたように、2023.2からスタジオは非推奨となっています。私自身も数年前からは VSCode 一本に移行しました。VSCode はご存じのように、ありとあらゆる項目でカスタマイズが可能となっており、一度慣れると、スタジオより見た目よく、自分好みに仕上げられ、何より動作が軽いのがお気に入りです。

さて今日は、その VSode の見た目のカスタマイズのお話です。

VSCode で IRIS に接続するためには、以下3つのエクステンションを導入します。

InterSystems ObjectScript
InterSystems Language Server
InterSystems Server Manager

ここでの問題は、2つめ、「InterSystems Language Server」です。これは IRIS 独自言語である ObjetScript の各種コマンドや関数に準拠したカラーパレットが登録されています。しかし、このエクステンション、それ以外の見た目は以下のような標準の色使いで固定されています。

「この配色は好き」という方なら問題ありません。でも、「せっかくだから、左のアクティビティバーの黒、下のステータスバーの青、タブまわりなどの色を変えたい。　でも、コマンド周りの配色は InterSystems Language Server を使い続けたい」場合どうすればいいでしょう。　私がそうでしたので、調べてみました。

これは VSCode の設定です。簡単なのは、設定ファイル settings.json に書き込んでしまうことです。具体的には C:\Users\<username>\AppData\Roaming\Code\User\settings.json に以下のような workbench.colorCustomizations セクションを追加します。

    "workbench.colorCustomizations": {
        "activityBar.border": "#ffffff",
        "activityBar.background": "#ffffff",
        "activityBar.foreground": "#000000"
    },JSON
JSON

すると以下のように、左のActivityBar が黒から白背景にかわります。

これは楽しい！ VSCode の本家ページには、どの場所の色はどのプロパティとして指定できるか、詳細な仕様書が公開されています。私はライト系の見た目が好きなので、以下のように変更してみました。

大満足！みなさまもぜひ、こんな風に、自分好みのエディタに仕上げていただき、VSCode で IRIS のコード開発を楽しまれてください。 Happy Coding！

参考までに・・・私の settigns.json を最後に貼り付けておきます。

{
    "workbench.colorTheme": "InterSystems Default Light",
    "workbench.iconTheme": "vs-minimal",
    "workbench.editor.untitled.hint": "hidden",
    "workbench.startupEditor": "newUntitledFile",
    "workbench.layoutControl.enabled": false,
    "workbench.editor.enablePreview": false,
    "window.title": "${dirty}${activeEditorShort}",
    "window.commandCenter": false,
    "explorer.confirmDelete": false,
    "extensions.ignoreRecommendations": true,
    "editor.minimap.enabled": false,
    "editor.fontFamily": "HackGen",
    "editor.fontSize": 17,
    "editor.renderWhitespace": "none",
    "editor.renderControlCharacters": false,
    "debug.console.fontSize": 17,
    "debug.console.fontFamily": "HackGen",
    "files.autoGuessEncoding": true,
    "breadcrumbs.enabled": false,
    "intersystems.language-server.suggestTheme": false,
    "intersystems.language-server.diagnostics.classes": false,
    "intersystems.language-server.diagnostics.deprecation": false,
    "objectscript.debug.debugThisMethod": false,
    "objectscript.debug.copyToClipboard": false,
    "objectscript.overwriteServerChanges": true,
    "objectscript.showProposedApiPrompt": false,
    "workbench.colorCustomizations": {
        "focusBorder": "#ffffff00",
        "foreground": "#000000",
        "editor.background": "#ffffff",
        "editor.foreground": "#000000",
        "scrollbar.shadow": "#ffffff",
        "titleBar.border": "#ffffff",
        "titleBar.activeBackground": "#ffffff",
        "titleBar.activeForeground": "#000000",
        "titleBar.inactiveBackground": "#ffffff",
        "titleBar.inactiveForeground": "#000000",
        "titleBar.hoverBackground": "#f1f8ff",
        "tab.activeBackground": "#f1f8ff",
        "tab.activeForeground": "#3d5e7f",
        "tab.inactiveBackground": "#ffffff",
        "tab.inactiveForeground": "#888888",
        "tab.border": "#ffffff",
        "tab.activeBorder": "#3d5e7f",
        "activityBar.border": "#ffffff",
        "activityBar.background": "#ffffff",
        "activityBar.foreground": "#000000",
        "activityBarBadge.background": "#3d5e7f",
        "sideBar.border": "#ffffff",
        "sideBar.background": "#ffffff",
        "sideBar.foreground": "#000000",
        "sideBarSectionHeader.background": "#ffffff",
        "list.highlightBackground": "#f1f8ff",
        "list.highlightForeground": "#3d5e7f",
        "list.activeSelectionBackground": "#f1f8ff",
        "list.activeSelectionForeground": "#3d5e7f",
        "list.inactiveSelectionBackground": "#f1f8ff",
        "list.inactiveSelectionForeground": "#3d5e7f",
        "list.hoverBackground": "#f1f8ff",
        "list.hoverForeground": "#3d5e7f",
        "list.focusBackground": "#f1f8ff",
        "list.focusForeground": "#3d5e7f",
        "editorLineNumber.foreground": "#bbbbbb",
        "editorLineNumber.activeForeground": "#3d5e7f",
        "editorGroup.border": "#ffffff",
        "editorGroupHeader.tabsBackground": "#ffffff",
        "editorGroupHeader.noTabsBackground": "#ffffff",
        "editorGroupHeader.tabsBorder": "#ffffff",
        "editor.lineHighlightBackground": "#f8fbff",
        "editor.lineHighlightBorder": "#f8fbff",
        "editorWidget.background": "#ffffff",
        "editorWidget.border": "#000000",
        "editorSuggestWidget.highlightForeground": "#3d5e7f",
        "editorSuggestWidget.background": "#fcfcfc",
        "input.border": "#b2b2b2",
        "input.background": "#ffffff",
        "inputOption.activeBorder": "#000000",
        "inputOption.activeForeground": "#000000",
        "dropdown.border": "#b2b2b2",
        "dropdown.background": "#ffffff",
        "dropdown.listBackground": "#ffffff",
        "notificationCenter.border": "#ffffff",
        "notificationCenterHeader.background": "#ffffff",
        "notificationToast.border": "#ffffff",
        "notifications.background": "#ffffff",
        "notifications.border": "#ffffff",
        "button.background": "#3d5e7f",
        "button.foreground": "#ffffff",
        "statusBar.border": "#ffffff",
        "statusBar.background": "#ffffff",
        "statusBar.foreground": "#000000",
        "statusBar.noFolderBackground": "#ffffff",
        "statusBar.noFolderForeground": "#000000",
        "statusBar.debuggingBackground": "#ffffff",
        "statusBar.debuggingForeground": "#000000",
        "panel.border": "#3d5e7f"
    }
}JSON
JSON