ruby-signatureのVisual Studio Code向けシンタックスハイライトを作った

インストールはここから

marketplace.visualstudio.com

開発したい人はこちらから

github.com

リモート参加予定のRuby Hack Challengeの予習でつくりました。

rhc.connpass.com

なんか聞きたいことあったらruby-jpやTwitterで話しかけてください。

進め方

ここ参考にすすめていく

code.visualstudio.com

下準備

% mkdir foo
% cd foo
% npm install --save yo generator-code
% npx yo code
% npx yo code
? ==========================================================================
We're constantly looking for ways to make yo better! 
May we anonymously report usage statistics to improve the tool over time? 
More info: https://github.com/yeoman/insight & http://yeoman.io
========================================================================== No

     _-----_     ╭──────────────────────────╮
    |       |    │   Welcome to the Visual  │
    |--(o)--|    │   Studio Code Extension  │
   `---------´   │        generator!        │
    ( _´U`_ )    ╰──────────────────────────╯
    /___A___\   /
     |  ~  |     
   __'.___.'__   
 ´   `  |° ´ Y ` 

? What type of extension do you want to create? New Language Support
Enter the URL (http, https) or the file path of the tmLanguage grammar or press ENTER to start with a new grammar.
? URL or file to import, or none for new: 
? What's the name of your extension? ruby-signature
? What's the identifier of your extension? ruby-signature
? What's the description of your extension? 
Enter the id of the language. The id is an identifier and is single, lower-case name such as 'php', 'javascript'
? Language id: ruby-signature
Enter the name of the language. The name will be shown in the VS Code editor mode selector.
? Language name: rbs
Enter the file extensions of the language. Use commas to separate multiple entries (e.g. .ruby, .rb)
? File extensions: .rbs
Enter the root scope name of the grammar (e.g. source.ruby)
? Scope names: source.ruby-signature
   create ruby-signature/syntaxes/ruby-signature.tmLanguage.json
   create ruby-signature/.vscode/launch.json
   create ruby-signature/package.json
   create ruby-signature/README.md
   create ruby-signature/CHANGELOG.md
   create ruby-signature/vsc-extension-quickstart.md
   create ruby-signature/language-configuration.json
   create ruby-signature/.vscodeignore

Your extension ruby-signature has been created!

To start editing with Visual Studio Code, use the following commands:

     cd ruby-signature
     code .

Open vsc-extension-quickstart.md inside the new extension for further instructions
on how to modify, test and publish your extension.

For more information, also visit http://code.visualstudio.com and follow us @code.
% mv ruby-signature vscode-ruby-signature
% mkdir -p ~/src/github.com/hanachin
% mv vscode-ruby-signature ~/src/github.com/hanachin
% cd ~/src/github.com/hanachin/vscode-ruby-signature
% git init
% git add .
% git commit -m 'npx yo code'

あとは雑に定義、とりあえずキーワードだけ書いた(どういう分類にするか悩んでpockeさんのみたけど結局悩んだのでとりあえず一旦全部 keyword.control で置いてる。PR歓迎)。

インデントはこの辺はいるまではJSでがんばらないとだめっぽくて

github.com

ここ参考に registerOnTypeFormattingEditProvider してそこで頑張るアプローチで実装してみた。

code.visualstudio.com

公開

ここみてすすめる

code.visualstudio.com

まずAzure DevOpsのOrganizationをつくってPersonal Access TokenにMarketplaceの権限つけて発行、Marketplaceのpublisherをつくる。 package.jsonにpublisherの項目を足す。 そのままだとパッケージ作れないのでREADMEやpackage.jsonをいじる。 パッケージできたらインストールして試してみる。

よさそうならvsce publish

% npx vsce create-publisher hanachin
% npx vsce package
% code --install-extension  ruby-signature-0.0.1.vsix
% npx vsce publish

いいなと思ったらKyashでお金を下さい
20191128011151
GitHubスポンサーも受け付けています
https://github.com/sponsors/hanachin/