[[📒Articles]] > [[📒2025 Articles]] ![[2025-06-02.webp|cover-picture]] [[Neovim]]と[[VSCode]]の二刀流で楽しく快適に開発できるように、[[VSCode]]を[[Neovim]]色にコーディネートしてみました。 ## なぜNeovimを使わないのか？ こういう記事を書くと ``` 『VSCodeをNeovimっぽくするなんてとんでもない！ Neovimと違うところがVSCodeの良さなのに。それなら、なんでVSCode使おうと思ったんですか？ Neovim使ってればいいじゃないですか？』 ``` という声が直ちに聞こえてきそうです。私もつい1ヶ月前までは同じ風に思っていました。実際のところ、3月終わり頃に以下の記事を書きました。 <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"> 📘CodeCompanionを使ってNeovimと一緒に楽しくAI Coding </div> <div class="link-card-v2-content">NeovimでAIコーディングをするためのプラグイン、CodeCompanionの設定方法や使い方をセットアップから順番に実例を交えてご紹介します。対象となるのは 『AIコーディングをはじめなければと思いつつも、Neovim以外のエディタには移行したくない...』とお困りの開発者です。</div> <img class="link-card-v2-image" src="https://publish-01.obsidian.md/access/35d05cd1bf5cc500e11cc8ba57daaf88/%F0%9F%93%98Articles/attachments/2025-03-21.webp" /> <a data-href="📘CodeCompanionを使ってNeovimと一緒に楽しくAI Coding" class="internal-link"></a> </div> %%[[📘CodeCompanionを使ってNeovimと一緒に楽しくAI Coding]]%% この記事の前半を読んでいただくと分かる通り、この頃から既に『はたしてこのまま[[Neovim]]を使っていていいのだろうか...』という葛藤はありました。 ### 大きなきっかけはMacBook Proへの移行 [[Windows]]を使っていた頃は、開発を[[WSL]]で行っていたため、[[VSCode]]を使う場合は必然的に[[Remote Development]]の[[VSCode Extension]]を使う必要がありました。リモートの割に快適ではあったものの、やりたいことを考えるとやや大げさな構成です。構成の複雑さやパフォーマンスの低下といったデメリットもありました。 しかし、GW前に33年を共にした[[Windows]]から[[macOS]] ([[MacBook Pro M4 Pro]]) へ移行をしました。 <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"> 📘さよならWindows。33年の日々よ </div> <div class="link-card-v2-content">33年間使い続けたWindowsからmacOSへ移行した理由や経緯、実際の移行手順やおすすめツール、キーボードカスタマイズ、ターミナル、画像・動画圧縮、エディタ環境の違いなどを詳しく解説しています。WindowsとMacの違いや移行のコツを知りたい方はぜひご覧ください。</div> <img class="link-card-v2-image" src="https://publish-01.obsidian.md/access/35d05cd1bf5cc500e11cc8ba57daaf88/%F0%9F%93%98Articles/attachments/2025-05-15.webp" /> <a data-href="📘さよならWindows。33年の日々よ" class="internal-link"></a> </div> %%[[📘さよならWindows。33年の日々よ]]%% 移行した当時は気にしませんでしたが、しばらくして気がついたのです。**[[macOS]]なら[[WSL]]や[[Remote Development]]を使わなくても、[[VSCode]]で快適に開発できるということに。** ### 会社・チームとしての標準エディタ 先の記事でも書かれているように、職場では [[VSCode]] x [[GitHub Copilot]] を推奨環境としたAIコーディングへの適応が始まっていました。ましてや私はそれを主導する側の人間です。 ``` 『VSCode? 分かりません。Neovimだったら任せてください(ﾄﾞﾔｯ 』 ``` とか言っていられる立場でもないと思いました。 ### そしてカスタマイズに本気を出し始めた これらの都合から[[VSCode]]を本気で使い始めました。しかし、デフォルトの状態では正直苦痛です。私の身体を[[Neovim]]にフィットしてしまっており、いまさら素の[[VSCode]]を受け入れられないのです。 そんなとき、以下の記事を偶然見かけました。 <div class="link-card-v2"> <div class="link-card-v2-site"> <img class="link-card-v2-site-icon" src="https://static.zenn.studio/images/logo-transparent.png" /> <span class="link-card-v2-site-name">Zenn</span> </div> <div class="link-card-v2-title"> うわっ…私のエディタ、ダサすぎ…？ナウなヤングにバカウケするCursor・VSCodeのイケイケ設定 </div> <img class="link-card-v2-image" src="https://res.cloudinary.com/zenn/image/upload/s--dEVILKQ0--/c_fit%2Cg_north_west%2Cl_text:notosansjp-medium.otf_55:%25E3%2581%2586%25E3%2582%258F%25E3%2581%25A3%25E2%2580%25A6%25E7%25A7%2581%25E3%2581%25AE%25E3%2582%25A8%25E3%2583%2587%25E3%2582%25A3%25E3%2582%25BF%25E3%2580%2581%25E3%2583%2580%25E3%2582%25B5%25E3%2581%2599%25E3%2581%258E%25E2%2580%25A6%25EF%25BC%259F%25E3%2583%258A%25E3%2582%25A6%25E3%2581%25AA%25E3%2583%25A4%25E3%2583%25B3%25E3%2582%25B0%25E3%2581%25AB%25E3%2583%2590%25E3%2582%25AB%25E3%2582%25A6%25E3%2582%25B1%25E3%2581%2599%25E3%2582%258BCursor%25E3%2583%25BBVSCode%25E3%2581%25AE%25E3%2582%25A4%25E3%2582%25B1%25E3%2582%25A4%25E3%2582%25B1%25E8%25A8%25AD%25E5%25AE%259A%2Cw_1010%2Cx_90%2Cy_100/g_south_west%2Cl_text:notosansjp-medium.otf_37:aose%2Cx_203%2Cy_121/g_south_west%2Ch_90%2Cl_fetch:aHR0cHM6Ly9saDMuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2EtL0FPaDE0R2pSV1VrTEpMZE1Ra1hjVExDNjdGNW9vWDEzTVpVdlkwYzhCSWJaPXM5Ni1j%2Cr_max%2Cw_90%2Cx_87%2Cy_95/v1627283836/default/og-base-w1200-v2.png" /> <a href="https://zenn.dev/aose/articles/6188f61a6a2a25"></a> </div> **そうか！ [[VSCode]]を[[Neovim]]色に染めてしまえばいいんだ！** 悪魔の囁きに耳を傾け、[[VSCode]]を[[Neovim]]色にコーディネートする作業を始めました。 ## 前提 ### 対象読者 | 対象 | オススメ度 | | -------------------------------------- | ----- | | [[Neovim]]利用者であり、[[VSCode]]も仕方なく使っている方 | ⭐⭐⭐ | | [[VSCode]]のUIをシンプルにしたい方 | ⭐⭐ | | [[VSCode]]の環境を強化したい方 | ⭐ | ### 環境 PCは[[MacBook Pro M4 Pro]]を使っています。また、[[OS]]やツールのバージョンは以下の通りです。 | 対象 | バージョン | | ---------- | ------- | | [[macOS]] | 15.4.1 | | [[VSCode]] | 1.100.2 | ### 進行 本記事は[[Neovimちゃん]]と[[VSCodeちゃん]]の対話形式をメインに進行していきます。 ## 邂逅 > [!right-bubble] ![[neovim-chan-face1.webp]] > > こんにちは！ > [!left-bubble] ![[vscode-chan-face1-transparent.webp]] > > はじめまして、[[Neovimちゃん]]。本日はよろしくお願いしますね。 > [!right-bubble] ![[neovim-chan-face1.webp]] > > [[VSCodeちゃん]]とお話するのは初めてだね！ 実はわたしたちって生まれた月が同じなんだよね。さっき始めて知ったんだけど... > [!left-bubble] ![[vscode-chan-face1-transparent.webp]] > > あ、本当だ...。ウチは2015年11月18日に `v0.10.1` として誕生したのだけど、[[Neovimちゃん]]も同じ 2015年11月に `v0.1.0` として誕生しているんですね。 > [!right-bubble] ![[neovim-chan-face1.webp]] > > そうそう。もう双子の姉妹みたいなものだよね！ わたしのことは気軽にネオちゃんって呼んでね！ わたしも[[VSCodeちゃん]]のことをコーちゃんって呼ぶから！ > [!left-bubble] ![[vscode-chan-face1-transparent.webp]] > > わかりました。よろしくお願いしますね。 > (距離をグイグイ詰めてくる子なんだなぁ...) ## Neovimっぽい見た目にする ### 不要なコンポーネントを非表示にする > [!right-bubble] ![[neovim-chan-face1.webp]] > > じゃあ早速、見た目の部分から、わたし色にコーディネートしちゃうね！ コーちゃんの見た目は結構賑やかだよねぇ...。 ![[20250601_16_56_00.webp|frame]] *VSCodeの標準UI* > [!left-bubble] ![[vscode-chan-face1-transparent.webp]] > > そうかなあ...。これでもかなりシンプルだと思ってるんですけど...。 > [!right-bubble] ![[neovim-chan-face1.webp]] > > うんうん。コーちゃんは色々なユーザーと接しているから、万人に使いやすい見た目にしているんだよね。一方、わたしは **キーボード至上主義で... 見た目を自分でカスタマイズしたい派** だから必要な情報しか出したくないんだ。 ![[20250601_17_05_43.webp|frame]] *Neovimのカスタマイズされた画面* > [!left-bubble] ![[vscode-chan-face1-transparent.webp]] > > 本当だ...。エディタの情報量はあまり変わらないけど、[[アクティビィティバー]]や[[カスタムタイトルバー]]、ミニマップなどが無いんですね。 > (それより、[[Neovim]]ってここまで情報を表示できるものなんだ...。) > [!right-bubble] ![[neovim-chan-face1.webp]] > > そうそう。普段使わないモノは必要ないし、たまにしか使わないものは常時表示させておく必要もないからね。じゃあ、コーちゃんの周辺コンポーネントを非表示にしちゃうね！ ```json // settings.json に追加 { // 複数インスタンスをマージして1ウィンドウで表示 "window.nativeTabs": true, // 一番上のカスタムタイトルバーを非表示にする "window.customTitleBarVisibility": "never", // 左サイドのアクティビティバーを非展開時は非表示 "workbench.activityBar.location": "top", // フォント設定 (おまけ) "editor.fontFamily": "CaskaydiaCove Nerd Font", "editor.fontSize": 16, } ``` ![[20250601_17_21_22.webp|frame]] *カスタムタイトルバーとプライマリーサイドバーを消してスッキリしたVSCode* > [!left-bubble] ![[vscode-chan-face1-transparent.webp]] > > おぉ...。一気にネオちゃんぽくなりましたね。ただ、これだと[[コマンドパレット (VSCode)|コマンドパレット]]や[[プライマリーサイドバー]]からメニューを表示できなくなってしまわないのでしょうか...。 > [!right-bubble] ![[neovim-chan-face1.webp]] > > うんうん。それはショートカットキーで起動できるようにしておけば大丈夫だよ。[[プライマリーサイドバー]]を展開すれば、その中に[[アクティビィティバー]]も表示されるんだ。参考として、わたしの設定を書いておくね！ ```json // keybindings.json { // プライマリーサイドバーの表示切り替え { "key": "cmd+i", "command": "workbench.action.toggleSidebarVisibility" }, // コマンドパレット { "key": "cmd+escape", "command": "workbench.action.showCommands" }, } ``` ![[20250601_17_30_09.webp|frame]] > [!left-bubble] ![[vscode-chan-face1-transparent.webp]] > > なるほど... 勉強になります。 > (やはりマウスを使ってはいけないのですね...。) ### エディタの表示を最小限にする > [!right-bubble] ![[neovim-chan-face1.webp]] > > じゃあ、次はエディタの中をスッキリしちゃおうか。 > [!left-bubble] ![[vscode-chan-face1-transparent.webp]] > > よろしくお願いします。ただ、シンタックスハイライトだけは消さないでくださいね。1色だと流石にコードを読みづらいので...。 > [!right-bubble] ![[neovim-chan-face1.webp]] > > あはは... 流石にそこまではしないよ。コーディングの妨げになるノイズを非表示にしたいだけなんだから。流石にわたしも1色のコードは読みたくないよ。 ```json // settings.json に追加 { // インデントガイドを非表示にする "editor.guides.indentation": false, // ミニマップは非表示 "editor.minimap.enabled": false, // カッコの色をペアごとに変えない (すべて同じ色にする) "editor.bracketPairColorization.enabled": false, // カーソルは点滅させない "editor.cursorBlinking": "solid", // カーソル行はgutterだけハイライト "editor.renderLineHighlight": "gutter", } ``` ![[20250601_18_00_29.webp|frame]] *エディタの表示を最小限にしたVSCode* > [!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]] > > うんうん。普通はコーちゃんの意見に賛成だと思うよ。ただ、わたしは**その程度で読みにくくなるようなコードをできるだけ減らしたい**と思っているんだ。インデントやカッコのネストを表示していないのは、**自分自身への戒めみたいなもの**なんだよ。 > [!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]] > > うんうん。こればかりは各人の好みかな。自分にとって、**必要な情報を認知するまでのスピードが速く、集中できてモチベーションが上がるもの**を選ぶものが大事だと思うよ！ > [!left-bubble] ![[vscode-chan-face1-transparent.webp]] > > なるほど...。理論と感情の両方に作用するテーマを選んだほうがいいということですね。 > (よかった... 今回はまともだ。) > [!right-bubble] ![[neovim-chan-face1.webp]] > > そうそう。だから本当はコーちゃんの好きなテーマとアイコンを選んでもらいたいんだけど、今は時間もないから、わたしが普段使っているテーマに似せた感じでコーディネートするね！ ```json // settings.json { // テーマ "workbench.colorTheme": "Ayu Mirage Zed", "workbench.colorCustomizations": { // ライン番号とgutterの色変更 "editorLineNumber.foreground": "#888888", "editorLineNumber.activeForeground": "#EFEF33", // 選択範囲の色変更 "editor.selectionBackground": "#565612", // オートコンプリートの色変更 "editorSuggestWidget.selectedForeground": "#CDCDCD", "editorSuggestWidget.selectedBackground": "#363C58" }, // アイコン "workbench.iconTheme": "catppuccin-mocha", } ``` > [!right-bubble] ![[neovim-chan-face1.webp]] > > ここで設定したテーマとアイコンは[[Chrome Extension]]が必要だよ。[[Ayu Mirage Zed]]と[[Catppuccin Icons for VSCode]]をインストールしておいてね。 <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"> Ayu Mirage Zed - Visual Studio Marketplace </div> <div class="link-card-v2-content"> Extension for Visual Studio Code - A remake of Zed's Ayu mirage theme for VSCode. </div> <img class="link-card-v2-image" src="https://enhancedjax.gallerycdn.vsassets.io/extensions/enhancedjax/vscode-ayu-zed/1.0.2/1722093690903/Microsoft.VisualStudio.Services.Icons.Default" /> <a href="https://marketplace.visualstudio.com/items?itemName=enhancedjax.vscode-ayu-zed"></a> </div> <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"> Catppuccin Icons for VSCode - Visual Studio Marketplace </div> <div class="link-card-v2-content"> Extension for Visual Studio Code - 🦊 Soothing pastel icon theme for VSCode </div> <img class="link-card-v2-image" src="https://catppuccin.gallerycdn.vsassets.io/extensions/catppuccin/catppuccin-vsc-icons/1.21.0/1746234508629/Microsoft.VisualStudio.Services.Icons.Default" /> <a href="https://marketplace.visualstudio.com/items?itemName=Catppuccin.catppuccin-vsc-icons"></a> </div> > [!left-bubble] ![[vscode-chan-face1-transparent.webp]] > > [[Catppuccin Icons for VSCode]]って可愛らしいテーマですね。ネオちゃんにしては意外なチョイスだなと思いました。 > [!right-bubble] ![[neovim-chan-face1.webp]] > > うんうん。実はわたしが使っているアイコンとは似ていないんだよね。それでもコーちゃんにはコッチの方がいいなと思ったんだ！ > [!left-bubble] ![[vscode-chan-face1-transparent.webp]] > > では実際の画面を確認してみますね。 ![[20250601_18_28_20.webp|frame]] *テーマとアイコンを適応したVSCode* > [!right-bubble] ![[neovim-chan-face1.webp]] > > これで見た目の変更は一通り終わったから、[[Neovim]]の画面と並べてみよう！ ![[20250601_17_05_43.webp|frame]] *VSCode* ![[20250601_18_28_20.webp|frame]] *Neovim* > [!left-bubble] ![[vscode-chan-face1-transparent.webp]] > > 遠目にはどちらがどちらか一目で分からないですね...。普通に逆と言われても信じてしまいそう... あれ...？ > [!right-bubble] ![[neovim-chan-face1.webp]] > > おっ！ 気がついたかな？ > [!left-bubble] ![[vscode-chan-face1-transparent.webp]] > > 画像の注釈が逆ですね。上の画像が[[Neovim]]で、下の画像が[[VSCode]]ですよね？ > [!right-bubble] ![[neovim-chan-face1.webp]] > > さっすがコーちゃん！ ほとんどの人は気づかずにスルーしてしまうのによく気がついたね！ > [!left-bubble] ![[vscode-chan-face1-transparent.webp]] > > はい。ウチ、こういう確認とかは得意なんです。 > (この感じだと、わざとやったんですね... 油断できないなぁ...) ## Neovimの血を注ぐ > [!right-bubble] ![[neovim-chan-face1.webp]] > > さて、ここからはコーちゃんにわたしの血を注いでいくよ！ > [!left-bubble] ![[vscode-chan-face1-transparent.webp]] > > え...？ 血ですか...？ > (そんな物騒なことを...) > [!right-bubble] ![[neovim-chan-face1.webp]] > > ごめんごめん。言い方が悪かったね。正確に言うと、**[[VSCode]]のエディタに関するコントロールを[[Neovim]]に任せる**ってことなんだよ。 > [!left-bubble] ![[vscode-chan-face1-transparent.webp]] > > ？？？ > [[VSCode]]を使うのに[[Neovim]]が出てくるんですか？ > [!right-bubble] ![[neovim-chan-face1.webp]] > > そうそう。初めての人に話すといつもビックリされるんだけど、**[NeovimはRPC APIを通してUIの実装を別のクライアントに任せることができる](https://neovim.io/doc/user/ui.html)**んだよ。 > [!left-bubble] ![[vscode-chan-face1-transparent.webp]] > > え！？ > [!right-bubble] ![[neovim-chan-face1.webp]] > > つまり、ユーザーが[[VSCode]]に対して操作をしたら、RPC APIを通してそれを[[Neovim]]に伝え、[[Neovim]]が内容を編集することで、あたかも**[[VSCode]]のエディタを[[Neovim]]として使っているかのような体験**を与えられるんだよ！ > [!left-bubble] ![[vscode-chan-face1-transparent.webp]] > > [[Neovim]]にそんな機能があったんですね...。しかも、[[VSCode]]でその連携ができたなんて... 自分ごとなのにウチ、なにも知らなかったです...。 > (つまり... ==[[Neovim]]に興味ない方は本章を飛ばしてもよさそうですね。==) ### [[VSCode Neovim]]のインストール > [!right-bubble] ![[neovim-chan-face1.webp]] > > この機能を使うには、RPC APIを通した連携ができるように[[VSCode Neovim]]をインストールする必要があるよ。似た名前のもので[[VSCodeVim]]というのもあるから間違えないように気をつけてね。 <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"> VSCode Neovim - Visual Studio Marketplace </div> <div class="link-card-v2-content"> Extension for Visual Studio Code - Vim mode for VSCode, powered by Neovim </div> <img class="link-card-v2-image" src="https://asvetliakov.gallerycdn.vsassets.io/extensions/asvetliakov/vscode-neovim/1.18.22/1747928565527/Microsoft.VisualStudio.Services.Icons.Default" /> <a href="https://marketplace.visualstudio.com/items?itemName=asvetliakov.vscode-neovim"></a> </div> > [!left-bubble] ![[vscode-chan-face1-transparent.webp]] > > [[VSCodeVim]]は[[Neovim]]をバックエンドとして利用するのではなく、あくまで[[Vim]]っぽい動きを提供する[[VSCode Extension]]なんですね。 > [!right-bubble] ![[neovim-chan-face1.webp]] > > そうそう。だから、**[[Neovim]]は使ってないけど、[[VSCode]]でも[[Vim]]のキーバインドや、有名な[[Vimプラグイン]]のような機能がほしい**という人にはオススメなんだよ。 > [!left-bubble] ![[vscode-chan-face1-transparent.webp]] > > なるほど...。ウチのところにも『[[Vim]]のあの機能ないんですか？』って質問が時々くるので、次に質問されたときは相手の状況にあわせて紹介してみますね。 ### VSCodeの設定 > [!right-bubble] ![[neovim-chan-face1.webp]] > > [[VSCode]]の設定ファイルに書く[[VSCode Neovim]]の設定は1つだけだよ。 ```json // settings.json { "extensions.experimental.affinity": { "asvetliakov.vscode-neovim": 1 }, } ``` > [!left-bubble] ![[vscode-chan-face1-transparent.webp]] > > この設定はたしか... [[VSCode Extension]]を[[ワークスペース (VSCode)|ワークスペース]]管理とは別プロセスとして動かす設定ですね。試験的機能なのでドキュメントにも記載が少ないのにご存知とは流石です。 > [!right-bubble] ![[neovim-chan-face1.webp]] > > うんうん。[[Vimmer]]としてパフォーマンスへの意識は大事だからね！ `Open Process Explorer` コマンドでProcess Explorerを開くと、ちゃんと別プロセスで動いていることも確認できるよ。 ![[20250601_20_59_16.webp|frame]] *Process Explorerの表示* ### Neovimの設定 > [!right-bubble] ![[neovim-chan-face1.webp]] > > ここからは[[Neovim]]の設定を調整していくよ！ > [!left-bubble] ![[vscode-chan-face1-transparent.webp]] > > [[VSCode Neovim]]のバックエンドは[[Neovim]]... ということだったので、**[[Neovim]]の設定がすべてそのまま使える**のでしょうか？ > [!right-bubble] ![[neovim-chan-face1.webp]] > > うんうん。そう思うよね。でも、思い出してみて。バックエンドは[[Neovim]]なんだけど、**UIの部分は[[VSCode]]**なんだよ。 > [!left-bubble] ![[vscode-chan-face1-transparent.webp]] > > あ... そうでしたね...。ということは、[[Neovim]]の設定から、**UIに関する部分を除外**しなければいけないということですね。 > [!right-bubble] ![[neovim-chan-face1.webp]] > > そうそう。UIに関する設定や[[Neovimプラグイン]]、[[LSP]]など[[VSCode]]に任せる機能はエラーが出ないように除外しなければいけないんだよ。 > [!left-bubble] ![[vscode-chan-face1-transparent.webp]] > > うぅ... 難しそうですね...。 #### LSPを無効化する > [!right-bubble] ![[neovim-chan-face1.webp]] > > [[LSP]]は[[VSCode]]で用意されているものを使えばいいから、[[Neovim]]の[[LSP]]設定は無効化しちゃおう。 ```lua -- lua/lsp.lua -- ★VSCode Neovimによる設定読み込みではない場合のみ、LSPを有効にする if not vim.g.vscode then vim.lsp.enable({ "bashls", "biome", -- 中略 "vue_ls", "yamlls", }) end ``` > [!left-bubble] ![[vscode-chan-face1-transparent.webp]] > > この設定を入れなくても[[VSCode]]の機能は使えそうですね。ただ、ファイルを開いたタイミングで[[Neovim]]の[[LSPクライアント]]が起動してしまい、そこから別の[[Language Server]]も機能してしまう... ということですよね？ > [!right-bubble] ![[neovim-chan-face1.webp]] > > そうそう。使わない[[LSPクライアント]]や[[Language Server]]が無駄に動いちゃってパフォーマンスが落ちちゃうんだよ。 ### lazy.nvimで不要なプラグインを無効化する > [!right-bubble] ![[neovim-chan-face1.webp]] > > [[Neovim]]のプラグインマネージャーは何を使っているかな？ わたしは[[lazy.nvim]]を使っているから、ここでは[[lazy.nvim]]でプラグインの有効/無効を切り替える方法を紹介するよ！ > [!left-bubble] ![[vscode-chan-face1-transparent.webp]] > > うぅ... 全然分からないので、ネオちゃんにおまかせします...。 > [!right-bubble] ![[neovim-chan-face1.webp]] > > うんうん。任せてよ！ まずは[[lazy.nvim]]の`setup`関数に `defaults.cond` を指定してみよう！ ```lua -- lua/plugin.lua require("lazy").setup({ spec = { { import = "plugins" }, }, diff = { cmd = "terminal_git" }, change_detection = { notify = false, }, defaults = { -- ★これを追加 cond = function() -- VSCode Neovimからの起動でない場合のみ true を返す return not vim.g.vscode end, }, }) ``` > [!left-bubble] ![[vscode-chan-face1-transparent.webp]] > > なるほど...。`defaults.cond` に指定した関数が `true` を返す場合のみ、[[lazy.nvim]]が[[Neovimプラグイン]]を有効化するということですか？ > [!right-bubble] ![[neovim-chan-face1.webp]] > > そうそう。[[lazy.nvim]]のドキュメントでも、[condを指定するのはVSCodeなどから起動するときにデフォルトでプラグインを無効化するため](https://lazy.folke.io/configuration)って書いてあるよ。 > [!left-bubble] ![[vscode-chan-face1-transparent.webp]] > > あれ... でもそれだと、[[VSCode Neovim]]から起動したときは[[Neovimプラグイン]]を使えないということになっちゃいませんか？ > [!right-bubble] ![[neovim-chan-face1.webp]] > > 大丈夫だよ！ [[VSCode Neovim]]で使いたい[[Neovimプラグイン]]の個別設定で `cond = true` を指定してあげればいいんだよ！ ```lua -- lua/plugins/lasterisk.lua return { "rapan931/lasterisk.nvim", -- ★これを追加すると VSCode Neovim からの起動でも有効になる cond = true, } ``` > [!left-bubble] ![[vscode-chan-face1-transparent.webp]] > > なるほど...。 うまく出来ていますね。でも、慣れるまでは**どのプラグインを[[VSCode Neovim]]で有効にするかの判断が難しそう**ですね。 > [!right-bubble] ![[neovim-chan-face1.webp]] > > うんうん。慣れないと難しいと思うよ。[[📕使ったことのあるNeovimプラグイン一覧]] や [[📕使ったことのあるVimプラグイン一覧]] に [[VSCode Neovim]]で有効にしているかどうかも載せてあるから、 もしよければ参考にしてみてね。 ### キーマップの調整 > [!right-bubble] ![[neovim-chan-face1.webp]] > > 本章のラストはキーマップの設定だよ！ > [!left-bubble] ![[vscode-chan-face1-transparent.webp]] > > キーマップの設定... というと[[keybindings.json]]に設定を書くのでしょうか？ それとも、バックグラウンドが[[Neovim]]なので、[[Neovim]]の設定ファイルに書くのですか？ > [!right-bubble] ![[neovim-chan-face1.webp]] > > コーちゃんも鋭くなってきたね！ 基本的には **[[Neovim]]のキーマップファイルに書かれた設定**が使われるよ！ > [!left-bubble] ![[vscode-chan-face1-transparent.webp]] > > なるほど...。[[Neovim]]でちゃんとキーマップを設定しておけば、[[VSCode Neovim]]のために手間を掛ける必要はないのですね。よかったです。 > [!right-bubble] ![[neovim-chan-face1.webp]] > > うんうん。ところが、そうもいかないんだよね。 > [!left-bubble] ![[vscode-chan-face1-transparent.webp]] > > え...？ #### UIに関するキーマップを別で設定する > [!right-bubble] ![[neovim-chan-face1.webp]] > > コーちゃんも知ってのとおり、[[VSCode Neovim]]では[[VSCode]]がUIを担当しているよね。だから、[[Neovim]]向けのキーマップだと結構不都合が出てくるんだよ。 > [!left-bubble] ![[vscode-chan-face1-transparent.webp]] > > あ... そこまでは上手く連携してくれないんですね。残念です。 > [!right-bubble] ![[neovim-chan-face1.webp]] > > そうそう。だから[[Neovim]]のキーマップファイルに追加の設定が必要だよ。一般的な設定をいくつか書いておくね！ ```lua -- lua/keymaps.lua if vim.g.vscode then local vscode = require("vscode") -- 前後の変更点(Git)に移動 vim.keymap.set("n", "<space>j", function() vscode.action("workbench.action.editor.nextChange") end) vim.keymap.set("n", "<space>k", function() vscode.action("workbench.action.editor.previousChange") end) -------------------------------------------------------------- -- VSCodeのsettings.jsonにも設定が必要 (Neovim以外のタブの切り替え) -------------------------------------------------------------- -- 左のタブへ移動 vim.keymap.set("n", "<Space>l", function() vscode.action("workbench.action.nextEditorInGroup") end) -- 右のタブへ移動 vim.keymap.set("n", "<Space>h", function() vscode.action("workbench.action.previousEditorInGroup") end) -- 現在のタブを閉じる vim.keymap.set("n", "<Space>q", function() vscode.action("workbench.action.closeActiveEditor") end) -- 現在のタブ以外をすべて閉じる vim.keymap.set("n", "<space>w", function() vscode.action("workbench.action.closeOtherEditors") end) -- fold/unfold vim.keymap.set("n", "zc", function() vscode.action("editor.fold") end) vim.keymap.set("n", "zo", function() vscode.action("editor.unfold") end) end ``` > [!left-bubble] ![[vscode-chan-face1-transparent.webp]] > > `vim.g.vscode` は[[VSCode Neovim]]からの起動判定だったと思いますが、`vscode.action` というのは[[VSCode]]のコマンドを実行する関数なのでしょうか？ > [!right-bubble] ![[neovim-chan-face1.webp]] > > そうそう。`vscode.action(commandID)` という形で[[VSCode]]のコマンドを非同期に実行できるんだよ。他にも[10近いメソッドが使える](https://github.com/vscode-neovim/vscode-neovim?tab=readme-ov-file#%EF%B8%8F-api)けど、ほとんどの場合は `vscode.action` だけ覚えておけばいいんじゃないかな。 > [!left-bubble] ![[vscode-chan-face1-transparent.webp]] > > [[VSCode]]のcommandIDは、キーボードショートカットの設定で右クリックメニューからクリップボードにコピーできるので、それを利用すればよさそうですね。 ![[20250602_00_22_15.webp|frame]] *コマンド名の右クリックメニューから `Copy Command ID` を選択する* #### エディタ以外で利用するホットキーを設定する > [!left-bubble] ![[vscode-chan-face1-transparent.webp]] > > ネオちゃん。さっき見せてくれたキーマップ設定なんですけど、『VSCodeのsettings.jsonにも設定が必要』と書かれているのはどういう意味なんですか？ ```lua -------------------------------------------------------------- -- VSCodeのsettings.jsonにも設定が必要 (Neovim以外のタブの切り替え) -------------------------------------------------------------- -- 左のタブへ移動 vim.keymap.set("n", "<Space>l", function() vscode.action("workbench.action.nextEditorInGroup") end) ``` > [!right-bubble] ![[neovim-chan-face1.webp]] > > うんうん。すっかり説明を忘れてたけど、これはとても大事なポイントなんだよ！ > [!left-bubble] ![[vscode-chan-face1-transparent.webp]] > > 今までの感じだと、**エディタがアクティブではないタブでも、同じショートカットキーで動作するようにするため**ですかね？ ![[20250602_00_41_23.webp|frame]] *エディタがないタブではNeovimのキーマップは効かない* > [!right-bubble] ![[neovim-chan-face1.webp]] > > そうそう。だからこういう風に[[keybindings.json]]にも設定しなければいけないんだよ。 ```json // keybindings.json { // 次/前のタブへ移動 // Neovimでも設定が必要 (Neovimエディタのタブ切り替え) { "key": "space l", "command": "workbench.action.nextEditorInGroup", "when": "!inputFocus" }, { "key": "space h", "command": "workbench.action.previousEditorInGroup", "when": "!inputFocus" }, } ``` > [!left-bubble] ![[vscode-chan-face1-transparent.webp]] > > なるほど... あれ、でも[[VSCode]]でキーマップ設定してしまえば、わざわざ[[Neovim]]の方でキーマップしなくてもいいのではないでしょうか？ ```lua -------------------------------------------------------------- -- ★この設定はいらないのでは？？？ -------------------------------------------------------------- -- 左のタブへ移動 vim.keymap.set("n", "<Space>l", function() vscode.action("workbench.action.nextEditorInGroup") end) -- 右のタブへ移動 vim.keymap.set("n", "<Space>h", function() vscode.action("workbench.action.previousEditorInGroup") end) ``` > [!right-bubble] ![[neovim-chan-face1.webp]] > > うんうん。そう思うよね。せっかくだから、そのように設定して試してみてはどうかな？ > [!left-bubble] ![[vscode-chan-face1-transparent.webp]] > > そうですね。たまには手を動かして確認してみますね。[[Neovim]]側の設定を消して... [[VSCode]]設定の `when` もいらなそうですね。 ```json { "key": "space l", "command": "workbench.action.nextEditorInGroup" // "when": "!inputFocus" }, { "key": "space h", "command": "workbench.action.previousEditorInGroup" // "when": "!inputFocus" }, ``` > [!right-bubble] ![[neovim-chan-face1.webp]] > > ... > [!left-bubble] ![[vscode-chan-face1-transparent.webp]] > > あとは[[VSCode]]を再起動して... > [!right-bubble] ![[neovim-chan-face1.webp]] > > [[Neovim]]の設定を読み込み直すだけなら `Neovim: Restart Extension` を実行すれば[[VSCode]]の再起動は不要だよ！ > [!left-bubble] ![[vscode-chan-face1-transparent.webp]] > > ありがとうございます。そのコマンドを実行して... ファイルを複数開いて `<Space>h` で前のエディタに移動...と。うまくできました！ > [!right-bubble] ![[neovim-chan-face1.webp]] > > うんうん。じゃあ、[[Neovim]]の `keymaps.lua` で設定されている `<Space>b` は動くかな？ ```lua vim.keymap.set("n", "<Space>b", function() vim.cmd("normal ysiW*.") end, { silent = true }) ``` > [!left-bubble] ![[vscode-chan-face1-transparent.webp]] > > あれ... 動かないです...。さっきは動いていた気がするのですが、どうして...。 > [!right-bubble] ![[neovim-chan-face1.webp]] > > うんうん。戸惑っちゃうよね。[[ステータスバー (VSCode)|ステータスバー]]を見てみようか！ ![[20250602_02_52_51.webp|frame]] *Spaceキーを押した直後のステータスバー* > [!left-bubble] ![[vscode-chan-face1-transparent.webp]] > > あ...。もしかして、[[VSCode]]で `Space h` のような[[2キーバインド]]をしてしまったから、`Space`がすべて[[VSCode]]に奪われてしまったのでしょうか...？ > [!right-bubble] ![[neovim-chan-face1.webp]] > > 正解！ さっきコーちゃんが `when` をコメントアウトしちゃったから、**すべての場面で[[VSCode]]がSpaceキーを[[2キーバインド]]であると認識してしまった**んだよ！ ```json { "key": "space l", "command": "workbench.action.nextEditorInGroup" // "when": "!inputFocus" }, { "key": "space h", "command": "workbench.action.previousEditorInGroup" // "when": "!inputFocus" }, ``` > [!left-bubble] ![[vscode-chan-face1-transparent.webp]] > > なるほど...。この `"when": "!inputFocus"` にはそういう意味があったんですね。これなら入力しているときやエディタでは有効にならないから、Spaceが[[2キーバインド]]と扱われなくてすむ...というわけですね。 > [!right-bubble] ![[neovim-chan-face1.webp]] > > そうそう。だから、エディタのキーバインドは[[Neovim]]の方でキーマップする必要があるんだよ！ > [!left-bubble] ![[vscode-chan-face1-transparent.webp]] > > (Spaceの[[2キーバインド]]ではなく、`Cmd+Tab` などにすればこのような心配をしなくてもすみそうだけど... そこはネオちゃんのこだわりがあるんだろうなぁ...。) #### デフォルトでは利用できないキーマップ > [!right-bubble] ![[neovim-chan-face1.webp]] > > 一部のキーマップは[[VSCode]]の[[keybindings.json]]に設定を追加しないと使えないから気をつけてね。 > [!left-bubble] ![[vscode-chan-face1-transparent.webp]] > > そういえば、[[Neovim]]で設定した `<C-CR>` のキーマップが効かなくて悩んでいました...。 > [!right-bubble] ![[neovim-chan-face1.webp]] > > うんうん。**修飾キーとアルファベット数字以外の同時押しは、一部を除いて無効化されている**から、以下のような設定が必要になるんだよ！ ```json // keybindings.json { // Ctrl + Enter を VSCode Neovimで有効にする { "command": "vscode-neovim.send", "key": "ctrl+enter", "when": "editorTextFocus && neovim.mode != insert", "args": "<C-CR>" } } ``` > [!left-bubble] ![[vscode-chan-face1-transparent.webp]] > > 『[[📝VSCode Neovimで<C-CR>など利用できないキーバインドがある]]』で詳しく書かれていますね。後でしっかり読んでおきます。 ## 休憩 > [!right-bubble] ![[neovim-chan-face1.webp]] > > さて、基本は一通り終わったし、ここからはプラグインの話や細かい設定の話をしていこう！ > [!left-bubble] ![[vscode-chan-face1-transparent.webp]] > > お願いします... と言いたいところですが、ネオちゃん、そろそろ休憩にしませんか？ ウチ、もう頭まわらへんのどす。 > [!right-bubble] ![[neovim-chan-face1.webp]] > > うんうん。一気に詰め込みすぎは良くないよね！ それじゃあ続きは休憩してからにしようか！ > (コーちゃんは疲れていると京都弁になるのかな？) <p style="text-align: center; font-size: 150%; font-weight: bold; letter-spacing: .3rem;"> To Be Continued... </p> --- 1記事で終わらせるつもりでしたが、想像以上の分量になってしまったので続きは後編とします。軌跡シリーズ制作者の気持ちが分かる気がしました🤣 追記: 続きです。 <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風にカスタマイズする方法を後編で解説。Lazygitやoil.nvim風エクスプローラー、TODOコメントのハイライト、ファジーファインダーや全文検索のプレビューなど、拡張機能や設定例を詳しく紹介しています。VSCodeとNeovimの二刀流を目指す方や、エディタのカスタマイズに興味がある方はぜひご覧ください。</div> <img class="link-card-v2-image" src="https://publish-01.obsidian.md/access/35d05cd1bf5cc500e11cc8ba57daaf88/%F0%9F%93%98Articles/attachments/2025-06-15-1.webp" /> <a data-href="📘目指せ二刀流！ VSCodeをNeovim色にコーディネートしてみた -後編-" class="internal-link"></a> </div> %%[[📘目指せ二刀流！ VSCodeをNeovim色にコーディネートしてみた -後編-]]%%