Skip to content

feat(language-service): add Angular-specific Inlay Hints (LSP 3.17)#66731

Closed
kbrilla wants to merge 1 commit intoangular:mainfrom
kbrilla:feat/inlay-hints
Closed

feat(language-service): add Angular-specific Inlay Hints (LSP 3.17)#66731
kbrilla wants to merge 1 commit intoangular:mainfrom
kbrilla:feat/inlay-hints

Conversation

@kbrilla
Copy link
Contributor

@kbrilla kbrilla commented Jan 23, 2026 •
edited
Loading

PR: feat(language-service): add Angular-specific Inlay Hints (LSP 3.17)

⚠️ Dependency

This PR depends on #66734 (feat(language-server): add shared workspace/configuration utilities) and must be merged after that PR.

Merge Order:

  1. First merge feat(language-server): add shared workspace/configuration utilities #66734 (workspace/configuration infrastructure)
  2. Then this PR can be merged

Description

Implements comprehensive Angular-specific Inlay Hints for the Angular Language Service, providing inline type annotations directly in template code. This feature achieves full parity with TypeScript's inlay hints while adding Angular-specific capabilities.

📍 Inlay Hints by Location

This PR implements 13 hint locations with full configuration:

  1. @for loop variables
  2. @if/@else if alias variables
  3. @let declarations
  4. Template references (#ref)
  5. Event bindings ((event))
  6. Property bindings ([property])
  7. Two-way bindings ([(model)])
  8. Pipes (| pipe)
  9. Function calls (parameter names)
  10. Arrow functions
  11. @switch expressions
  12. @defer triggers
  13. Host bindings (@HostListener/@HostBinding/host:)

🎯 TypeScript Parity Summary

TypeScript Option Angular Implementation Status
includeInlayVariableTypeHints forLoopVariableTypes, ifAliasTypes, letDeclarationTypes, referenceVariableTypes ✅
includeInlayVariableTypeHintsWhenTypeMatchesName variableTypeHintsWhenTypeMatchesName ✅
includeInlayParameterNameHints parameterNameHints ✅
includeInlayParameterNameHintsWhenArgumentMatchesName parameterNameHintsWhenArgumentMatchesName ✅
includeInlayFunctionParameterTypeHints arrowFunctionParameterTypes ✅
includeInlayFunctionLikeReturnTypeHints arrowFunctionReturnTypes ✅
interactiveInlayHints interactiveInlayHints ✅

🧪 Test Coverage

  • 95+ unit tests covering all hint types
  • LSP integration tests for end-to-end testing
  • Edge cases: nested blocks, generics, overloads, signals, required inputs

⚙️ Configuration

Configuration is fetched dynamically via LSP workspace/configuration request using the shared utilities from #66734, allowing settings to take effect immediately without restarting the language server.

🔄 Breaking Changes

None

📚 Related Issues

Closes #66730 (feat: Angular-specific Inlay Hints)

🤖 AI Disclosure

This PR was developed using Claude Opus 4.5 AI assistant under human orchestration and review by @kbrilla.

@pullapprove pullapprove bot requested review from josephperrott and kirjs January 23, 2026 20:22
@angular-robot angular-robot bot added detected: feature PR contains a feature commit area: build & ci Related the build and CI infrastructure of the project area: language-service Issues related to Angular's VS Code language service labels Jan 23, 2026
@ngbot ngbot bot added this to the Backlog milestone Jan 23, 2026
@kbrilla
Copy link
Contributor Author

kbrilla commented Jan 23, 2026

Will post some screenshots and tabral with VS Code extension later and will try to create stackblitz demo.

@kbrilla
Copy link
Contributor Author

kbrilla commented Jan 23, 2026 •
edited
Loading

I know ther are still some small bugs, will fix them today.

image image image image yeah i know event types need a bit work - will push fix later today image image image image image image image image image

@kbrilla kbrilla force-pushed the feat/inlay-hints branch 7 times, most recently from 2058ff5 to 9f669cf Compare January 23, 2026 22:12
@atscott
Copy link
Contributor

atscott commented Jan 23, 2026

Really cool! Would the readme be updated to include information about how to enable and configure this? I don’t see where any of the listed configuration options are used in the client or server. Should these be part of the configuration settings in the package.json?

atscott
atscott reviewed Jan 23, 2026
View reviewed changes
vscode-ng-language-service/server/src/handlers/inlay_hints.ts Outdated
// 1. Get TypeScript's inlay hints (for TS code in .ts files)
// This includes parameter names, return types, variable types, etc.
try {
const tsHints = languageService.provideInlayHints(
Copy link
Contributor

@atscott atscott Jan 23, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are these filtered on the client side then? Or do we need to be sure to pass the client config to the server?

Are inlay hints also not additive? We had to include the TS inlay hints because our hints from our server aren’t combined with hints from other hint providers (eg ts server)?

@kbrilla kbrilla force-pushed the feat/inlay-hints branch 2 times, most recently from 41bbbf4 to b42cde7 Compare January 24, 2026 08:43
kbrilla added a commit to kbrilla/angular that referenced this pull request Jan 24, 2026
@kbrilla
feat(language-server): add shared workspace/configuration utilities
3c0189a 
This commit adds infrastructure for features to request configuration from
the VS Code client using the LSP workspace/configuration protocol. This is
the preferred approach over CLI arguments because:

1. Configuration changes take effect immediately without restarting
2. Supports per-workspace and per-folder configuration
3. VS Code automatically merges settings from different scopes:
   - Default settings
   - User settings (global)
   - Workspace settings
   - Workspace folder settings
   - Language-specific settings

The new utilities include:
- getWorkspaceConfiguration: Request multiple config sections at once
- getConfigurationSection: Convenience wrapper for single sections
- flattenConfiguration: Flatten nested config to dot-notation keys

This infrastructure will be used by:
- Inlay hints feature (PR angular#66731)
- Document symbols feature (PR angular#66690)
@kbrilla kbrilla mentioned this pull request Jan 24, 2026
Closed
@kbrilla
Copy link
Contributor Author

kbrilla commented Jan 24, 2026

🔗 Dependency Update

This PR now depends on #66734 (feat(language-server): add shared workspace/configuration utilities).

Changes in this update:

  • Refactored to use shared utilities: Now imports getWorkspaceConfiguration and flattenConfiguration from the new shared config.ts
  • Reduced code duplication: ~60 lines of configuration handling code replaced with shared utilities

Merge Order:

  1. First merge feat(language-server): add shared workspace/configuration utilities #66734 (workspace/configuration infrastructure)
  2. Then this PR can be merged

The PR has been rebased onto the feat/workspace-configuration branch.

@kbrilla kbrilla closed this Jan 25, 2026
@kbrilla kbrilla mentioned this pull request Jan 26, 2026
Open
7 tasks
@angular-automatic-lock-bot
Copy link

angular-automatic-lock-bot bot commented Feb 25, 2026

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Feb 25, 2026
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Reviewers

@atscott atscott atscott left review comments

@josephperrott josephperrott Awaiting requested review from josephperrott

@kirjs kirjs Awaiting requested review from kirjs

Assignees

No one assigned

Labels

area: build & ci Related the build and CI infrastructure of the project area: language-service Issues related to Angular's VS Code language service detected: feature PR contains a feature commit

Projects

None yet

Milestone

Backlog

Development

Successfully merging this pull request may close these issues.

feat(language-service): add Angular-specific Inlay Hints (LSP 3.17)

2 participants

@kbrilla @atscott