🧊

VimでもSvelteをTypeScriptで書きたい

TypeScript対応が入って久しいSvelteですが、いざその恩恵に預かって快適コーディングするためには、LSPのサポートが必須な今日このごろ。

ただ、界隈のLSPにシュッと対応したエディタといえばVSCodeの話ばっかりで、こちとらVimなんですが！！って感じだった。
今まで使ってたALEにもLSPの機能はあるみたいやったけど、手元の構成だとうまく動かせなくて詰んでた。

けど、改めて探してみたら、Vimでもいい感じにできるプラグインが普通にあったわ・・という話。

coc.nvim

GitHub - neoclide/coc.nvim: Nodejs extension host for vim & neovim, load extensions like VSCode and host language servers.

さすが「Conquer of Completion」っていうつよいネーミングなだけある。

これを、懇意にしているパッケージマネージャーでインストールする。

Plug 'neoclide/coc.nvim', {'branch': 'release'}

Node.jsに依存することにはなるけど、どうせ入ってるのでまぁよし。

READMEに、おすすめ`.vimrc`の記述があるので忘れずに。

個人的に全部はいらないと思ったので、基本的なやつとTABで補完リストを選べるようにするやつだけコピった。

coc-svelte

GitHub - coc-extensions/coc-svelte: svelte support for (Neo)Vim

CoCは各種サポートを拡張機能で提供するので、Svelte用のそれを入れる。

拡張はVim上から`:CocInstall coc-svelte`って実行することでインストールする。

`.vimrc`に書くことでもインストールできるけど、こっちの方法がおすすめって書いてあった。

なんとこれだけでLSPの機能が使えるようになる・・・。

デフォルトのファイルタイプだと、`.svelte`はナニソレ状態なので、シンタックスハイライトは自分で用意する必要があることに注意。

`leafOfTree/vim-svelte-plugin`とか、`evanleck/vim-svelte`とか。

:CocConfig

CoC自体の設定を変えるには、Vim上で`:CocConfig`コマンドを入力する。
すると設定ファイルが開く。なので、直接そのファイル（`~/.vim/coc-settings.json`）を修正してもいいはず。

今の設定はこんな感じ。

{
  "coc.preferences.extensionUpdateCheck": "daily",
  "diagnostic.checkCurrentLine": true,
  "tsserver.enableJavascript": false,
  "eslint.autoFixOnSave": true
}

上から、

  • 拡張のアップデートを毎日チェックする
  • TSやESLintのエラー内容を、行単位で表示する（デフォルトは文字単位）
  • `.js`ファイルでは、`tsserver`を起動しない
  • 保存時に`eslint --fix`する

ほぼVSCodeのそれ。

ちなみにJSONを修正するときには、`coc-json`を入れておくとこれまたいい感じにしてくれる。

というわけで

CoCがすごくて感動したという話でした。
拡張もVSCodeの拡張をフォークして作れるみたいなデザインらしく、他にも便利なやつありそう。

ちなみに、最近のマイ`.vimrc`はこんな感じ。

https://github.com/leader22/dotfiles/blob/master/.vimrc

もうひとつちなむと、SvelteをTSで書けるようにはなったけど、それで満足に型安全なコードが書けるのか？と問われると、今のところまだ微妙と言わざるを得ない・・というのが正直な感想。