☀️Yang's Garden

最近的笔记

查看对应语言的高两组

2024年11月21日13分钟阅读

GitHub - nvim-treesitter/playground: Treesitter playground integrated into Neovim

  • :Inspect显示光标下的高亮组
  • :InspectTree显示已解析的语法树（“TSPlayground”）
  • :EditQuery打开实时查询编辑器 (Nvim 0.10+)

理解 Neovim 中不同高亮组（Highlight Groups）之间的关系确实有些复杂，尤其是在同时使用 Vim 通用高亮组、Treesitter 高亮组 和 LSP 语义高亮组 的情况下。让我帮助您逐步理清这些概念，并解释您在使用 :Inspect 命令后看到的输出。

1. Neovim 高亮组概述

Neovim 的高亮系统由多个层次组成，每个层次负责不同粒度和精度的语法高亮：

  1. Vim 通用高亮组（Vim General Highlight Groups）
  2. Treesitter 高亮组（Treesitter Highlight Groups）
  3. LSP 语义高亮组（LSP Semantic Highlight Groups）

每个层次的高亮组可以相互覆盖，决定了最终显示的颜色和样式。

2. 您的 :Inspect 输出解析

您在 Neovim 中将光标放在 person 上执行 :Inspect 命令后，得到以下输出：

const { firstName, age } = person;
 
Treesitter
  - @variable.javascript links to @variable javascript
 
Semantic Tokens
  - @lsp.type.variable.javascript links to @variable priority: 125
  - @lsp.mod.readonly.javascript links to Constant priority: 126
  - @lsp.typemod.variable.readonly.javascript links to @lsp priority: 127
 
Extmarks
  - LspReferenceText vim_lsp_references

分解输出内容

  1. Treesitter 高亮组

    • @variable.javascript 链接到 @variable

  2. Semantic Tokens（LSP 语义高亮组）

    • @lsp.type.variable.javascript 链接到 @variable，优先级：125
    • @lsp.mod.readonly.javascript 链接到 Constant，优先级：126
    • @lsp.typemod.variable.readonly.javascript 链接到 @lsp，优先级：127

  3. Extmarks

    • LspReferenceText 链接到 vim_lsp_references

理解每一部分

a. Treesitter 高亮组

  • @variable.javascript：
    • 描述：这是一个由 Treesitter 定义的高亮组，用于标识 JavaScript 中的变量。
    • 链接：它被链接到通用的 @variable 高亮组。这意味着 @variable.javascript 会继承 @variable 的样式。

b. Semantic Tokens（LSP 语义高亮组）

  • @lsp.type.variable.javascript：
    • 描述：LSP 提供的高亮组，用于标识 JavaScript 中的变量类型。
    • 链接：链接到 @variable，并设置了优先级 125。
  • @lsp.mod.readonly.javascript：
    • 描述：LSP 提供的高亮组，用于标识 JavaScript 中的只读变量修饰符。
    • 链接：链接到 Constant，并设置了优先级 126。
  • @lsp.typemod.variable.readonly.javascript：
    • 描述：LSP 提供的高亮组，用于标识 JavaScript 中的只读变量类型修饰符。
    • 链接：链接到 @lsp，并设置了优先级 127。

c. Extmarks

  • LspReferenceText：
    • 描述：用于标识 LSP 参考的文本。
    • 链接：链接到 vim_lsp_references，这是一个 Vim 通用的高亮组。

优先级解释

  • 优先级：数字越高，优先级越高，表示该高亮组会覆盖优先级较低的高亮组。
    • @lsp.typemod.variable.readonly.javascript（优先级：127） > @lsp.mod.readonly.javascript（优先级：126） > @lsp.type.variable.javascript（优先级：125）

3. 高亮组层级关系

理解不同层级高亮组的优先级关系，有助于您更有效地配置主题：

  1. LSP 语义高亮组（最高优先级）
  2. Treesitter 高亮组
  3. Vim 通用高亮组（最低优先级）

具体关系

  • LSP > Treesitter > Vim
    • LSP 提供基于语义的高亮，最为精确，覆盖其他高亮组。
    • Treesitter 提供基于语法树的高亮，细粒度高于 Vim 通用高亮组。
    • Vim 提供基础的语法高亮，作为最后的覆盖层。

4. 配置高亮组的最佳实践

为了避免冲突并确保高亮效果符合预期，您可以遵循以下最佳实践：

a. 定义清晰的高亮组

为不同层级的高亮组定义明确的样式，并通过链接确保一致性。

b. 链接高亮组

将具体的 LSP 高亮组链接到 Treesitter 高亮组，而不是直接链接到 Vim 通用高亮组。这有助于保持层级关系和样式的一致性。

c. 确保配置顺序正确

先定义 Vim 通用高亮组，再定义 Treesitter 高亮组，最后链接 LSP 语义高亮组。这确保了高优先级的高亮组能够覆盖低优先级的高亮组。

d. 使用颜色调色板

通过定义统一的颜色调色板模块，便于管理和维护主题颜色。

5. 示例配置

以下是一个示例配置，展示如何正确设置和链接高亮组：

local p = require('your_palette_module')  -- 替换为您的调色板模块名称
 
-- 1. 定义 Vim 通用高亮组
vim.api.nvim_set_hl(0, "Identifier", { fg = p.wood, bg = "NONE" })
vim.api.nvim_set_hl(0, "Function", { fg = p.blue, bg = "NONE" })
vim.api.nvim_set_hl(0, "Keyword", { fg = p.fire, bold = true, bg = "NONE" })
vim.api.nvim_set_hl(0, "Comment", { fg = p.water, italic = true, bg = "NONE" })
vim.api.nvim_set_hl(0, "String", { fg = p.wood, bg = "NONE" })
vim.api.nvim_set_hl(0, "Type", { fg = p.earth, bg = "NONE" })
vim.api.nvim_set_hl(0, "Constant", { fg = p.metal, bg = "NONE" })
 
-- 2. 定义 Treesitter 高亮组
vim.api.nvim_set_hl(0, "@variable", { fg = p.wood, italic = false })
vim.api.nvim_set_hl(0, "@function", { fg = p.blue, bold = true })
vim.api.nvim_set_hl(0, "@class", { fg = p.metal, bold = true })
vim.api.nvim_set_hl(0, "@type", { fg = p.earth, italic = true })
vim.api.nvim_set_hl(0, "@constant", { fg = p.metal, bold = true })
 
-- 3. 链接 LSP 语义高亮组到 Treesitter 高亮组
vim.api.nvim_set_hl(0, "@lsp.typemod.variable.declaration", { link = "@variable" })
vim.api.nvim_set_hl(0, "@lsp.type.variable.javascript", { link = "@variable" })
vim.api.nvim_set_hl(0, "@lsp.mod.readonly.javascript", { link = "Constant" })
vim.api.nvim_set_hl(0, "@lsp.typemod.variable.readonly.javascript", { link = "@lsp" })
 
-- 4. 处理 Extmarks（如引用高亮）
vim.api.nvim_set_hl(0, "LspReferenceText", { link = "vim_lsp_references" })
 
-- 其他高亮组配置...
vim.api.nvim_set_hl(0, "Comment", { fg = p.water, italic = true })
vim.api.nvim_set_hl(0, "String", { fg = p.wood })
vim.api.nvim_set_hl(0, "Function", { fg = p.blue })
vim.api.nvim_set_hl(0, "Keyword", { fg = p.fire, bold = true })
vim.api.nvim_set_hl(0, "Type", { fg = p.earth })
vim.api.nvim_set_hl(0, "Constant", { fg = p.metal })

配置说明

  1. Vim 通用高亮组：为基础语法元素定义样式。
  2. Treesitter 高亮组：为更具体的语法元素定义样式。
  3. 链接 LSP 语义高亮组：将 LSP 提供的高亮组链接到 Treesitter 高亮组，确保 LSP 的样式覆盖 Treesitter 和 Vim 的样式。
  4. 处理 Extmarks：如引用高亮，确保它们链接到合适的高亮组。

6. 验证和调整

a. 使用 Treesitter Playground 插件

Tree-sitter Playground 是一个 Neovim 插件，提供交互式界面来查看代码的语法树和对应的高亮组。

安装

使用您的插件管理器安装 nvim-treesitter/playground。以下是使用 packer.nvim 的示例：

use {
  'nvim-treesitter/nvim-treesitter',
  run = ':TSUpdate'
}
 
use {
  'nvim-treesitter/playground',
  requires = 'nvim-treesitter/nvim-treesitter'
}

配置

确保您已配置并启用了 Treesitter 的高亮功能：

require'nvim-treesitter.configs'.setup {
  ensure_installed = { "javascript", "lua", "python", "rust", "typescript" }, -- 根据需要添加语言
  highlight = {
    enable = true,              -- 启用 Treesitter 高亮
    additional_vim_regex_highlighting = false, -- 禁用 Vim 的正则高亮，以避免冲突
  },
}

使用

  1. 打开 Playground 窗口：
    在 Neovim 中，执行命令：

    :TSPlaygroundToggle

    这将打开一个分屏窗口，展示当前文件的语法树和高亮组信息。

  2. 查看高亮组：
    将光标置于感兴趣的代码元素上，语法树会自动更新，显示该元素的高亮组。

b. 使用内置命令检查高亮组

将光标置于目标代码元素上，执行以下命令查看其对应的高亮组：

传统语法高亮

:echo synIDattr(synIDtrans(synID(line('.'), col('.'), 1)), 'name')

这将输出高亮组名称，例如 Identifier。

Tree-sitter 语法高亮

:echo luaeval("vim.treesitter.get_captures_at_cursor(0)[1]")

这将输出 Treesitter 或 LSP 提供的高亮组名称，例如 @variable 或 @lsp.typemod.variable.declaration。

c. 调整和优化

根据观察到的高亮效果，调整高亮组的颜色和样式。例如：

-- 定义 @variable 的高亮组
vim.api.nvim_set_hl(0, "@variable", { fg = p.wood, italic = false })
 
-- 链接 LSP 高亮组到 @variable
vim.api.nvim_set_hl(0, "@lsp.typemod.variable.declaration", { link = "@variable" })

如果您希望某些高亮组具有不同的样式，可以选择单独配置它们，而不是全部链接到同一个高亮组。

7. 实际应用示例

假设您有以下 JavaScript 代码：

const { firstName, age } = person;

高亮组应用过程

  1. Vim 通用高亮组

    • person 被标记为 Identifier。

  2. Treesitter 高亮组

    • person 被标记为 @variable，链接到 @variable 高亮组。

  3. LSP 语义高亮组

    • person 被标记为 @lsp.typemod.variable.declaration，链接到 @variable 高亮组，优先级：127。

最终效果

  • @lsp.typemod.variable.declaration（优先级最高）决定了 person 的最终样式，因为它覆盖了 Treesitter 和 Vim 的设置。
  • @variable 定义了变量的基础样式，LSP 高亮组继承并可能在此基础上添加样式（如加粗、斜体等）。

8. 常见问题解答

Q1. 为什么有多个高亮组关联到同一个代码元素？

答：不同的插件和解析器（如 Treesitter 和 LSP）为相同的代码元素提供不同层次和粒度的高亮组。它们之间的优先级决定了最终的显示效果。

Q2. 如何避免高亮组之间的冲突？

答：

  • 优先配置顺序：确保高优先级的高亮组（如 LSP）在配置文件中后定义，覆盖低优先级的高亮组（如 Treesitter 和 Vim）。
  • 使用链接：将高优先级的高亮组链接到特定的高亮组，确保一致性和可维护性。

Q3. 如何自定义特定高亮组的颜色和样式？

答：通过 vim.api.nvim_set_hl 函数，您可以为特定高亮组设置颜色和样式。例如：

vim.api.nvim_set_hl(0, "@variable", { fg = p.wood, italic = false })
vim.api.nvim_set_hl(0, "@lsp.typemod.variable.declaration", { link = "@variable" })

Q4. 什么是 Extmarks？

答：Extmarks 是 Neovim 中的一种机制，用于在缓冲区中标记特定位置，常用于插件之间的交互。例如，LSP 参考（如代码引用、定义跳转等）可能会使用 Extmarks 来标记这些位置并应用相应的高亮效果。

总结

理解 Neovim 中不同层次的高亮组及其优先级关系，对于创建一致且美观的主题至关重要。通过以下步骤，您可以有效地管理和优化高亮配置：

  1. 定义清晰的高亮组：为 Vim、Treesitter 和 LSP 定义明确的高亮组样式。
  2. 链接高亮组：将 LSP 高亮组链接到 Treesitter 高亮组，以保持层级关系和样式一致性。
  3. 确保配置顺序：先定义通用高亮组，再定义 Treesitter 高亮组，最后链接 LSP 高亮组。
  4. 使用工具验证：利用 Treesitter Playground 和内置命令检查高亮组的应用，确保配置正确。
  5. 保持灵活性：根据需要为特定的高亮组设置独特的样式，而不是全部链接到同一个高亮组。

通过这些方法，您可以确保 Neovim 主题在各种语言和语法结构下，提供清晰、一致且美观的高亮效果。如果您有任何进一步的问题或需要更多的帮助，请随时告诉我！

关系图谱

反向链接

  • 无法找到反向链接