Sublime Text 3でHayakuを使っているとSCSSのスニペットが使えない問題

3074 ワード
SublimeText3 SublimeText scss Sass CSS CSS テキストリンク

Sublime TextでSassコーディングするときはHayakuを使っています。楽すぎてもう手放せません。
でもたまに理想通りに展開してくれなかったり、よく使うmixinなどもスパパッと入力したかったりしたのでスニペットを登録することにしました。

️ スニペット動かない問題

ドキュメンテーションに沿ってスニペットを登録しても動作してくれません。ググるとスコープが間違ってるパターンが多いようでしたが今回は当てはまらないようです。
ちなみにスニペットを使いたいソース中で command+option+P するとスコープを確認できます。

ダメだった例

@at-root.sublime-snippet
<snippet>
  <content><![CDATA[
@at-root {
  $1
}
]]></content>
  <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
  <tabTrigger>ar</tabTrigger>
  <!-- Optional: Set a scope to limit where the snippet will trigger -->
  <scope>source.scss</scope>
</snippet>

解決策

stack overflowで同様の問題を見つけました。
それによるとHayakuとコンフリクトしているのではないかということでした。なので tabTrigger の最後にスラッシュ / を付け加えたところ動いてくれました！

成功した例

@at-root.sublime-snippet
<snippet>
  <content><![CDATA[
@at-root {
  $1
}
]]></content>
  <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
  <tabTrigger>ar/</tabTrigger>
  <!-- Optional: Set a scope to limit where the snippet will trigger -->
  <scope>source.scss</scope>
</snippet>

これで思う存分スニペットを登録できます。
SCSS-Snippetsも入れてましたが @for のスニペットなど使えてなかったのでこの方法で再登録しました。