9
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Grimoire.jsAdvent Calendar 2016

Day 11

VSCode用のGrimoire.js language extensionを作ったよ

Last updated at Posted at 2016-12-17

Grimoire.js Helper for VSCode を公開した話

この記事は、Grimoire.js Advent Calendar 2016の11日目の記事…だっははず(大遅刻)です。

TL;DR

Grimoire.js用のVSCode拡張機能を作った!皆使え!

拡張機能の作り方

土台(Scaffold)の作成

基本的に公式の方法 で無事完了できます。

今回はlanguageとsnnipetsのみ作りたかったので、
スクリプト機能は無し。

yomanをインストールして起動

npm install -g yo generator-code
yo

yo01.jpg

Codeを選ぶ

yo02.jpg

何作る?って聞いてくるので、
今回は New language supportNew Code Snippets の機能をもったものを作りたいです。

合わせ技の拡張機能は手動で作るしかないので、適当なディレクトリに languageSnippets をそれぞれ作り、
参考にしつつ新しい場所にミックスします。(手動めんどいです!)

拡張機能の作り方は
VSCodeのインストールディレクトリの resources/app/extensions/ に沢山サンプルがあるので参考にするといいかもしれないです。
ちゃんとしたドキュメントが無いとヤダヤダって人は 公式のドキュメントリポジトリ を見ましょう。

言語の定義

package.json にlanguage拡張機能が入っていることを定義します。
今回はスニペットも使うので併記します。

package.json
{
    "categories": [
        "Languages",
        "Snippets"
    ],
}

機能の詳細は contributes オブジェクトに記述します。

package.json
{
    "contributes": {
        "languages": [
            {
                "id": "goml",
                "aliases": [
                    "GOML",
                    "goml"
                ],
                "extensions": [
                    ".goml"
                ],
                "firstLine": "(\\<\\goml.*)",
                "configuration": "./language-configuration.json"
            },
            {
                "id": "glsl",
                "extensions": [
                    ".sort"
                ]
            }
        ],
        ...
    }
}

GOMLについて、名前・idなどを定義し、
言語の規則はlanguage-configuration.json を参照するよう書いています。

また、 glslについて 、idextensions のみ定義していますが、
こうすることで、他の拡張機能のlanguage設定をidで引っ張ってくることができます。
他の優秀な拡張機能が文法をしっかり押さえている場合には便利です。

文法の記述

文法の記述は、以下のように書きます。
ここでは text.xml.goml というスコープ名を定義し、
その内容は ./syntaxes/goml.json に書いてある旨を設定しています。

package.json
{ 
   "contributes": {
        ...
        "grammars": [
            {
                "language": "goml",
                "scopeName": "text.xml.goml",
                "path": "./syntaxes/goml.json"
            }
        ],
        ...
    }
}

今回、 ./syntaxes/goml.json は、
VSCode内蔵の xml の定義を参考に作成しました(コピペ長すぎるので割愛します)

スニペットの記述

スニペットの定義もgrammarと同様にファイルを指定するだけのシンプルなものです。

package.json
{
    "contributes": {
        ...
        "snippets": [
            {
                "language": "goml",
                "path": "./snippets/snippets.json"
            }
        ]
    }
}

実際のスニペットの記述方法は以下のようにシンプルです。

項目 説明
prefix ここで指定した文字を打ち込むことで候補として表示される
body 登録されたスニペットの内容。$1の記述はプレースホルダで、tabキーを使って移動する
description スニペットの説明
./snippets/snippets.json
{
    "GOML": {
        "prefix": "goml",
        "body": [
            "<goml width=\"fit\" height=\"fit\">",
            "    $1",
            "</goml>"
        ],
        "description": "goml tag"
    },
    ...
    "mesh with component": {
        "prefix": "mesh-component",
        "body": [
            "<mesh color=\"$1\" position=\"$2,$3,$4\" geometry=\"$5\"/>",
            "  <mesh.components>",
            "    $6",
            "  </mesh.components>",
            "</mesh>$7"
        ],
        "description": "GOML Snippet: Mesh with component"
    }
}

動かしてみる

ローカルで動かしたい場合は、F5 キーを押すことで、
現在の拡張機能を有効にした状態で新しいVSCodeが立ち上がるので、
それで動作を確認します。

snippet.gif

公開の方法

Visual Studio Teaqm Services にログインできるアカウントが必要です。

基本的には公式の方法そのままで大丈夫。
https://code.visualstudio.com/docs/tools/vscecli

使いたい!

Ctrl + Shift + X で拡張機能を検索し、
Grimoire.js Helper を選ぶことでインストールできます。

vsc.JPG

ご参考までに、ソースはGitHubに公開しています。
GitGubリポジトリ

最後に

意外と簡単に公開できるので、みんなマイナー言語のVSCode拡張を作ればいいと思う。

これでWeb3Dコンテンツ作成が捗ればいいな。

VSCodeのLanguage extensionで、
さらに進化した話題にLauguage Server という仕様があるけど、とても大変そうな予感しかしない…
http://qiita.com/atsushieno/items/ce31df9bd88e98eec5c4

9
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?