fix: improve Angular component and 'this' keyword highlighting

- Add distinct highlighting for 'this' keyword using keyword color (orange)
  instead of member variable color (purple) to match JetBrains behavior
- Add Angular component support in HTML templates via @constructor.html
  and @type.html tree-sitter captures
- Add LSP semantic token support for 'this' keyword (@lsp.type.selfKeyword)
  and components (@lsp.type.component)

Fixes issues where:
- Angular components appeared white (default foreground) in HTML files
- The 'this' keyword had the same color as class member variables
This commit is contained in:
Claude 2025-11-15 08:54:05 +00:00
parent e5eb598ced
commit 8a6c101610
No known key found for this signature in database

View file

@ -310,6 +310,9 @@ return lush(function()
["@variable.parameter.builtin"] = { fg = p.constant, gui = "italic" },
["@variable.member"] = { fg = p.member_variable, gui = "italic" },
-- Special handling for 'this' keyword (should be distinct from member variables)
["@variable.builtin.this"] = { fg = p.keyword, gui = "italic" },
-- Constants
["@constant"] = { fg = p.constant },
["@constant.builtin"] = { fg = p.constant },
@ -349,6 +352,10 @@ return lush(function()
["@constructor.tsx"] = { fg = p.function_call }, -- Component names
["@constructor.jsx"] = { fg = p.function_call },
-- Angular specific (custom components in templates)
["@constructor.html"] = { fg = p.function_call }, -- Angular components in HTML
["@type.html"] = { fg = p.function_call }, -- Angular components that appear as types
-- Markup (Markdown, reStructuredText, etc.) - New standard
["@markup.strong"] = { gui = "bold" },
["@markup.italic"] = { gui = "italic" },
@ -425,6 +432,8 @@ return lush(function()
["@lsp.type.method"] = { fg = p.function_call },
["@lsp.type.macro"] = { fg = p.annotation },
["@lsp.type.decorator"] = { fg = p.annotation },
["@lsp.type.selfKeyword"] = { fg = p.keyword, gui = "italic" }, -- 'this' keyword in TypeScript/JavaScript
["@lsp.type.component"] = { fg = p.function_call }, -- Angular/React components
["@lsp.mod.deprecated"] = { gui = "strikethrough" },
["@lsp.mod.readonly"] = { gui = "italic" },