web-dev-qa-db-ja.com

Visual Studio Codeの構文強調表示のカスタマイズ

現在、新しいファイルタイプ（ANTLR）の拡張子を記述しようとしていますが、Visual Studio Codeで構文の強調表示に使用される色を変更する方法を考えています。私には、それは拡張機能ではなく、どこかで定義されているように見えます。色の設定エントリはありませんし、それを定義するCSSファイルも見つかりませんでした（vscodeはElectronを使用しているので、期待しています）。また、vscodeで生成された設定ファイルとそれに付属するファイルも調べましたが、手がかりもありません。どちらもウェブ検索の助けにはなりませんでした。だから、私は今少し迷っている。

誰かが私にいくつかのヒントを与えたり、関連するドキュメントを教えてくれたりできますか？

visual-studio-codevscode-extensions
18
Mike Lischke

パーティーに少し遅れましたが、ここでこれを追加し、次の人に数時間の検索をさせます。

ここには、2つの概念があります。

  • テキストファイルを異なるscopesのトークンに変換する言語文法
  • scopesを（できれば）目に優しい方法で色付けするテーマ。

独自の文法を作成している場合、またはTextMateなどから変換している場合は、テーマで定義されているスコープとは異なるスコープを使用している可能性があります。その場合、実際に定義されている場合でも、定義するトークンに明確な区別はありません。

これには2つの方法があります。 1つ目は、カスタムスコープでテーマを拡張し、必要に応じて色を付けることです。あなたの言語を使用するすべての人もあなたの配色が好きでない限り、本当に良い方法ではありません。もう1つは、VSCodeとテーマの作成者によって既に定義および色付けされた（限られた）セットのスコープを使用することです。あなたの言語はあなたが選んだテーマで見栄えが良く、他のテーマでは十分見栄えが良いでしょう。

例として、デフォルトの暗いVSCodeテーマで定義されているcommentスコープを次に示します。

"name": "Dark Visual Studio",
"settings": [
    {
        "scope": "comment",
        "settings": {
            "foreground": "#608b4e"
        }
    },

c ++文法の同等の言語スニペットを次に示します。

"comments": {
    "patterns": [
        {
            "captures": {
                "0": {
                    "name": "punctuation.definition.comment.Java"
                }
            },
            "match": "/\\*\\*/",
            "name": "comment.block.empty.Java"
        },

基本的に、言語は必要に応じてcommentの下に複数のトークンを定義します。テーマではcomment.*は緑色になり、すべて同じ色になります。

17
Laur

構文の強調表示ルールは、.plistファイル（または.tmLanguageファイル）に保存されます。これらのファイルでは、構文の強調表示のために異なるトークンタイプが宣言されています。

  • キーワードとは何ですか？
  • 文字列リテラルとは何ですか？
  • コメントとは何ですか？
  • 等.

詳細については、こちらをご覧ください： https://code.visualstudio.com/Docs/customization/colorizer

.plistファイルには色を定義しません！

トークンの種類と色の関係は、色のテーマ宣言で行われます。

詳細はこちら https://code.visualstudio.com/Docs/customization/themes およびこちら Visual Studio Codeにテーマを追加する方法

一般的に、このドキュメントはVSCodeを拡張するときにも役立ちます。 https://code.visualstudio.com/docs/extensionAPI/overview

5
Wosi

公式ドキュメント からテーマにパッチを適用する必要はありません。

エディターの構文強調色を調整するには、ユーザー設定settings.jsonファイルでeditor.tokenColorCustomizationsを使用します

単純なトークンのカスタマイズに加えて、TextMateルールをやや複雑な設定で完全にオーバーライドできます。次に例を示します。

"editor.tokenColorCustomizations": {"textMateRules": [{
        "scope": "keyword.control.ref.latex",
        "settings": {
            "foreground": "#FF0000"
        }
    }]}
0
memeplex