## 経緯
仕事で[[Django]]を使うことになり、[[Django]]では[[Pylance]]がないと型推論が厳しく、[[VSCode]]でないと[[Pylance]]は使えない... ということで[[VSCode]]を使わざるを得なくなった。
[[GitHub Copilot]]が出てきた頃から[[VSCode]]の最低限の整備はしていたが、ガチの[[Django]]アプリケーション開発には少し心許ないので、この機会に[[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>
## テーマ
[[Zed]]っぽいインターフェースを提供してくれる[[Ayu Mirage Zed]]というテーマを使ってみる。
<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>
`settings.json`
```json
{
"workbench.colorTheme": "Ayu Mirage Zed",
"workbench.iconTheme": "ayu-mirage-zed",
}
```
セピアな感じの単色カラーとソースコードだけ際立っている感じが素敵。
![[20250518_21_33_55.webp]]
## LazyGit
[[VSCode]]から直接[[Lazygit]]を呼びだして操作できるようにする。[[LazyGit 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">
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.15/1742209861546/Microsoft.VisualStudio.Services.Icons.Default" />
<a href="https://marketplace.visualstudio.com/items?itemName=TomPollak.lazygit-vscode"></a>
</div>
設定はいくつかコツが必要。
`settings.json`
```json
{
"vim.normalModeKeyBindings": [
// Lazygitを開く
{
"before": ["<space>", "g"],
"commands": [ "lazygit-vscode.toggle" ]
},
],
// --------------------------------------------------------
// Lazygit
// --------------------------------------------------------
// 開くエディタが異なるので違う設定
"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"
}
}
```
## Neovimライクな検索
[[VSCode]]ではかなり限界があるけど、[[FindItFaster]]を使って最低限は実現できた。
<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>
![[20250519_00_15_41.webp|frame]]
*FindItFasterで検索*
`keybindings.json`
```json
// ワークスペースのファイルを開く (FindItFaster)
{
"key": "ctrl+j f",
"command": "find-it-faster.findFiles"
},
{
"key": "shift+cmd+j",
"command": "-find-it-faster.findFiles"
},
// ワークスペース全文検索 (FindItFaster)
{
"key": "ctrl+j g",
"command": "find-it-faster.findWithinFiles"
},
{
"key": "shift+cmd+u",
"command": "-find-it-faster.findWithinFiles"
},
```
設定難易度は結構高く、うまく設定しないと特にターミナルと共存ができない。最終的には0.0.37で追加された以下を有効にするのが良さそうという結論に。
`settings.json`
```json
{
// ターミナルを使う場合に競合を防ぐため
"find-it-faster.general.useTerminalInEditor": true
}
```
[[fzf]]の設定によっては[[VSCode]]内の表示は狭すぎるので、`.zshrc` などで以下のような設定にしておく。
```bash
export FZF_DEFAULT_OPTS="--reverse --border --height 50%"
# FindItFasterを実行するために開かれたターミナル起動時は異なる設定にする
if [[ $FIND_IT_FASTER_ACTIVE -eq 1 ]]; then
FZF_DEFAULT_OPTS="--reverse --border --height 90%"
fi
```
> `fzf` can also be configured through various environment variables. This extension does nothing to disable that behavior, so feel free to use those. You can also check whether `fzf` is running inside this extension by checking whether the `FIND_IT_FASTER_ACTIVE` environment variable is set.
> *[FindItFaster - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=TomRijndorp.find-it-faster)*
## エラーのインライン表示
[[Error Lens]]を使う。
<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">
Error Lens - Visual Studio Marketplace
</div>
<div class="link-card-v2-content">
Extension for Visual Studio Code - Improve highlighting of errors, warnings and other language diagnostics.
</div>
<img class="link-card-v2-image" src="https://usernamehw.gallerycdn.vsassets.io/extensions/usernamehw/errorlens/3.26.0/1745913515439/Microsoft.VisualStudio.Services.Icons.Default" />
<a href="https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens"></a>
</div>
`settings.json`
```json
{
"errorLens.messageTemplate": "$severity $message",
"errorLens.severityText": ["●", "●", "●", "●"],
}
```
[[Neovim]]の[[tiny-inline-diagnostic.nvim (Neovim)|tiny-inline-diagnostic.nvim]]っぽさが少し出てCOOL。
![[20250518_23_49_23.webp]]
## oil.nvimっぽいエクスプローラー
サイドバーのエクスプローラーではなく[[oil.nvim]]っぽいを使えるようにする。[[oil.code]]を使う。
<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>
![[20250519_08_41_39.webp|frame]]
*使うと分かるけど非常に再現度が高い*
`settings.json`
```json
{
"oil-code.hasNerdFont": true
}
```
`keybindings.json`
```json
{
// settings.jsonではうまくいかなかったので
{
"key": "ctrl+enter",
"command": "oil-code.selectVertical",
"when": "inputFocus && vim.mode == 'Normal'",
},
{
"key": "ctrl+p",
"command": "oil-code.preview",
"when": "inputFocus && vim.mode == 'Normal'",
}
}
```
## 断念したもの
### コマンドパレットを中央に表示
[[Apc Customize UI++]]を使う。
<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">
Apc Customize UI++ - Visual Studio Marketplace
</div>
<div class="link-card-v2-content">
Extension for Visual Studio Code - Advanced VSCode user interface customizations. Very experimental.
</div>
<img class="link-card-v2-image" src="https://drcika.gallerycdn.vsassets.io/extensions/drcika/apc-extension/0.4.1/1722637621659/Microsoft.VisualStudio.Services.Icons.Default" />
<a href="https://marketplace.visualstudio.com/items?itemName=drcika.apc-extension"></a>
</div>
エラーになる。
```error
Command 'Enable Apc extension' resulted in an error
command 'apc.extension.enable' not found
```
このissueの内容見る限り、[[VSCode Extension]]の根本部分が変更されたことにより、継続メンテがきつそうに見える。
<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">
Not working with the latest VS Code · Issue #230 · drcika/apc-extension
</div>
<img class="link-card-v2-image" src="https://opengraph.githubassets.com/1af3d40ef2a5accd3c7f2a1229bba2e40f080bcca285bbfea5851be8b50d5333/drcika/apc-extension/issues/230" />
<a href="https://github.com/drcika/apc-extension/issues/230#issuecomment-2392210811"></a>
</div>
諦めたほうが良さそう。