Tbpgr Blog

Employee Experience Engineer tbpgr(てぃーびー) のブログ

Sublime TextのSnippetをDashの自作ツール向けのSnippet設定ファイルに変換する

f:id:tbpg:20151207233201j:plain

あらすじ

DashのSnippetをCLIで管理するツールを作りました。

tbpgr.hatenablog.com

tbpgr.hatenablog.com

tbpgr.hatenablog.com

次のステップとして、既存のSnippetをDash向けに移行しようと思います。
今回は一例としてSublime TextのSnippetをDashのSnippetに変換します。

前提

  • ツールは自分のチーム内のユースケースを最低限満たす水準を目標とする
    • コストをかけすぎない
  • 私達のチームはRubyの開発をしているためRubyツールを作る
  • 今回のSnippetはプレースホルダーやカーソル位置の設定などはしていないシンプルなものなので
    その辺も対応したい場合は追加の処理が必要です。

要件

セットアップ

ダウンロード

$ git clone https://github.com/tbpgr/sublime_to_dash_snippet_converter.git
  • 以下のようなフォルダ構成になってます

sublimeが変換元
dashが変換先です

$ cd %git%/sublime_to_dash_snippet_converter
$ tree
.
├── Gemfile
├── LICENSE.txt
├── README.md
├── Rakefile
├── dash
└── sublime
    ├── fa-500px.sublime-snippet
    └── ... snippet files
  • gemをインストールします
$ bundle install
  • rakeタスクを確認します
$ rake -T
rake dash:sublime_convert  # convert sublime snippets to dash snippets

デモ

Sublime Snippet

テストケースとして以下の1ファイルだけ変換してみます。

<snippet>
  <content><![CDATA[
<i class="fa fa-500px" style="font-size:1em;"></i>
]]></content>
  <tabTrigger>fa-500px</tabTrigger>
  <scope>text.html.markdown</scope>
  <description>fontawesome fa fa-500px</description>
</snippet>

.env Setting(Sample)

環境変数の管理用に %git%/dash_snippets_builder の直下に .env を作成し、変数を設定します。

$ touch .env

LOG_LEVEL にログレベルを設定します。

LOG_LEVEL=DEBUG

Convert

$ rake dash:sublime_convert
2015/12/16 22:39:57 - DEBUG - start convert snippets
2015/12/16 22:39:57 - DEBUG -    complete output ./dash/fa-500px.toml
2015/12/16 22:39:57 - DEBUG - finish convert snippets

生成結果

$ cat dash/fa-500px.toml
[snippet]
body = "<i class=\"fa fa-500px\" style=\"font-size:1em;\"></i>"
syntax = "None"
tag = "FontAwesome"
title = "fa-500px;;"

tbpgr/sublime_to_dash_snippet_converter - GitHub

変換プログラムをGitHubに公開しておきました。

github.com

まとめ

変換ツールは変換前のフォーマットに依存するので、使い回しがきかないことが多いと思いますが
実装サンプルとしてGitHubに公開しておきました。

外部資料