---
title: "NeovimでのSvelte/SvelteKitの開発環境"
date: '2023-05-22'
isPublished: true
lang: 'ja'
---

> [!NOTE]
> この記事は[Vim 駅伝](https://vim-jp.org/ekiden/)の 5/22 の記事です(1 日遅れました)。
> 前回の記事は[monaqa](https://zenn.dev/monaqa)さんによる、5/19 の[「Vim キーマップをカスタマイズするとき考えていること」](https://zenn.dev/vim_jp/articles/2023-05-19-vim-keybind-philosophy)という記事でした。
> 次回は 5/24 に投稿される予定です。

# はじめに

正直なところ、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 を使うのが良いでしょう。

https://github.com/neovim/nvim-lspconfig
https://github.com/williamboman/mason.nvim
https://github.com/williamboman/mason-lspconfig.nvim

Svelte での開発に必要な(および個人的に推奨したい)LSP は主に以下の通りです。

- [svelte-language-server](https://github.com/neovim/nvim-lspconfig/blob/master/doc/server_configurations.md#svelte)
- [typescript-language-server](https://github.com/neovim/nvim-lspconfig/blob/master/doc/server_configurations.md#tsserver)
- [@tailwindcss/language-server](https://github.com/neovim/nvim-lspconfig/blob/master/doc/server_configurations.md#tailwindcss)
- [emmet-ls](https://github.com/neovim/nvim-lspconfig/blob/master/doc/server_configurations.md#emmet_ls)

これらに加えて、ご自分のお好きな補完プラグインを入れるとよいでしょう（例: [nvim-cmp](https://github.com/hrsh7th/nvim-cmp))

# SvelteKit における tsconfig.json の設定

SvelteKit では[Zero-effort type safety](https://svelte.jp/blog/zero-config-type-safety)なる仕組みがあります。
VSCode ではこの仕組みが自動的に有効になるのですが、Neovim では有効になりません。

これを有効にするためには、`tsconfig.json`に[typescript-svelte-plugin](https://www.npmjs.com/package/typescript-svelte-plugin)をプラグインとして追加する必要があります。

以下に`tsconfig.json`の例を示します。

```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

https://github.com/rgroli/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 を開いてファイルを探す必要がなくなるので、かなり便利です。

![other screenshot1](./other.gif)

以下に自分の使っている SvelteKit 用の設定を示します。

https://github.com/ryoppippi/dotfiles/blob/9c96631c58728c6b34bc523798a48fc923f68856/nvim/lua/plugin/other.lua

# oil.nvim + vim-sonictemplate を使おう！

次に紹介するのは最近の推しプラグイン、`oil.nvim`です。
https://github.com/stevearc/oil.nvim

Oil.nvim は File Explorer なのですが、ファイルシステムをあたかも Neovim の Buffer のように扱うことができます。
つまりファイルの作成もファイル名の編集も、コピーも削除もいつも通りの Neovim のコマンドで行うことができます。
編集の様子は以下のスクリーンキャプチャをみていただけるとわかりやすいと思います。

![oil screenshot](./oil0.gif)

ということは、Template ライブラリを使えば一気にファイルを作成できるということですね...!?

https://github.com/mattn/vim-sonictemplate

vim-sonictemplate は、Template を定義し、それを Buffer 上に簡単に展開できるプラグインです。
これを使うことで、例えば SvelteKit の`routes`以下のファイルを一気に作成することができます。

![oil screenshot1](./oil1.gif)

参考までに自分の設定ファイルを以下に置いておきます。

https://github.com/ryoppippi/dotfiles/tree/5112af76553f0eaf30b3c967f1294a7dca355dac/nvim/template/oil

ちなみにこのテクニックは SvelteKit 以外の場所でも有用です。ある規則に基づいて複数のファイルを作成することはよくあることでしょう。(例えば`index.ts`と`index.test.ts`等)。
また、このスクリーンキャプチャには出ていませんが、Copilot.vim による補完を利用して、いい感じのファイル名を生成してもらうことすらできます。
可能性は無限大でしょう。

# まとめ

Neovim で SvelteKit を開発するための環境を紹介しました。
最後の 2 つのプラグインは SvelteKit に限らず、どんな開発でも有用なのでぜひ使ってみてください。