NeovimでのSvelte/SvelteKitの開発環境
はじめに
正直なところ、Svelte 公式のエディタは VSCode であり、プラグインも VSCode 向けが優先されているのですが、Neovim でも Svelte/SvelteKit の開発をすることは可能です。
また何よりも Neovim の Keybind が好きなので、Neovim で開発したいというのが本音です。
この記事では、Neovim で Svelte/SvelteKit の開発をするためのオレオレ設定を紹介します。
この記事で紹介するプラグインは Svelte/SvelteKit の開発に限らず、さまざまな開発に役立つものばかりです。
是非とも参考にしてみてください。
LSP を入れよう！
Svelte/SvelteKit の開発をするためには、LSP を入れる必要があります。
これによって、コード補完や定義ジャンプなどの機能を使うことができます。
手っ取り早くこれらを導入するには、Nvim-lspconfig/mason.nvim/mason-lspconfig.nvim を使うのが良いでしょう。
Svelte での開発に必要な(および個人的に推奨したい)LSP は主に以下の通りです。
これらに加えて、ご自分のお好きな補完プラグインを入れるとよいでしょう（例: nvim-cmp)
SvelteKit における tsconfig.json の設定
SvelteKit ではZero-effort type safetyなる仕組みがあります。
VSCode ではこの仕組みが自動的に有効になるのですが、Neovim では有効になりません。
これを有効にするためには、tsconfig.jsonにtypescript-svelte-pluginをプラグインとして追加する必要があります。
以下にtsconfig.jsonの例を示します。
{
"extends": "./.svelte-kit/tsconfig.json",
"compilerOptions": {
"allowJs": true,
"checkJs": true,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"resolveJsonModule": true,
"skipLibCheck": true,
"sourceMap": true,
"strict": true,
"plugins": [
{
"name": "typescript-svelte-plugin"
}
]
}
}
Other.nvim を使おう！
ここからは特に最近便利に使っているプラグインを 2 つ紹介します。
まずは、other.nvim
このプラグインは、現在開いているファイルと関連のあるファイルを自動的に探してくれて、選ぶことができます。
SvelteKit では、src/routes以下がこのようなファイル構成になっています。
src
├── app.d.ts
├── app.html
└── routes
├── +layout.svelte
├── +page.server.ts
├── +page.svelte
└── +page.ts
Other.nvim を使うと、例えば+page.svelteを開いている状態で:Otherを実行すると、+page.server.tsや+page.tsを探してきて、リストアップしてくれます。
いちいち File Explorer を開いてファイルを探す必要がなくなるので、かなり便利です。
以下に自分の使っている SvelteKit 用の設定を示します。
oil.nvim + vim-sonictemplate を使おう！
次に紹介するのは最近の推しプラグイン、oil.nvimです。
Oil.nvim は File Explorer なのですが、ファイルシステムをあたかも Neovim の Buffer のように扱うことができます。
つまりファイルの作成もファイル名の編集も、コピーも削除もいつも通りの Neovim のコマンドで行うことができます。
編集の様子は以下のスクリーンキャプチャをみていただけるとわかりやすいと思います。
ということは、Template ライブラリを使えば一気にファイルを作成できるということですね...!?
vim-sonictemplate は、Template を定義し、それを Buffer 上に簡単に展開できるプラグインです。
これを使うことで、例えば SvelteKit のroutes以下のファイルを一気に作成することができます。
参考までに自分の設定ファイルを以下に置いておきます。
ちなみにこのテクニックは SvelteKit 以外の場所でも有用です。ある規則に基づいて複数のファイルを作成することはよくあることでしょう。(例えばindex.tsとindex.test.ts等)。
また、このスクリーンキャプチャには出ていませんが、Copilot.vim による補完を利用して、いい感じのファイル名を生成してもらうことすらできます。
可能性は無限大でしょう。
まとめ
Neovim で SvelteKit を開発するための環境を紹介しました。
最後の 2 つのプラグインは SvelteKit に限らず、どんな開発でも有用なのでぜひ使ってみてください。
Discussion
こちらにも追記してます