tmLanguage.jsonででVS Code拡張機能の対象拡張子の色付け（シンタックスハイライト）を実装する – 【VS Code】

tmLanguage.jsonででVS Code拡張機能の対象拡張子の色付け（シンタックスハイライト）を実装する – 【VS Code】

tmLanguage.jsonをsyntaxesディレクトリ配下に配置してpackage.jsonに言語（拡張子）登録することで、VS Code拡張機能でのエディタ動作をカスタマイズすることが出来ます。

※syntaxesディレクトリ配下に配置するのは慣習のようです

前提

• TypeScriptで開発
• npm,node.js,yo,generator-codeなどインストール済み（npm install -g yo generator-code）
• yo codeで作成済み
• コチラでlanguage-configuration.jsonまで配置済み

package.json

package.jsonのcontributes.grammarsを追加します。

  "contributes": {
    "languages": [
      {
        "id": "myLanguage",
        "aliases": ["My Language"],
        "extensions": [".myext"],
        "configuration": "./language-configuration.json"
      }
    ],
    "grammars": [
      {
        "language": "myLanguage",
        "scopeName": "source.myLanguage",
        "path": "./syntaxes/myLanguage.tmLanguage.json"
      }
    ]
  }

language・・・languagesで定義した言語ID　※ここではidで指定したmyLanguage

scopeName・・・TextMateスコープ名でユニークな文字列　※文法ファイル（.tmLanguage.json）はこのスコープ名に基づいてハイライトのルールを持ちます

path・・・TextMate形式の文法定義ファイルへの相対パス

myLanguage.tmLanguage.json

myLanguage.tmLanguage.jsonを作成します。

{
  "$schema": "https://raw.githubusercontent.com/martinring/tmlanguage/master/tmlanguage.json",
  "name": "sample",
  "scopeName": "source.myLanguage",
  "patterns": [
    {
      "name": "comment.line.double-slash.myLanguage",
      "match": "//.*$"
    }
  ]
}

nameに指定しているcomment.line.double-slashは「//で始まるコメント」と言う意味のTextMateスコープになります。

TextMateスコープとは、コードの特定の意味や役割を示す階層的な名前のことです。VSCodeなどのエディタで構文ハイライトを行うとき、このスコープ名でコードの各要素を分類し、それに応じた色やフォントスタイルをテーマが適用します。

テスト

F5を押してデバッグし、新たに起動するVS Code上で.myextのファイルを作成します。

その上で// testと入力するとマッチしてハイライトされることが確認できます。

高橋

KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80～120万から受け付けております^^
得意技はJS(ES20xx),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^