Svelte for VS Code を入れて Svelte ファイルにハイライトや補完機能をつけるメモ

Svelte for VS Code を入れて Svelte ファイルにハイライトや補完機能をつけるメモです。

Svelte ファイルがプレーンなまま

開発してて気づいたんですが、なにも入れずに使ってると Svelte ファイルにハイライトや補完機能をついてないんですよね。当たり前と言えば当たり前なのですが。

image

これを開発しやすいように、なんとかしたいんです。

2022/04 時点の情報で進めます。

Svelte for VS Code の拡張機能を入れます

image

ちゃんと、FAQ • Svelte に言及がありました。公式ありがたい。

Svelte for VS Code – Visual Studio Marketplace

という、Svelte の拡張機能がありました。

image

探してインストールします。

インストールしたらすぐハイライトして使えた

image

インストール出来たら、すぐに色がつきました。わーい!

image

ちゃんと、変数も追ってくれて補完をしてくれてて素晴らしい。(これは上部の script タグで name という変数を設定している。)

これで、より開発しやすくなりますね!

余談

こちらにある、

image

この設定は、いまでもフォーマットが効いてる気がするので、必要になったら入れてみます。(どこで効くのか良く分かっていない)