どうしてもVimでVueの開発をしたかった話
はじめに
これは、ストックマーク Advent Calendar 2022 11日目の記事です。こんにちは、ストックマークでAstrategyというビジネス向けSaaSについて、主にフロントエンドの開発を担当している@tsukkeeです。
昨年のAdvent Calendarの私の記事では、Vimを中心とした開発環境の記事を書いたのですが、今年はその環境をなんとか維持した話を書きたいと思います。
ちなみに、弊社はVimのほか、Emacs、IntelliJ IDEA、Cloud9、Visual Studio Codeを使うメンバーも在籍しており多様性があるのですが、最近デザイナーの方の中にNova使いの方がいることが発覚し、さらに混迷を極めています。そんな中最近入社された方の中にNeoVimユーザーの方がいて、Vim派が倍増(1人→2人)したという朗報もありました。
VimでVueを使ったフロントエンド開発をする
さて、弊社ストックマークではフロントエンド開発にVueを採用しています。Vueをはじめとしたフロントエンドフレームワークを使った開発では、ESLintなどのLinter、PrettierなどのFormatterを活用することで、チーム内でコードの一貫性を保ちつつ効率的に開発を進めることができます。そして、さらに効率的なコーディングに欠かせないのがLanguage Serverの設定です。
Vueにおいては永らくVeturが使われてきましたが、昨年の記事でも少し触れたようにVolarが登場し、さらには今年1月にVue 3 as the new defaultになった段階で、
- Improved TypeScript IDE support for Single File Components via Volar
- Command line type checking for SFCs via vue-tsc
と述べられており、Volarと、さらにコア部分を共有するvue-tscがVueのエコシステムの中で標準ツールとなりました。今のところ来年末がVue 2系のEnd of Lifeと言われている中で、残念ながら弊社プロダクトはVue 3移行が完了していないのですが(来年のAdvent CalendarではVue 3に移行できた話をしたい…！)、Volarはこちらの手順でVue 2でも使うことができます。まだVue 3に移行できていないので…という理由でVolarを諦める必要はないので活用していきましょう。
ちょいちょい動かなくなる
ということで、VimでもLinter、Formatter、Language Serverを設定できて、Vue開発も快適にできるぜ！となったのですが、Volarが安定版となったのは今年の10月頭だったので、それまでというかその前後まではちょいちょい動かなくなっていました。
ここで、VimでLanguage Serverで使うということは、Language ServerであるVolar、クライアント側のvim-lsp、さらにvim-lsp向けに設定を提供しているvim-lsp-settingsがそれぞれが正しく動いている必要があります。それぞれちょいちょい私の方からPull Request(どれも数行程度のものですが…)を送り、そしてそれ以上に各プロジェクトの開発者の皆様に助けてもらって今に至ります。
なお、vim-lspを使っていて問題が発生した場合には、以下のようにvim-lspからログを吐くようにしつつ、変なメッセージが出ていないか、さらには仕様とにらめっこして齟齬がないかを見ていると原因が特定できることが多いです。
let lsp_log_verbose=1
let lsp_log_file = expand('~/lsp.log')
ということで、以下ざっと私から送ったPull Requestの紹介です。
Volar
今のところvim-lspとVolarは標準入出力で通信しているため、Volar側でconsole.log()でログが吐かれると標準出力として吐かれ、JSONで通信しているところと混ざって壊れるという問題があったので、console.warn()を使って標準エラーの方に出力するようにしました。
vim-lspがworkspaceFolderという設定への対応がexperimentalなのですが、Volar側がworkspaceFolderが有効であることが前提のコードになっている箇所があったので修正しました。
このあたりの修正は、Volar側の開発が早く、またちょくちょくリファクタリングも入っているようなので、今は跡形もない気がします笑
vim-lsp
Volarが1.0になるタイミングで、初期設定まわりに色々とリファクタリングが入ったとのことなのですが、その中でクライアントから申告されたCapability(Language Serverが提供する機能のうち、どれに対応しているかという情報)に応じて動作を変更するようになりました。クライアント、つまりvim-lspから正しくCapabilityを申告しなければならなくなったのですが、vim-lspがRename機能への対応があるにも関わらず、申告しているCapabilityにその情報が含まれていなかったので修正しました。
しかし、こちらの修正は他のLanguage Serverの挙動も変えることになり、さらにvim-lsp側の修正が必要となってしまい、最終的にはhrsh7thさんに修正していただきました。大変ありがたい限りです。
vim-lsp-settings
Volar側が安定版になるまでの間、不定期に破壊的変更が入ってたので、インストールするタイミングによって意図せず壊れたりしないように、vim-lsp-settings側で常にVolarのバージョンを固定するようにしていました。そのため、自分の方でタイミングを見てたまにバージョンを上げるためのPull Requestを送らせていただいてました。
それがついに、前述したとおり安定版となったため、minor versionまで固定するように変更しています。この記事を書いている段階で、Volarは1.0.12までバージョンが上がっているのですが、今のところ:LspInstallServerでVolarを入れ直すだけで適切に最新バージョンが使えるよういなっているので良い感じです。
さいごに
上記のようにいくつかPull Requestを送っていたのですが、内容としてはVimとVolarを繋ぐためにほんの少しずれていたところを直した程度で、実際にはVolarとvim-lsp、vim-lsp-settingsがそれぞれ素晴しいソフトウェアであることに、VimでのVue開発を支えてもらっているなと感じます。また、上記の各Pull Requestにおいても色々と助けていただき感謝感謝です。
そして、VimでVue開発したい！という人が自分以外に地球に何人いるかは分かりませんが、上記の修正がそういう人たちにちょっとは役に立つと良いなと思います。何より自分が便利なことが一番嬉しいことなので、来年もできる範囲でちょいちょいコントリビュートしていけると良いなと思いました。
おまけ
昨年のAdvent Calendarでは、AquaSKKをターミナル上で使うことに命を懸けておりました。当時は、Alacrittyのmasterを自力でビルドするしか方法がなかったのですが、その後KittyやWezTermでも日本語入力への対応が進み、AquaSKKを問題なく使えるようになっています。以下のように互換性設定をすると良いです。
また、Alacrittyではundercurlが表示できないという問題もあったのですが、こちらも対応されており、今では問題なく表示できるようになっています。
各ターミナルの開発者の皆様にも感謝！！
Discussion