VS CodeでTIE構文をシンタックスハイライトする方法と拡張機能自作手順

社内独自言語TIEのコードをVS Codeで開いたとき、キーワードもコメントもすべて同じ色だと、レビューもデバッグもつらくなります。本記事では「VS CodeでTIE構文をシンタックスハイライトできるのか？」という疑問に答えつつ、既存拡張の探し方から、ゼロから拡張機能を自作する具体的な手順までを、実務目線で詳しく解説します。

VS CodeでTIE構文をハイライトできるのか？結論

最初に結論を整理しておきます。

VS Codeはほぼどんな言語でもシンタックスハイライト可能です。
TIEが社内独自言語であっても、拡張機能があればそのまま使える、なければ自作して対応できます。
ハイライトだけなら、TextMate形式の文法ファイルを用意するだけでOKで、難しいコンパイラ知識は不要です。

実現パターンは大きく次の3つです。

パターン	概要	難易度	向いているケース
既存拡張を利用	TIE対応拡張（または流用可能な拡張）をインストールして使う	低	まず試したい・時間をかけたくない場合
自作ハイライト拡張	TextMate文法＋VS Code拡張で色分けだけ実装	中	最低限、見やすい色分けが欲しい場合
言語サーバーまで実装	LSP対応で補完やLint、定義ジャンプなども実装	高	TIEを長期的に本気で育てたい場合

この記事では、このうち「既存拡張の探し方」と「自作ハイライト拡張の作り方」にフォーカスします。

既存のTIE用拡張機能を探す手順

まずは「自作しなくて済むか」を確認します。VS Codeの拡張機能（Extensions）は、ショートカット1つで検索・インストールできます。

VS Codeマーケットプレイスで検索する

VS Codeを起動する。
Ctrl + Shift + X（macOSなら Cmd + Shift + X）を押して、左側の「拡張機能」ビューを開く。
上部の検索欄に、次のようなキーワードを順番に試す。
- TIE
- 社内で使っている正式名称（例：Transaction Integration Engine など）
- ファイル拡張子名（例：.tie）
一覧にTIE関連と思われる拡張が表示されたら、詳細を確認する。
使えそうであれば、「インストール」ボタンを押すだけで利用開始可能です。

VS Code拡張はMicrosoft 365の契約の有無とは無関係に、ほとんどが無償でインストールできます。個人のローカル環境に入れるだけなら、管理者権限も不要なケースが多いです。

検索キーワード例	ねらい	補足
`TIE`	そのものズバリの拡張を探す	同名の別ツール・別言語がヒットすることもあるので説明文を要確認
正式名称	略称で見つからないときの保険	社内だけの名称なら、公開拡張はまず存在しない可能性が高い
ファイル拡張子（例：`.tie`）	対応言語を拡張子で判断している拡張を探す	説明文やスクリーンショットで対象言語を確認する

社内向けに配布されている拡張を探す

TIEのような社内独自言語の場合、OB/OGや有志が社内専用のVS Code拡張を既に作っていることもよくあります。公開マーケットプレイスに無くても、次のような場所をチェックしてみてください。

探す場所	具体例	チェックポイント
社内Gitリポジトリ	Azure DevOps / GitHub Enterprise / GitLab など	`tie`, `vscode`, `syntax` といったキーワードで検索
社内Wiki・ナレッジ	Confluence、Notion、Backlogなど	「開発環境」「推奨ツール」「VS Code」というページを確認
共有フォルダ	ファイルサーバー、SharePointなど	`.vsix` ファイルが置かれていないか検索
チームチャット	Teams / Slack / LINE WORKSなど	過去ログで「VS Code TIE」などを検索

もし .vsix 形式のファイルが見つかった場合は、VS Codeのコマンドパレット（Ctrl + Shift + P）から「Extensions: Install from VSIX…」を実行し、そのファイルを選択するだけでインストールできます。

拡張機能が存在しない場合の基本戦略

どこを探してもTIE用拡張が見つからない場合は、自作を検討します。ただし、いきなり「補完・Lint・デバッグ全部入り」を目指すと、かなり大がかりになります。

現実的には、次のような段階的アプローチがおすすめです。

フェーズ	実装内容	必要なスキル	開発コスト
フェーズ1	キーワード・コメント・文字列リテラルなどの色分けだけ実装	正規表現（Regex）の基礎＋JSON編集	小（数時間〜数日）
フェーズ2	スニペットや簡易補完、コードフォーマットの一部を追加	JavaScript/TypeScriptの基礎	中
フェーズ3	言語サーバーを実装し、構文解析・Lint・定義ジャンプなどを実装	パーサー・AST・LSPの知識	大

この記事では、まずフェーズ1（シンタックスハイライト）を確実に完成させることをゴールにします。

VS Codeのシンタックスハイライトの仕組みをざっくり理解する

VS Codeの色分けは、主にTextMate形式の文法ファイルを使って行われます。拡張機能で「この言語のコードには、この文法ファイルを適用してね」と登録しておくイメージです。

構成要素	役割	主なファイル
TextMate文法	トークン（キーワード・文字列・コメントなど）を正規表現で定義する	`*.tmLanguage.json` など
言語定義	言語ID・対象拡張子・コメント記号などを定義する	`package.json`, `language-configuration.json`
テーマ	TextMateスコープに色を割り当てる	ユーザーやテーマ拡張で設定

TextMate文法側で「これは keyword.control.tie というスコープ」とラベル付けし、テーマ側で「keyword.control は青色」と決めることで、結果として色分けされる仕組みです。

自作に必要な事前準備

TIE用ハイライト拡張を自作するには、Node.jsとVS Code拡張開発用のツールを用意します。

準備項目	内容	備考
Node.js	VS Code拡張開発ツールを動かすために必要	公式サイトからLTS版をインストール
Yeoman + VS Code Extension Generator	拡張のひな型（テンプレート）を生成するツール	`yo code` コマンドが使えるようになる
vsce	拡張を `.vsix` ファイルにパッケージングするツール	社内配布用に便利

Node.jsがインストール済みであれば、以下のコマンドで必要ツールをまとめてグローバルインストールできます。

npm install -g yo generator-code vsce

これで拡張のひな型生成・デバッグ・パッケージングに必要な最低限の環境が整います。

TextMate文法を作るためにTIEの構文を整理する

いきなりJSONを書き始めるのではなく、まずはTIEのコードを実際にいくつか眺めて、どんな要素があるのかを洗い出します。

コメントの書き方（行コメント / ブロックコメント）
キーワード（制御構文、宣言、演算子など）
識別子（変数名・関数名・モジュール名など）
文字列リテラル（シングルクォート / ダブルクォート / 特殊な区切り）
数値リテラル（整数 / 浮動小数 / 16進数など）
特殊構文（タグ、ディレクティブ、プリプロセッサなど）

仮に、TIEのコードが次のような感じだとします。

# コメント
PROC main()
  LET x = 10
  IF x &gt; 0 THEN
    PRINT "Hello TIE"
  ENDIF
ENDPROC

この例では、少なくとも次のようなトークンを色分けしたくなります。

構文要素	例	TextMateスコープ候補
キーワード（制御構文）	`PROC`, `ENDPROC`, `IF`, `THEN`, `ENDIF`	`keyword.control.tie`
キーワード（宣言）	`LET`	`keyword.declaration.tie`
コメント	`# コメント`	`comment.line.number-sign.tie`
文字列リテラル	`"Hello TIE"`	`string.quoted.double.tie`
識別子	`main`, `x`	`variable.other.tie` など
数値リテラル	`10`	`constant.numeric.tie`

この整理をもとに、TextMate文法ファイルを設計していきます。

yo codeでVS Code拡張のひな型を生成する

構文要素の整理ができたら、拡張のひな型を自動生成します。

新しい作業用ディレクトリを作成し、ターミナルでそのフォルダに移動する。
次のコマンドを実行する。 yo code
プロンプトが表示されたら、テンプレートとして「New Language Support」を選択する。
言語名には「TIE」、言語IDには「tie」などを入力する。
対象拡張子には「.tie」など、実際に使っているファイル拡張子を指定する。

対話形式で質問に答えていくと、TIE用言語拡張のひな型プロジェクトが自動生成されます。

設定項目	入力例	ポイント
Language name	TIE	人間向けの表示名。VS Codeのステータスバーなどに表示される
Language id	tie	内部識別子。スクリプトや設定で参照されるので、途中で変えないほうがよい
File extensions	.tie	複数あればカンマ区切りで指定可能
Scope name	source.tie	TextMateスコープのルート。既存言語と被らないようにする

生成された拡張プロジェクトの構造を把握する

ひな型が生成されると、フォルダ内はおおむね次のような構成になっています。

tie-syntax/
  package.json
  syntaxes/
    tie.tmLanguage.json
  language-configuration.json
  README.md
  CHANGELOG.md
  vsc-extension-quickstart.md

ファイル/フォルダ	役割
`package.json`	拡張のメタ情報。言語IDやTextMate文法ファイルの登録もここで行う
`syntaxes/`	TextMate文法ファイルを置くフォルダ
`tie.tmLanguage.json`	TIEの構文ルールを定義する文法ファイル（これを編集してハイライトを実現）
`language-configuration.json`	コメント記号や括弧のペアなど、エディタの振る舞いに関する設定
`README.md`, `CHANGELOG.md`	拡張の説明や変更履歴を記述するドキュメント

シンタックスハイライトの中心になるのは syntaxes/tie.tmLanguage.json と package.json の contributes セクションです。

TextMate文法ファイルの基本構造

TextMate文法はJSON（またはPLIST）形式で定義します。最小構成のサンプルは次のようになります。

{
  "scopeName": "source.tie",
  "patterns": [
    { "include": "#comments" },
    { "include": "#strings" },
    { "include": "#keywords" }
  ],
  "repository": {
    "comments": {
      "patterns": [
        {
          "name": "comment.line.number-sign.tie",
          "match": "#.*$"
        }
      ]
    },
    "strings": {
      "patterns": [
        {
          "name": "string.quoted.double.tie",
          "begin": "\"",
          "end": "\""
        }
      ]
    },
    "keywords": {
      "patterns": [
        {
          "name": "keyword.control.tie",
          "match": "\\b(PROC|ENDPROC|IF|THEN|ENDIF)\\b"
        },
        {
          "name": "keyword.declaration.tie",
          "match": "\\bLET\\b"
        }
      ]
    }
  }
}

ポイントは次の通りです。

scopeName は、ひな型生成時に指定したルートスコープ（例：source.tie）。
patterns に、どのルールを順番に適用するかを記述します。
repository に実際のルールを分類してまとめておくと、後から保守しやすくなります。
match は単一行の正規表現、begin/end は複数行にもまたがる範囲を定義するのに使います。

よく使うスコープ名の例

スコープ名	意味	用途例
`keyword.control`	制御構文のキーワード	`IF`, `THEN`, `ENDIF` など
`keyword.declaration`	宣言系キーワード	`LET`, `PROC` など
`comment.line`	1行コメント	`# コメント`, `// コメント` など
`string.quoted.double`	ダブルクォート文字列	`"Hello"`
`constant.numeric`	数値リテラル	`10`, `3.14`, `0xFF` など
`variable.other`	一般的な変数	`x`, `counter` など

スコープ名はVS Codeのテーマ側で色が決まるので、既存言語でよく使われるスコープ名に寄せると、どのテーマでも自然な色になりやすいです。

package.jsonで言語と文法を関連付ける

TextMate文法を書いただけでは、まだVS Codeは「どの言語にその文法を適用すべきか」を知りません。package.json の contributes セクションに、言語定義と文法ファイルの関連付けを記述します。

典型的な設定例は次の通りです。

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

languages では、言語ID・拡張子・コメントなどの基本情報を定義します。
grammars では、どの言語IDにどのTextMate文法ファイルを適用するかを指定します。
path は拡張のルートからの相対パスです。

ここまで設定できれば、.tieファイルを開いたときにTIE用の文法が適用される状態になります。

Extension Development Hostで動作確認する

実際にハイライトされるかどうかは、VS Codeから拡張をデバッグ実行して確認します。

拡張プロジェクト（tie-syntax フォルダ）をVS Codeで開く。
左の「実行とデバッグ」ビューで、デフォルトの構成を選びF5キーを押す。
新しいVS Codeウィンドウ（Extension Development Host）が起動する。
そのウィンドウで、サンプルのTIEファイル（sample.tie など）を作成・開く。
キーワードやコメントに色が付いているか確認する。

ハイライト結果の確認を細かく行いたいときは、コマンドパレットから「Developer: Inspect Editor Tokens and Scopes」を実行すると、カーソル位置に付いているTextMateスコープを確認できます。「なぜここが色分けされないのか？」という問題の切り分けに非常に便利です。

シンタックスハイライトを改善していくコツ

最初から完璧な文法を書く必要はありません。むしろ、次のように段階的に改善していく方が、現場で使いやすい拡張に育ちます。

フェーズ1：最低限のハイライト
- コメント
- 文字列リテラル
- 主要キーワード（PROC, IF など）
フェーズ2：追加キーワード・数値リテラル対応
- 全キーワードを洗い出して正規表現に追加
- 数値リテラル（整数・浮動小数・16進など）を色分け
フェーズ3：関数名や特殊構文の色分け
- 関数宣言部の関数名を entity.name.function.tie などのスコープで色分け
- プリプロセッサやディレクティブがあれば別スコープにする

社内でよく使われるサンプルコードを集めて、「この構文はどのスコープになっているべきか」を決め、その状態を保つように文法を調整していくと、品質を安定させやすくなります。

.vsixにパッケージングして社内配布する

拡張がある程度完成したら、vsce を使ってパッケージングし、.vsix ファイルとして配布できるようにします。

拡張プロジェクトのルートで、バージョン番号（package.json の version）を適切に設定する。
ターミナルで次のコマンドを実行する。 vsce package
カレントディレクトリに tie-syntax-0.0.1.vsix のようなファイルが生成される。

生成された .vsix を社内ファイルサーバーやWikiに置き、「VS Code > コマンドパレット > Extensions: Install from VSIX…」からインストールしてもらえば、簡単に全社展開できます。

配布方法	メリット	デメリット
.vsixファイルを社内配布	インターネット不要。閉じた環境でも利用可能	アップデートのたびに再配布が必要
（必要に応じて）マーケットプレイス公開	VS Codeから直接インストール・更新が可能	社外公開になるため、社内情報を含められない

社内独自言語であれば、まずは.vsixの社内配布から始めるのが現実的です。

ハイライト以外の機能を追加したい場合の選択肢

シンタックスハイライトが整ってくると、次のような要望が出てきがちです。

キーワードやテンプレートをサクッと挿入したい
関数名の定義にジャンプしたい
保存時に自動整形したい
文法エラーをリアルタイムに検出したい

これらを実現するための代表的な方法を整理しておきます。

機能	実現方法	難易度	コメント
コードスニペット	`contributes.snippets` でスニペット定義を追加	低	構文テンプレート（`PROC ... ENDPROC` など）を登録するだけでも生産性アップ
簡易補完	拡張からCompletion Providerを実装	中	キーワードやよく使う識別子の補完が可能
Lint / 定義ジャンプ	Language Server Protocol（LSP）対応の言語サーバーを実装	高	本格的な開発体験を提供できるが、開発コストは高め

まずはシンタックスハイライト＋スニペットから始め、チームの利用状況を見ながら徐々に機能を育てていくのがおすすめです。

よくあるトラブルと対処法

TIE用ハイライト拡張を作っていると、次のような「あるあるトラブル」に遭遇しがちです。

症状	考えられる原因	対処法
.tieファイルを開いてもまったく色が変わらない	`package.json` の `extensions` が実際の拡張子と違う `contributes.grammars` の `language` が `languages.id` と一致していない拡張の再読み込みをしていない	言語IDと拡張子の設定を見直す VS Codeを再起動、またはウィンドウの再読み込みを実行
コメントの色が変わらない	正規表現が誤っている他のルールが先にマッチしてしまっている	`match` のパターンを簡単なものから試す `patterns` の順序を変更して、コメントを先に評価する
複数行にまたがる構文が途中で色切れする	`match` を使って単一行扱いにしてしまっている `begin`/`end` の組み合わせが間違っている	複数行構文は `begin`/`end` で定義するネストが必要な場合は `patterns` に子ルールを定義
テーマを変えると全然違う色になってしまう	独自スコープ名を使いすぎている	`keyword.control` や `string.quoted.double` など、既存テーマが対応しているスコープに寄せる

トラブルシュートの基本は、「どのスコープが付いているか」を確認することです。うまくいかないときは、前述の「Inspect Editor Tokens and Scopes」で、実際にVS Codeがどう認識しているかをチェックすると原因を絞り込みやすくなります。

現場で使えるTIEハイライトを作るための実践的アドバイス

完璧主義より「よく見る構文から」
- 最初から全構文をカバーしようとせず、現場でよく使う構文・ファイルから優先的にサポートする。
サンプルコードをテストケースとして保存
- バグ報告があったコード片を集め、samples/ フォルダなどに保存しておくと、文法変更時のリグレッションテストに使える。
命名規則を早めに決める
- スコープ名やファイル名、言語IDを途中で変えると混乱しやすいので、最初に方針を決めておく。
社内で小さく共有してフィードバックをもらう
- チーム内で使ってもらい、「ここの色分けが分かりにくい」「この構文がハイライトされていない」などの声を拾って改善する。

まとめ：VS CodeでTIE構文ハイライトを実現するロードマップ

最後に、TIEのような社内独自言語をVS Codeでシンタックスハイライトするまでの流れを振り返ります。

既存拡張を探す
- VS Codeの拡張機能ビューで「TIE」や正式名称・拡張子を検索。
- 社内Git・Wiki・共有フォルダ・チャットログも確認し、.vsix が配布されていないか調べる。
見つからなければ自作を決断
- まずはシンタックスハイライトだけをゴールにし、TextMate文法＋拡張ひな型で最小限の実装から始める。
TextMate文法で構文ルールを定義
- キーワード・コメント・文字列・数値など、よく使う構文要素にスコープを割り当てる。
- 既存言語の文法ファイルを参考にしつつ、TIEに合わせてカスタマイズする。
VS Code拡張として登録・デバッグ
- yo code でひな型を生成し、package.json の contributes で言語と文法を関連付ける。
- Extension Development Hostで実際のTIEコードを開き、色分けを確認しながら調整する。
.vsixで社内配布し、フィードバックを集める
- vsce package でパッケージングし、社内に展開。
- 利用者からのフィードバックをもとに、キーワード追加やバグ修正を行う。

TIEのような社内独自言語は、どうしてもIDEやツールの支援が弱くなりがちです。しかし、VS Codeの拡張機能とTextMate文法をうまく活用すれば、最低限のコストで「見やすく、レビューしやすい」開発環境を整えることができます。この記事の手順をベースに、まずはシンプルなハイライト拡張からスタートし、チームの開発スタイルに合わせて少しずつ育てていってみてください。

この記事を書いた人

佐藤健司

実務の現場で詰まりがちなポイントを地図にするITブログ「IT trip」を運営。Windows／Office（Teams・Excel）からSQL、サーバ運用、ガジェットまで、再現性のある手順と“なぜそうなるか”を丁寧に解説します。読んだらすぐ試せること、そして迷った人の次の一歩が見えることを大切にしています。