Shopifyテーマのtheme.scss.liquidをVSCodeでシンタックスハイライトさせる

最近、仕事でShopifyはじめました。そこそこテーマに手を入れたりもしているので、備忘録兼ねて色々書き残していこうと思います。

theme.scss.liquidをシンタックスハイライトさせたい

テーマの編集はVSCodeで、拡張機能Liquid Languages Supportを入れて対応しています。Liquid Language Support拡張を入れておけば、liquidの構文とHTMLをシンタックスハイライトしてくれるようになります。

しかし、liquidファイルの中にはtheme.scss.liquidやtheme.js.liquidといった、実体はSCSSだったりJavaScriptだったりするファイルもあり、これらのファイルはこの拡張ではうまくハイライトされません。

theme.scss.liquidはSCSSのシンタックスハイライトが効かない

liquid構文のハイライトを捨ててでもSCSSのハイライトが効く方が幸せなので、*.scss.liquidをSCSSとして認識するようVS Codeを設定していきます。

設定

VS Codeの設定画面で'file association'と検索する

Macなら”⌘ + ,“で、Windowsなら”ファイル→基本→設定”で設定を開き、”file association”で検索します。
検索結果に「Files: Associations」という設定があり、その中に”settings.json で編集”というリンクがあるのでクリックします。
なお、ユーザーの設定かワークスペースごとの設定かを選べますが、メンバーと共有できるという意味で僕はワークスペースに設定をすることが多いです。

settings.jsonが(存在しない場合は新規作成された後に)開かれるので、以下を追記します。

  "files.associations": {
    "*.scss.liquid": "scss"
  }
シンタックスハイライトが効いた

これでSCSSとしてシンタックスハイライトされるようになりました。

終わりに

僕がベースにしているテーマでは関係ないですが、*.js.liquidなども同様にfiles.associationsでjsだと指定してやれば、ハイライトされるようになります。

  "files.associations": {
    "*.scss.liquid": "scss",
    "*.js.liquid": "js"
  }

また、Shopify関係なく、任意の拡張子で同じことが可能です。

参考

In Visual Studio Code we have support for all common languages including smart code completion and debugging.