[[📒Articles]] > [[📒2025 Articles]] ![[2025-06-15-1.webp|cover-picture]] [[📘目指せ二刀流！ VSCodeをNeovim色にコーディネートしてみた]] の後編です。 ## あらすじ 前回、[[Neovim]]と[[VSCode]]の二刀流で楽しく快適に開発できるように、[[VSCode]]を[[Neovim]]色にコーディネートしてみた記事を書きました。 <div class="link-card-v2"> <div class="link-card-v2-site"> <img class="link-card-v2-site-icon" src="https://publish-01.obsidian.md/access/35d05cd1bf5cc500e11cc8ba57daaf88/favicon-64.png" /> <span class="link-card-v2-site-name">Minerva</span> </div> <div class="link-card-v2-title"> 📘目指せ二刀流！ VSCodeをNeovim色にコーディネートしてみた </div> <div class="link-card-v2-content">VSCodeのNeovim風カスタマイズ、キーボード操作やUIのシンプル化、VSCode Neovim拡張の導入方法などを、NeovimちゃんとVSCodeちゃんが対話形式でお届けします。</div> <img class="link-card-v2-image" src="https://publish-01.obsidian.md/access/35d05cd1bf5cc500e11cc8ba57daaf88/%F0%9F%93%98Articles/attachments/2025-06-02.webp" /> <a data-href="📘目指せ二刀流！ VSCodeをNeovim色にコーディネートしてみた" class="internal-link"></a> </div> %%[[📘目指せ二刀流！ VSCodeをNeovim色にコーディネートしてみた]]%% しかし、記事のボリュームが当初想定していた倍近くになってしまったため、急遽前編と後編に分けることにしました。 > 1記事で終わらせるつもりでしたが、想像以上の分量になってしまったので続きは後編とします。軌跡シリーズ制作者の気持ちが分かる気がしました🤣 そのため、前編を一読したあとに読んでいただくとスムーズに本編へ入れると思います。 ## 前提 ### 対象読者 前編とは少し対象読者が変わります。 | 対象 | オススメ度 | | -------------------------------------- | ----- | | [[Neovim]]利用者であり、[[VSCode]]も仕方なく使っている方 | ⭐⭐⭐ | | [[Neovim]]の操作性を取り入れて[[VSCode]]を強化したい人 | ⭐⭐⭐ | | [[VSCode]]の環境を強化したい方 | ⭐⭐ | ### 環境 PCは[[MacBook Pro M4 Pro]]を使っています。また、[[OS]]やツールのバージョンは以下の通りです。 | 対象 | バージョン | | ---------- | ------- | | [[macOS]] | 15.5 | | [[VSCode]] | 1.100.3 | ### 進行 前編に引き続き、[[Neovimちゃん]]と[[VSCodeちゃん]]の対話形式をメインに進行していきます。 ## 再開 > [!right-bubble] ![[neovim-chan-face1.webp]] > > さて、しっかり休憩もとったし、そろそろ再開しようか！ コーちゃん([[VSCodeちゃん]])の調子はどうかな？ > [!left-bubble] ![[vscode-chan-face1-transparent.webp]] > > 甘いものとコーヒーのおかげスッキリしました。引き続きよろしくお願いしますね。ネオちゃん([[Neovimちゃん]])。 > [!right-bubble] ![[neovim-chan-face1.webp]] > > うんうん。それじゃあ、休憩前に何をやったかを軽くおさらいしておこうね！ > [!info] 前編でやったこと > > - Neovimっぽい見た目にする > - 不要なコンポーネントを非表示にする > - エディタの表示を最小限にする > - テーマとアイコンの変更 > - Neovimの血を注ぐ > - VSCode Neovimのインストール > - VSCodeの設定 > - Neovimの設定 > - LSPを無効化する > - lazy.nvimで不要なプラグインを無効化する > - キーマップの調整 > - UIに関するキーマップを別で設定する > - エディタ以外で利用するホットキーを設定する > - デフォルトでは利用できないキーマップ > [!left-bubble] ![[vscode-chan-face1-transparent.webp]] > > 見た目をスッキリさせて、[[Neovim]]の操作を[[VSCode]]でも使えるようにしたんでしたね。プラグインの調整やキーマップ周りは結構大変だったなと思います。 > [!right-bubble] ![[neovim-chan-face1.webp]] > > うんうん。それに比べると、今日の話は[[VSCode]]のコマンドやプラグインの話がメインになると思うから、理解しやすいと思うよ。[[Neovim]]と直接関係ないものが多いしね！ > [!left-bubble] ![[vscode-chan-face1-transparent.webp]] > > **[[Neovim]]に興味がなくても、[[VSCode]]をカスタマイズしたい気持ちがある方には参考になる話が多い**ということですね。ウチも楽しみになってきました。 ## Lazygitを使う > [!right-bubble] ![[neovim-chan-face1.webp]] > > じゃあ、まずは[[Git]]操作からやっちゃおう。[[Neovim]]では[[lazygit.nvim]]ていうプラグインがあって、これを使うと[[Neovim]]を起動したまま[[Lazygit]]を開いて操作ができるんだよ！ > [!left-bubble] ![[vscode-chan-face1-transparent.webp]] > > ちょっと待ってください、ネオちゃん。[[Lazygit]]ってなんなのでしょうか？ > [!right-bubble] ![[neovim-chan-face1.webp]] > > うんうん。[[VSCode]]で開発をしているとあまり馴染みがないよね。[[Lazygit]]というのは[[Git]]操作に特化した[[TUI]]ツールのことだよ。 <div class="link-card-v2"> <div class="link-card-v2-site"> <img class="link-card-v2-site-icon" src="https://github.githubassets.com/favicons/favicon.svg" /> <span class="link-card-v2-site-name">GitHub</span> </div> <div class="link-card-v2-title"> GitHub - jesseduffield/lazygit: simple terminal UI for git commands </div> <div class="link-card-v2-content"> simple terminal UI for git commands. Contribute to jesseduffield/lazygit development by creating an account on G ... </div> <img class="link-card-v2-image" src="https://opengraph.githubassets.com/7d9561ecdbd946f66187cab6d8d25ed53b12b0d8aaf177020dbd686896e147f9/jesseduffield/lazygit" /> <a href="https://github.com/jesseduffield/lazygit"></a> </div> > [!left-bubble] ![[vscode-chan-face1-transparent.webp]] > > なるほど...。ターミナルだと `git commit -m "hogehoge"` みたいにコマンドを打つことしかできないと思っていましたが、[[GUI]]のような操作もできるんですね。 > [!right-bubble] ![[neovim-chan-face1.webp]] > > そうそう。都度長いコマンドを打つ必要がないし、キーボードで操作が完結するから、ターミナルとの相性はバッチシなんだよ！ > [!left-bubble] ![[vscode-chan-face1-transparent.webp]] > > ウチはずっと[[Git Graph]]という[[VSCode Extension]]を使っていました。それで、どのようにすればいいのでしょうか？ > [!right-bubble] ![[neovim-chan-face1.webp]] > > [[LazyGit VSCode]]という[[VSCode Extension]]をインストールすればOKだよ！ <div class="link-card-v2"> <div class="link-card-v2-site"> <img class="link-card-v2-site-icon" src="https://marketplace.visualstudio.com/favicon.ico" /> <span class="link-card-v2-site-name">marketplace.visualstudio.com</span> </div> <div class="link-card-v2-title"> LazyGit VSCode - Visual Studio Marketplace </div> <div class="link-card-v2-content"> Extension for Visual Studio Code - Native integration of LazyGit directly in a VSCode window </div> <img class="link-card-v2-image" src="https://tompollak.gallerycdn.vsassets.io/extensions/tompollak/lazygit-vscode/0.1.16/1749198854669/Microsoft.VisualStudio.Services.Icons.Default" /> <a href="https://marketplace.visualstudio.com/items?itemName=TomPollak.lazygit-vscode"></a> </div> ```json // settings.json { // 開くエディタが異なるので違う設定 "lazygit-vscode.configPath": "~/git/github.com/tadashi-aikawa/toki/mnt/lazygit/vscode-config.yml", // 分割エディタで開いた時にも対応 "lazygit-vscode.autoMaximizeWindow": true, // Lazygitを起動したら全画面表示. hideRestoreはもともと非表示でも表示されてしまうので指定しない "lazygit-vscode.panels": { "sidebar": "hide", "panel": "hide", "secondarySidebar": "hide" }, } ``` ```lua -- lua/keymaps.lua if vim.g.vscode then -- Space g で起動する場合 vim.keymap.set("n", "<space>g", function() vscode.action("lazygit-vscode.toggle") end) end ``` > [!right-bubble] ![[neovim-chan-face1.webp]] > > `lua/keymaps.lua` へ設定が必要な理由を忘れちゃったら [[📘目指せ二刀流！ VSCodeをNeovim色にコーディネートしてみた#UIに関するキーマップを別で設定する]] を確認してみてね！ > [!left-bubble] ![[vscode-chan-face1-transparent.webp]] > > あれ... 普通に[[Lazygit]]を使うときとは設定ファイルが違うんですね？ > [!right-bubble] ![[neovim-chan-face1.webp]] > > そうそう。よく気づいたね！ `os.editPreset` に `vscode` を設定したり、`promptToReturnFromSubprocess` を `false` にしなければいけないから、別の設定ファイルが必要なんだよ。 ```yaml # lazygit/vscode-config.yml # この2つの設定が必要 os: editPreset: "vscode" promptToReturnFromSubprocess: false # あとは通常のLazygitと同じ設定 ``` > [!left-bubble] ![[vscode-chan-face1-transparent.webp]] > > なるほど... [[VSCode]]からしか[[Lazygit]]を使わなければ指定しなくても良さそうですね。 > [!right-bubble] ![[neovim-chan-face1.webp]] > > うんうん。みんな最初はそう言うんだよね。でも、一度[[Lazygit]]を使い初めてしまったら離れられなくなると思うよ！ せっかくだから、少し動画で紹介するね！ ![[20250615_13_38_53.mp4|frame]] *LazyGit VSCode で git操作* > [!left-bubble] ![[vscode-chan-face1-transparent.webp]] > > おお... 何か凄そうなことは分かった気がします。 > (操作が速すぎて何をしているのか全然分からなかったけど...) ## oil.nvimを使う > [!right-bubble] ![[neovim-chan-face1.webp]] > > 次は[[oil.nvim]]のようなエクスプローラーを入れちゃおう！ > [!left-bubble] ![[vscode-chan-face1-transparent.webp]] > > え、オイル...？ > (油じゃないですよね...) > [!right-bubble] ![[neovim-chan-face1.webp]] > > うんうん。コーちゃんは多分知らないよね。[[oil.nvim]]は[[Neovim]]の思想に沿ってバッファベースでファイルやフォルダを管理できる凄いエクスプローラーなんだよ！ <div class="link-card-v2"> <div class="link-card-v2-site"> <img class="link-card-v2-site-icon" src="https://github.githubassets.com/favicons/favicon.svg" /> <span class="link-card-v2-site-name">GitHub</span> </div> <div class="link-card-v2-title"> GitHub - stevearc/oil.nvim: Neovim file explorer: edit your filesystem like a buffer </div> <div class="link-card-v2-content"> Neovim file explorer: edit your filesystem like a buffer - stevearc/oil.nvim </div> <img class="link-card-v2-image" src="https://opengraph.githubassets.com/bdbe247ec5e2bcd50e618a70cbfbd30b65002b54cfde1e23908ffcb2d692e1f5/stevearc/oil.nvim" /> <a href="https://github.com/stevearc/oil.nvim"></a> </div> > [!left-bubble] ![[vscode-chan-face1-transparent.webp]] > > そうなんですね。知らなかったです。でも[[VSCode]]は標準のエクスプローラーがついてますし、無理に[[Neovim]]っぽさを求めなくてもいいような気がしませんか？ > [!right-bubble] ![[neovim-chan-face1.webp]] > > うんうん。[[Lazygit]]と同じでみんな最初はそう言うんだよね。でも一度[[oil.nvim]]に身体が馴染んじゃうと、他のエクスプローラーを使うなんて考えられなくなるんだよ！ > [!left-bubble] ![[vscode-chan-face1-transparent.webp]] > > な... なるほどぉ...。 > ([[Neovim]]の思想... というあたりからウチには合わなそう...) > [!right-bubble] ![[neovim-chan-face1.webp]] > > [[oil.code]]という[[VSCode Extension]]をインストールすれば、[[VSCode]]で[[oil.nvim]]っぽいことができるようになるよ！ <div class="link-card-v2"> <div class="link-card-v2-site"> <img class="link-card-v2-site-icon" src="https://marketplace.visualstudio.com/favicon.ico" /> <span class="link-card-v2-site-name">marketplace.visualstudio.com</span> </div> <div class="link-card-v2-title"> oil.code - Visual Studio Marketplace </div> <div class="link-card-v2-content"> Extension for Visual Studio Code - Provides an Oil.nvim like experience for VSCode. </div> <a href="https://marketplace.visualstudio.com/items?itemName=haphazarddev.oil-code"></a> </div> > [!left-bubble] ![[vscode-chan-face1-transparent.webp]] > > レビューやインストール数が少ないですね...。大丈夫なのでしょうか？ > [!right-bubble] ![[neovim-chan-face1.webp]] > > うんうん。まだ新しいプラグインだし、[[Neovim]]で[[oil.nvim]]を使っている人とターゲットが狭いからだと思うよ。試しに使ってみて気に入ったらコーちゃんもレビューしてみてね！ > [!left-bubble] ![[vscode-chan-face1-transparent.webp]] > > わかりました。 > (これは使わないといけない流れになっているのでは...) > [!right-bubble] ![[neovim-chan-face1.webp]] > > じゃあ設定を紹介するね。 ```json // settings.json { "oil-code.hasNerdFont": true, // これをtrueにしないと、勝手にvimのキーマップが無尽蔵に追加されてしまう "oil-code.disableVimKeymaps": true, // 起動後、何も開かれていない場合でも、自動でカレントディレクトリを開かない "oil-code.disableOpenCwdNothingOpen": true, } ``` ```lua -- lua/keymaps.lua -- space o で起動する場合 vim.keymap.set("n", "<space>o", function() vscode.action("oil-code.open") end) vim.api.nvim_create_autocmd("FileType", { pattern = "oil", callback = function(event) ----------------------------------------------- -- Oil.Codeのタブが開かれたときだけ設定するキーマップ ----------------------------------------------- local opts = { buffer = event.buf, noremap = true, silent = true } vim.keymap.set("n", "<CR>", function() vscode.action("oil-code.select") end, opts) vim.keymap.set("n", "<C-CR>", function() vscode.action("oil-code.selectVertical") end, opts) -- 水平方向に展開するコマンドはないので複数コマンドを同期で連続させる vim.keymap.set("n", "<C-s>", function() vscode.call("workbench.action.splitEditorDown") vscode.call("oil-code.selectTab") vscode.call("workbench.action.previousEditorInGroup") vscode.call("workbench.action.closeActiveEditor") end, opts) vim.keymap.set("n", "-", function() vscode.action("oil-code.openParent") end, opts) vim.keymap.set("n", "_", function() vscode.action("oil-code.openCwd") end, opts) vim.keymap.set("n", "<C-l>", function() vscode.action("oil-code.refresh") end, opts) end, }) ``` > [!left-bubble] ![[vscode-chan-face1-transparent.webp]] > > 結構設定が多いですね。[[oil.nvim]]を使ったことがないのでイメージが沸かないです。 > [!right-bubble] ![[neovim-chan-face1.webp]] > > うんうん。そうだよね。じゃあ、[[oil.code]]も少し操作動画を紹介するよ！ ![[20250615_17_44_25.mp4|frame]] *oil.code でファイルを開いたりコピーしたり* > [!left-bubble] ![[vscode-chan-face1-transparent.webp]] > > おぉ...。ひとまずウチの知っている[[VSCode]]のエクスプローラーとは全然違いそうなのが分かりました。 > (ネオちゃんのオススメはレベルが高すぎるよぉ...) ## TODO Commentsを使う > [!left-bubble] ![[vscode-chan-face1-transparent.webp]] > > ... ふぅ。 > [!right-bubble] ![[neovim-chan-face1.webp]] > > (コーちゃん、ちょっと疲れてきたのかな... じゃあ) > 次は[[Todo Comments]]というコメントを目立たせる機能を入れてみるよ！ <div class="link-card-v2"> <div class="link-card-v2-site"> <img class="link-card-v2-site-icon" src="https://github.githubassets.com/favicons/favicon.svg" /> <span class="link-card-v2-site-name">GitHub</span> </div> <div class="link-card-v2-title"> GitHub - folke/todo-comments.nvim: ✅ Highlight, list and search todo comments in your projects </div> <div class="link-card-v2-content"> ✅ Highlight, list and search todo comments in your projects - folke/todo-comments.nvim </div> <img class="link-card-v2-image" src="https://repository-images.githubusercontent.com/366156426/09850900-b3b8-11eb-91d2-4c2099dd3541" /> <a href="https://github.com/folke/todo-comments.nvim"></a> </div> > [!left-bubble] ![[vscode-chan-face1-transparent.webp]] > > ふむふむ。`TODO` や `FIXME` のようなコメントをハイライトしてくれるんですね。 > (これならウチでも入れられそう...) > [!right-bubble] ![[neovim-chan-face1.webp]] > > うんうん。[[Better Comments]]という[[VSCode Extension]]をインストールすると実現できるよ！ ただ、[[Todo Comments]]にあわせるなら設定は自分で書く必要があるから、そこだけ要注意だね。 <div class="link-card-v2"> <div class="link-card-v2-site"> <img class="link-card-v2-site-icon" src="https://marketplace.visualstudio.com/favicon.ico" /> <span class="link-card-v2-site-name">marketplace.visualstudio.com</span> </div> <div class="link-card-v2-title"> Better Comments - Visual Studio Marketplace </div> <div class="link-card-v2-content"> Extension for Visual Studio Code - Improve your code commenting by annotating with alert, informational, TODOs, ... </div> <img class="link-card-v2-image" src="https://aaron-bond.gallerycdn.vsassets.io/extensions/aaron-bond/better-comments/3.0.2/1659144495902/Microsoft.VisualStudio.Services.Icons.Default" /> <a href="https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments"></a> </div> ```json // settings.json { "better-comments.tags": [ { "tag": "FIXME", "color": "#FFFFFF", "backgroundColor": "#DC2626" }, { "tag": "DANGER", "color": "#FFFFFF", "backgroundColor": "#DC2626" }, { "tag": "WARN", "color": "#000000", "backgroundColor": "#FBBF24" }, { "tag": "HINT", "color": "#000000", "backgroundColor": "#10B981" }, { "tag": "TODO", "color": "#CDCDCD", "backgroundColor": "#2563EB" }, { "tag": "INFO", "color": "#CDCDCD", "backgroundColor": "#2563EB" } ], } ``` > [!left-bubble] ![[vscode-chan-face1-transparent.webp]] > > これくらいの設定ならウチでも理解できそうです。 > [!right-bubble] ![[neovim-chan-face1.webp]] > > [[VSCode]]で確認すると、こんなハイライトになるよ！ ![[2025-06-15-18-03-50.avif]] ## ファジーファインダーの葛藤 > [!right-bubble] ![[neovim-chan-face1.webp]] > > さて、コーちゃんも元気になってきたことだし、最後のお題に行こうか！ > [!left-bubble] ![[vscode-chan-face1-transparent.webp]] > > ついに最後なんですね... よろしくお願いします。 > [!right-bubble] ![[neovim-chan-face1.webp]] > > 最後は[[ファジーファインダー]]についてだよ！ > [!left-bubble] ![[vscode-chan-face1-transparent.webp]] > > [[ファジーファインダー]]って言うと、入力したワードにファイル名やファイルの中身がマッチした一覧がリストアップできるやつですよね？ > [!right-bubble] ![[neovim-chan-face1.webp]] > > そうそう。目的のファイルや箇所を開きたいときに便利だよね！ [[Neovim]]だと[[telescope.nvim]]が有名なんだけど、わたしは最近だと[[snacks.picker]]というのを使っているよ！ ### デフォルトのファジーファインダーは？ > [!left-bubble] ![[vscode-chan-face1-transparent.webp]] > > ダメ元で聞きますけど、標準の[[ファジーファインダー]][^1]ではダメなのでしょうか？ > [!right-bubble] ![[neovim-chan-face1.webp]] > > うんうん。気になるよね。標準の[[ファジーファインダー]]は、キーワードのマッチ具合はイイ感じなんだけど、選択中のファイルがプレビューされないんだよね。 ![[20250615_18_59_38.mp4|frame]] *Neovimのsnacks.pickerを使ってプレビュー表示* > [!left-bubble] ![[vscode-chan-face1-transparent.webp]] > > [[snacks.picker]]を初めて見ましたが、これは便利ですね。 > [!right-bubble] ![[neovim-chan-face1.webp]] > > うんうん。もし、[[VSCode]]にもそういう機能や設定があったら教えてね！ ### FindItFasterは？ > [!right-bubble] ![[neovim-chan-face1.webp]] > > 実は一度 [[FindItFaster]] っていう[[VSCode Extension]]を使っていたことがあるんだよ。 <div class="link-card-v2"> <div class="link-card-v2-site"> <img class="link-card-v2-site-icon" src="https://marketplace.visualstudio.com/favicon.ico" /> <span class="link-card-v2-site-name">marketplace.visualstudio.com</span> </div> <div class="link-card-v2-title"> FindItFaster - Visual Studio Marketplace </div> <div class="link-card-v2-content"> Extension for Visual Studio Code - Find it, but faster! Leveraging fzf and rg. </div> <img class="link-card-v2-image" src="https://tomrijndorp.gallerycdn.vsassets.io/extensions/tomrijndorp/find-it-faster/0.0.39/1726465450078/Microsoft.VisualStudio.Services.Icons.Default" /> <a href="https://marketplace.visualstudio.com/items?itemName=TomRijndorp.find-it-faster"></a> </div> > [!left-bubble] ![[vscode-chan-face1-transparent.webp]] > > [[fzf]]と[[ripgrep]]、[[bat]]を使って標準よりも高速な検索を提供しているんですね。これだけ見ると良さそうに見えますが...。 > [!right-bubble] ![[neovim-chan-face1.webp]] > > そうそう。ただ、ターミナルでコマンドを実行し、選択されたら[[VSCode]]で開き直すようになっているから、**UIの処理が遅く見えてしまった**んだよね。 > [!left-bubble] ![[vscode-chan-face1-transparent.webp]] > > なるほど。いくら検索速度が速くても、コマンド実行から表示までの体感速度が下がってしまったら嬉しくないですね。 > [!right-bubble] ![[neovim-chan-face1.webp]] > > あとは、分割して複数の[[エディタグループ (VSCode)|エディタグループ]]を使っているときは、表示される領域が狭くなって見にくくなってしまうというのもあるよ。 > [!left-bubble] ![[vscode-chan-face1-transparent.webp]] > > プレビュー能力は理想通りなだけあって、惜しいですね。 ### Search Previewは？ > [!right-bubble] ![[neovim-chan-face1.webp]] > > もう1つの候補として [[Search Preview]] という[[VSCode Extension]]もあったんだよ。 <div class="link-card-v2"> <div class="link-card-v2-site"> <img class="link-card-v2-site-icon" src="https://marketplace.visualstudio.com/favicon.ico" /> <span class="link-card-v2-site-name">marketplace.visualstudio.com</span> </div> <div class="link-card-v2-title"> Search Preview - Visual Studio Marketplace </div> <div class="link-card-v2-content"> Extension for Visual Studio Code - Preview files while searching, telescope style </div> <img class="link-card-v2-image" src="https://zaidalsaheb.gallerycdn.vsassets.io/extensions/zaidalsaheb/search-preview/0.3.0/1745489786666/Microsoft.VisualStudio.Services.Icons.Default" /> <a href="https://marketplace.visualstudio.com/items?itemName=zaidalsaheb.search-preview"></a> </div> > [!left-bubble] ![[vscode-chan-face1-transparent.webp]] > > 評価も高くて良さそうですね。説明文にも『[[telescope.nvim]]のようにプレビュー機能を持たせた[[Quick Open (VSCode)|Quick Open]]』と書かれていて、これでいいんじゃないんでしょうか？ > [!right-bubble] ![[neovim-chan-face1.webp]] > > うんうん。そう思うよね。機能の方は非常に良かったんだけど、2点ほど受けいれられない問題があったんだ。その1つが **プレビューしたファイルはすべてタブが残ってしまう** ということなんだよね。 > [!left-bubble] ![[vscode-chan-face1-transparent.webp]] > > なるほど。ということは、↓を6回押して決定したら、新たに7つのタブが開いてしまうんですね。 > [!right-bubble] ![[neovim-chan-face1.webp]] > > そうそう。わたしは無駄なタブを開いたり残しておくのが嫌だから、これは結構クリティカルだったんだ！ > [!left-bubble] ![[vscode-chan-face1-transparent.webp]] > > 逆に、タブをいくつ開いても気にしない人であれば大丈夫そうですね。 > [!right-bubble] ![[neovim-chan-face1.webp]] > > うんうん。もう1つの問題は **元ファイルのカーソル位置が保持されない** ということなんだよね。 > [!left-bubble] ![[vscode-chan-face1-transparent.webp]] > > [[Search Preview]]から新しいファイルを開いたあとに、前の位置に戻ろうとしても戻れないということでしょうか？ > [!right-bubble] ![[neovim-chan-face1.webp]] > > そうそう。**必ずファイルの先頭に移動してしまう**んだよ！ [[ロケーションリスト (Vim)|ロケーションリスト]]を意識する[[Vimmer]]としてこれは致命的な制限なんだよ。 > [!left-bubble] ![[vscode-chan-face1-transparent.webp]] > > たしかに。今のファイルを編集中に、少し他のファイルを確認したくなって移動したあと、元の位置に簡単に戻れないのは大変ですよね。 > ([[ロケーションリスト (Vim)|ロケーションリスト]]？？) ## 全文検索のプレビュー ### Quick Search > [!right-bubble] ![[neovim-chan-face1.webp]] > > [[ファジーファインダー]]を[[Neovim]]色にコーディネートするのは心が折られたけど、全文検索だけは少し抵抗できたんだ！ > [!left-bubble] ![[vscode-chan-face1-transparent.webp]] > > プレビューできたということでしょうか？ > [!right-bubble] ![[neovim-chan-face1.webp]] > > そうそう。[[VSCode]]のv1.89から追加された機能 [[Quick Search]] を使うだけでいいんだよ！ ![[20250615_19_57_52.mp4|frame]] *Quick Search で deno を検索* > [!left-bubble] ![[vscode-chan-face1-transparent.webp]] > > おお。ちゃんとプレビューできてますね。 > [!right-bubble] ![[neovim-chan-face1.webp]] > > そうそう。ただ、**[[Quick Search]]で移動した後は[[ロケーションリスト (Vim)|ロケーションリスト]]がおかしくなる** という問題も発生するんだ。これは[[Search Preview]]と同じだよね。 ### grug-far.nvim っぽい結果表示 > [!left-bubble] ![[vscode-chan-face1-transparent.webp]] > > ところでネオちゃん。**最後** と言ってから長くないですか？ > [!right-bubble] ![[neovim-chan-face1.webp]] > > ごめんごめん。本当にこれで最後にするよ。実は[[Neovim]]界隈で最近[[grug-far.nvim]]というプラグインが出てきたんだよ！ <div class="link-card-v2"> <div class="link-card-v2-site"> <img class="link-card-v2-site-icon" src="https://github.githubassets.com/favicons/favicon.svg" /> <span class="link-card-v2-site-name">GitHub</span> </div> <div class="link-card-v2-title"> GitHub - MagicDuck/grug-far.nvim: Find And Replace plugin for neovim </div> <div class="link-card-v2-content"> Find And Replace plugin for neovim. Contribute to MagicDuck/grug-far.nvim development by creating an account on ... </div> <img class="link-card-v2-image" src="https://opengraph.githubassets.com/338893d2269ad2d653359d8858a1465d7e2833380b39750370361ed34eaef3ae/MagicDuck/grug-far.nvim" /> <a href="https://github.com/MagicDuck/grug-far.nvim"></a> </div> > [!left-bubble] ![[vscode-chan-face1-transparent.webp]] > > そうなんですね。その[[grug-far.nvim]]プラグインがどう関係するのでしょうか？ > [!right-bubble] ![[neovim-chan-face1.webp]] > > うんうん。説明するね。[[Neovim]]では全文検索した結果を編集する場合、[[vimgrep (Vim)|vimgrep]]やプラグインで検索した結果を[[クイックフィックスリスト (Vim)|クイックフィックスリスト]]に送って、それを1つ1つ編集したり、[[quicker.nvim]]で[[クイックフィックス (Vim)|クイックフィックス]]の[[バッファ (Vim)|バッファ]]を編集しなければいけないんだ。 > [!left-bubble] ![[vscode-chan-face1-transparent.webp]] > > ？？？？？ > どないなことどす？ > [!right-bubble] ![[neovim-chan-face1.webp]] > > (あ、まずい) > 簡単に言うと『中級者以上』でないと難しい操作なんだよね。[[grug-far.nvim]]プラグインは『初心者』でも簡単に操作できるという点で画期的なんだよ！ > [!left-bubble] ![[vscode-chan-face1-transparent.webp]] > > なるほど。簡単に全文検索結果を編集・置換できるプラグインなんですね。 > [!right-bubble] ![[neovim-chan-face1.webp]] > > そうそう。実は[[VSCode]]でも、ある設定をすることで[[grug-far.nvim]]のように検索結果を表示できるんだよ！ ```json // settings.json { // -- [★これは必須] 全文検索で開くタブは1つ "search.mode": "reuseEditor", // [以下は任意] // -- 検索結果が出たら、自動で結果側にカーソルをフォーカス "search.searchEditor.focusResultsOnSearch": true, // -- Enterなしで検索しない "search.searchOnType": false, } ``` > [!left-bubble] ![[vscode-chan-face1-transparent.webp]] > > `search.mode` を変更するだけで変わるのですね。せっかくなのでウチがやってみます。 ![[2025-06-15-20-33-23.avif]] > [!left-bubble] ![[vscode-chan-face1-transparent.webp]] > > おお。ネオちゃんの好きそうな画面が出てきました。カーソルを該当箇所にあわせて `Go to Definition` を実行すれば該当箇所にも移動できますね。 > [!right-bubble] ![[neovim-chan-face1.webp]] > > そうそう。結果の[[エディタ (VSCode)|エディタ]]は[[ロケーションリスト (Vim)|ロケーションリスト]]にも登録されるから、`<C-i>` や `<C-o>` で行ったり来たりもできるんだよ！ > [!left-bubble] ![[vscode-chan-face1-transparent.webp]] > > ちなみに、検索結果が[[エディタ (VSCode)|エディタ]]で編集や一括置換もできるのでしょうか？ > [!right-bubble] ![[neovim-chan-face1.webp]] > > うんうん。残念ながら対応していないみたいなんだよね。編集や一括置換がしたくなったら、コーちゃんも[[Neovim]]にして[[grug-far.nvim]]を使おうね！ > [!left-bubble] ![[vscode-chan-face1-transparent.webp]] > > ま... 前向きに検討しますね。 > (ウチは `Search: Replace in Files` で十分かな...。) ## クロージング > [!right-bubble] ![[neovim-chan-face1.webp]] > > これで今日のお話は終わりだね！ 長い時間つきあってくれてありがとう！ > [!left-bubble] ![[vscode-chan-face1-transparent.webp]] > > いえいえ。ウチの方こそ色々勉強になりました。ありがとうございました。 > [!right-bubble] ![[neovim-chan-face1.webp]] > > じゃあ後は運営の人に任せちゃうとして、向こうの部屋で晩ごはんを食べようね！ > [!left-bubble] ![[vscode-chan-face1-transparent.webp]] > > (運営の人...？ 誰のことだろう？) > 分かりました。ここではできなかったお話とかもできると嬉しいです。 <p style="text-align: center; font-size: 150%; font-weight: bold; letter-spacing: .3rem;"> Fin </p> --- 長いやり取りにお付き合いいただきありがとうございました。 今の時代は[[AI]]に関する情勢が目まぐるしく変化しています。事実、これを書いている間にも[[Anthropic]]の[[Claude Code]]が脚光を浴びており、私も試しに使ってみたところ、**はじめて[[Vibe Coding]]というものを肯定的に捉えられた**くらいには凄かったです。[^2] それと同時に、**[[AI]]の情勢によって使うべきエディタが決められてしまう時代**にもう入っているとも感じます。そのような時代で生き抜くには、1つのエディタだけを極めるのではなく、必要に応じて複数のエディタを使いこなす能力、すなわち二刀流や三刀流が求められるのではないかと思っています。 もし、この記事を読んでくれた1人でも多くの[[Neovim]]愛好家の方が、これをきっかけとして[[VSCode]]との二刀流を目指すことになるのでしたら、とても嬉しく思います。 [^1]: [[Quick Open (VSCode)|Quick Open]]のこと [^2]: [[Claude Code]]を使った[[Vibe Coding]]については別途執筆予定です