atomパッケージ riot を Riot 2.3 に対応しました

投稿日:2015年11月16日
カテゴリ: Riot , Webサイト制作 , プログラミング


※この記事は、IT技術レベル中級以上向けの内容です。※

フミリアです。

Riot 2.3がリリースされたので、Atomエディタ上でRiotファイルの編集がしやすいようにAtomパッケージ riot を更新しました。 バージョンは0.4.1です。

atom-logo.jpg

riotパッケージでできること

このパッケージでは次のことができます。

  1. グラマータイプ HTML (Riot) の追加
  2. Riotコマンドを使ったコンパイル (.tag.js)
  3. ファイル保存時の自動コンパイル

1. グラマータイプ HTML (Riot) の追加

Atomエディタに、新しい文法 HTML (Riot) を追加します。 4つの拡張子(.tag, .html, .riot.tag, .riot.html)に関連付けています。

エディタ画面.png

現在認識しているグラマーは、ステータスバーで確認・変更できます。 .htmlファイルの場合は、HTMLなどの既存のグラマーが割り当たっているので、手動で変更してください。

ステータスバー.png

2. Riotコマンドを使ったコンパイル

riotコマンドを使って.jsファイルを生成します。
.jsファイルはソースファイルと同じディレクトリに出力されます。

メニュー [Packages]-[Riot]-[Compile] から実行できます。

riotコマンドのパスは、設定画面で指定できます。 指定したパスが存在しない場合、Atomパッケージ内のriotコマンドを使います。 この場合、<script type="xxx"></script>のtype指定は認識されません。

※ この機能はグラマー HTML (Riot)を選択している場合にのみ有効です。

3. ファイル保存時の自動コンパイル

ファイル保存時に、自動でコンパイルさせることもできます。

※グラマー HTML (Riot)を選択している場合にのみ有効です。

この機能をオフにしたい場合は、設定画面のチェックを外してください。

設定画面

コラム: Babel 6

ES6 / ES7のソースをES5にトランスパイルする「Babel」の新しいバージョン 6が2015年10月の終わりにリリースされ始めました。(2015年11月16日時点で、6.2.21です。伸びが早い!)

しかし、現在のところBabel 5の外部インターフェースとの互換性がないため、Babel 6を使ってriotコマンドを実行すると、<script type="es6"></script>を使用している既存のソースではコンパイルに失敗します。

また、Riot 2.3.1 で <script type="babel"></script>という表記がサポートされていますが、Babel 5.xでは動作しません。Riotコミッターの@aMarCruzは、「新しい babel−core 6 は(対応が?)遅い。当面は babel-core 5.8 と type="es6" を使っておくことをオススメする」と言っています。


投稿日:2015年11月16日
カテゴリ: Riot , Webサイト制作 , プログラミング