Kekeの日記

エンジニア、読書なんでも

トップ > vscode > Visual Studio CodeでCode Syntax Highlight Extentionを作る

Visual Studio CodeでCode Syntax Highlight Extentionを作る

vscode vscode-extention

f:id:bobchan1915:20190404211236p:plain

動機

現在新卒研修期間中です。

今日は休憩時間が多かったので、VSCodeのExtentionを作りたいと思って、簡単に作って、公開しました。一切、トークン化など知識がなかったので、無理かもと思っていましたが、正規表現さえ上達すれば簡単に作れました。

もともとの動機としては、Tigの設定ファイルである.tigrcのSyntax Highlightがなく、ファイルがプレーンテキストのように見にくい単調なファイルだったことです。

例えば、以下のようなものでした。これだと、文法間違い、タイポ、可読性など、とても開発する気にはなれません。

f:id:bobchan1915:20190404211403p:plain

これをきっかけに、よりTigの設定ファイルを書きやすくして、また世界に貢献したいと思って本Extentionを作り、その一連のプロセスを記事にしました。

目次

本記事の目次は以下の通りです。

開発開始

VSCodeはジェネレーターがあるので、簡単にExtentionの開発の着手に取り掛かれます。

それでは、やっていきましょう。

f:id:bobchan1915:20190404212311p:plain

1. 雛形を用意する

npmを使って、拡張機能のジェネレーターを使って雛形を最初に用意します。

以下のようにインストールしてください。

$ npm install -g yo generator-code

そして、インストールしたyoパッケージを実行します。

$ yo code

すると、いくつか質問されるので、答えます。

  • What type of extension do you want to create?: Language Support
  • What's the name of your extension?: Tig Syntax Highlight
  • What's the identifier of your extension?: keke-tig-syntax-highlight
  • What's the description of your extension?: Language Support for Tig

するとディレクトリが作成されるので、gitなど必要なことをしてください。

$ cd keke-tig-syntax-highlight
$ ...
$ git init
$ ...

ディレクトリ構成は以下のようになっているはずです。

.
├── CHANGELOG.md
├── README.md
├── language-configuration.json
├── package.json
├── syntaxes/
└── hoge-0.1.0.vsix

ここで主要なファイルの説明をします。

  • syntaxes/tig.tmLanguage.json: トークン化のための文法を定義するファイル
  • language-configuration.json: 括弧やコメントなどを定義するためのファイル

1.1 syntaxes/tig.tmLanguage.json: トークン化のための文法を定義するファイル

TextMate Grammerで記述していきます。本記事は文法に対する記事ではないので、割愛させていただきます。

1.2 language-configuration.json: 括弧やコメントなどを定義するためのファイル

これより、知っておく必要のあるフィールドを解説します。

1.2.1 .categories[]: Pluginのカテゴリ

どのようなカテゴリであるかを配列で指定します。

"categories": [
    "Programming Languages"
],

他にもSnippetsなども指定することができます。

1.2.2 .contributes: 機能の詳細

このPluginの機能の詳細を書きます。

大きく２つのフィールドがあって.languages, .grammarsです。

.grammarsでは、文法を定義するもので

"grammars": [{
    "language": "tig",
    "scopeName": "tig",
    "path": "./syntaxes/tig.tmLanguage.json"
}]

のように

  • grammars.language: なんの言語なのか
  • grammers.scopeName: スコープを定義
  • path: 詳細が書かれているjsonへのpathを指定

と書きます。

2. デバッグ

以下の手順でデバッグしていきます。

  • language-configuration.jsonに間違えがないことを確認する
  • F5を押して新しいウィンドウを開く
  • 新しいウィンドウで.tigrc拡張子のファイルを作る
  • ./syntaxes/tig.tmLanguage.jsonなどを変更してリロードする

この流れで、デバッグして開発していきます。

ウィンドウが開いて、Syntax Highlightしたい拡張子(今回は.tigrc)を作成して遊んでみます。

f:id:bobchan1915:20190404210619p:plain

まだ開発途中ですが、コメントやbindなどの関数はHighlightされているので、まずまずだなと思います。

公開する

Package.jsonを確認する

初期生成ファイルだと、git情報がないので例えば、Readme.mdに画像を使っている場合など、パスが分からず、手順通り進めても画像が表示されません。

"repository": {
    "type": "git",
    "url": "https://github.com/KeisukeYamashita/hogehoge.git"
},

リポジドリに置いてある画像を使う場合は、以下のようにフィールドを付け足して、リポジドリをPublicにする必要があります。

Publishする

まず、CLIツールを使っていくので以下のパッケージをインストールします。

npm install -g vsce

VSCode Marketplaceで公開することができます。

MicrosoftアカウントでAzure DevOpsにログインします。

そしてPrivate Access Tokenを取得します。

取得したら、以下のコマンドでパッケージのAuthorであるPublisherを作成します。

$ vsce create-publisher KeisukeYamashita

ここで、EmailとPrivate Access Tokenが聞かれるので、入力します。作成することができたら、次はPublishします。

最初にPublishするときは以下のコマンドを使います。

$ vsce publish

ここで、Readmeに、最初に生成される以下の文が入っていると、「Readmeを変更して」とエラーが出ます。

この1行以外を全て変えたとしてます、エラーになるのでご留意ください。

アップロードできると、Extentionの説明ページのURLが出力されるので確認することができます。

デプロイ後のアップデート

仮にアップデートをしたら、そのバージョン名または、minorやmajorなどと指定してアップデートします。例えば、

vsce publish minor

や

vsce publish 0.3.2

のようにします。

まとめ

f:id:bobchan1915:20190404215741p:plain

VSCodeは最も世界で使われているIDEなので、tigの設定ファイル程度のExtentionであっても、

（VSCodeユーザー数) × (Tigユーザー数) ≒ ( 本Extentionのユーザー数）

になる可能性があると、心が踊ります。ここで≒としたのは、競合Extentionの出現や、本Extentionがユーザーが使いたいシーンにはまらないなど機能不足、または機能過多な部分がある可能性があるからです。

これからSnippet機能を追加して、より使いやすい機能を搭載していくつもりです。

何より、このExtentionの1番ユーザーは自分であり、VSCodeを使い込んで、Tigも使い込んで、ユーザーの痛みを知り、よりよいExtentionを提供したいです。

そして、Goalである開発速度や体験のアップデートを成し遂げられれば、開発難易度に依らずやりがいのあることだと誇れるのではないでしょうか。

幸せは難易度とは限らず。

最後までありがとうございました。