Visual Studio CodeでPlane Text(.txt)で自分独自記法のハイライト表示

2018年10月19日

Sublime Text – Plain Text(.txt)で自分独自記法のハイライト表示 – Qiita

と同じく、僕もメモ帳ベースで自分独自記法のTodoリストを使ってます。

サクラエディタだとこんな感じ。

f:id:teraco:20161015121318p:plain

VSCodeでの独自シンタックスハイライト方法を調べてみました。

マニュアルなど

Visual Studio Code Colorizers

に載っています。簡単にまとめると

  1. tmLanguageファイルの用意
  2. VSCode用にコンバート
  3. VSCodeにインポート

となります。では1.から行きます。

1. tmLanguageファイルの用意

多分これが一番めんどくさいのですが、自分独自記法のtmLanguageファイルを用意します。サクラエディタだと簡単に書けるのに…。

syntax highlighting – How to create a simple custom language colorization to VS Code – Stack Overflow

tmLanguageの作り方の詳細は別でまとめるとして、今回は

Revision – Stack Overflow

に投稿されているソースを元にコンバートします。

※ メモ：tmLanguageファイルの書式

TextMate Manual » Language Grammars

2. VSCode用にコンバート

用意したtmLanguageファイルを使用してコンバートをします。手法は最初のVisual Studio Code Colorizersに載っています。作業の前に"Yeoman and the VS Code Extension generator"というものをインストールしなければいけないです。

The Yo Code Visual Studio Code Extension Generator

さらに、"Yeoman and the VS Code Extension generator"をインストールするために、npmというNode.jsのパッケージ管理システムをインストールしなければいけないようです。

How to Install Node.js® and NPM on Windows – Treehouse Blog

これらの準備が整った後、

yo code

でコンバートを開始します。参考までに画面ショットを載せておきます。

f:id:teraco:20161015121326p:plain

ここでの設定なのですが、tmLanguageファイル中のfileTypesに準拠しないと、コンバートは成功するもののVSCode起動時に正常にパッケージを読み込んでくれずシンタックスハイライトが効かない状態となります。

        <key>fileTypes</key>
<array>
<string>log</string>
</array>

おそらく、生成されるpackage.jsonとsyntaxes配下のファイル紐づけの問題かと思いますが、詳しいことは分かりませんでした。

3. VSCodeにインポート

実行したフォルダ直下に以下のような言語パッケージが生成されるので、

f:id:teraco:20161015121328p:plain

それを

%USERPROFILE%\.vscode\extensions

に配置してVSCodeを再起動します。

結果

f:id:teraco:20161015121539p:plain

ひとまず、シンタックスハイライトが効いていることを確認できました。この状態になれば

%USERPROFILE%\.vscode\extensions

配下のtmLanguageファイルを直接いじって色を変える・ワードを追加するのもOKかと思います。おかしくなったら言語パックをアンインストールして本手順を1から実施します。

Posted by tera