[[better-ts-errors.nvim]]を試してみる。以前にも試したがその時は導入しなかった。理由も忘れたので今回はその辺も兼ねて。
## インストール
[[lazy.nvim]]で以下を設定。
```lua
{
"OlegGulevskyy/better-ts-errors.nvim",
dependencies = { "MunifTanjim/nui.nvim" },
config = {
keymaps = {
toggle = "gdd",
go_to_definition = "gdx",
},
},
}
```
フォーマットには[[Prettier]]が必要らしいのでglobalにインストール。
```bash
mise use -g npm:prettier
```
## とりあえず
以下のコードを実験用に作成。
```ts
interface Human {
id: number;
name: string;
company: Company;
}
interface Company {
id: number;
name: string;
prefectures: Prefecture[];
}
interface Prefecture {
id: number;
number: string;
}
const tadashi = {
id: "1",
name: "tadashi-aikawa",
company: {
id: 1,
name: "MAMANSOFT",
prefectures: [
{ id: "100", name: "Tokyo" },
{ id: "101", name: "Kanagawa" },
],
},
} as Human;
console.log(tadashi);
```
[[better-ts-errors.nvim]]ナシでまずは表示してみる。
![[Pasted image 20241102202040.png|frame]]
*横に長くて見にくい*
[[better-ts-errors.nvim]]を使って表示してみる。
![[Pasted image 20241102202136.png|frame]]
*フォーマットやキーワードハイライトで把握しやすくなった*
## ハイライトカラーが見にくい
先の画像のハイライトが青い背景に緑の色になっていて見にくい。[[カーソル配下のハイライト情報を取得 (Neovim)|カーソル配下のハイライト情報を取得]]してみたところ `BufferDefaultCurrentADDED` となっていた。
[リポジトリのーコード](https://github.com/OlegGulevskyy/better-ts-errors.nvim/blob/fdca451849c196ece2754eb8ad98472e0e28d569/lua/better-ts-errors/diagnostics.lua?plain=1#L185)を確認すると、 [[ハイライトグループ (Vim)|ハイライトグループ]]は変更できなそう。
```lua
if prettified ~= nil then
for _, range in ipairs(prettified) do
local hl_group = "BufferDefaultCurrentADDED"
for i = (range.line_start - 1), (range.line_end + 1) do
vim.api.nvim_buf_add_highlight(popup.get_buffnr(), -1, hl_group, i, range.indentation, popup.get_width())
end
end
end
```
しかし、以下のように[[ハイライトグループ (Vim)|ハイライトグループ]]の設定を変更しても、[[TypeScript]]のファイルを開くと別の設定で上書きされてしまう。
```lua
vim.api.nvim_set_hl(0, "BufferDefaultCurrentADDED", { bg = "#888888", fg = "#efef33" })
```
`BufferDefaultCurrentADDED`のカラーを使うべきかも疑問なので、forkして[[ハイライトグループ (Vim)|ハイライトグループ]]の名前だけ変更することにした。
### better-ts-errors.nvimをforkする
forkしたリポジトリ。
<div class="link-card">
<div class="link-card-header">
<img src="https://github.githubassets.com/favicons/favicon.svg" class="link-card-site-icon"/>
<span class="link-card-site-name">GitHub</span>
</div>
<div class="link-card-body">
<div class="link-card-content">
<p class="link-card-title">GitHub - tadashi-aikawa/better-ts-errors.nvim</p>
<p class="link-card-description">Contribute to tadashi-aikawa/better-ts-errors.nvim development by creating an account on GitHub.</p>
</div>
<img src="https://opengraph.githubassets.com/feeefab2579a30f8e7784a5791980c2631b82cafd56c52d82fbd1132d8b123fc/tadashi-aikawa/better-ts-errors.nvim" class="link-card-image" />
</div>
<a href="https://github.com/tadashi-aikawa/better-ts-errors.nvim"></a>
</div>
`BetterTsErrorsPrettified`を定義。
```diff
if prettified ~= nil then
for _, range in ipairs(prettified) do
- local hl_group = "BufferDefaultCurrentADDED"
+ local hl_group = "BetterTsErrorsPrettified"
for i = (range.line_start - 1), (range.line_end + 1) do
vim.api.nvim_buf_add_highlight(popup.get_buffnr(), -1, hl_group, i, range.indentation, popup.get_width())
end
end
end
```
[[lazy.nvim]]の設定変更。
```diff
{
- "OlegGulevskyy/better-ts-errors.nvim",
+ "tadashi-aikawa/better-ts-errors.nvim",
dependencies = { "MunifTanjim/nui.nvim" },
config = {
keymaps = {
toggle = "gdd",
go_to_definition = "gdx",
},
},
}
```
[[ハイライトグループ (Vim)|ハイライトグループ]]の設定も変更。
```lua
vim.api.nvim_set_hl(0, "BetterTsErrorsPrettified", { fg = "#ef7878" })
```
### 変更コミット
https://github.com/tadashi-aikawa/better-ts-errors.nvim/commit/ea0a48bb0a2a50937184b9f839e6dad4a6830faf
> [!note]
> [[StyLua]]がかかってしまったので該当箇所以外にも差分が多数存在する...
### 動作確認
`BetterTsErrorsPrettified`の設定がちゃんと反映されており見やすくなった。
![[Pasted image 20241102210217.png]]
## その他
今のところ簡単なコードでしか動作確認していないため、実際のリアルコードと遭遇したあとに問題が生じて利用しなくなる可能性はある。