A VS Code extension to highlight Angular signals in your TypeScript code. The extension detects:
Explicitly typed variables (e.g., x: Signal<number> or x: WritableSignal<number>).
Direct calls to signal() or computed() in variable declarations.
Later assignments of variables to signal() or computed().
Property access signals, including this.someSignal, this.someSignal(), and this.complex.subSignal().
Signal usage in callbacks, like this.signalCallback(sig => sig());.
This makes it easier to spot reactive signal usage in your codebase at a glance.
Features
Highlights Signal Variables
Dynamically colorizes variables of type Signal<T> or Computed<T>.
Detects Inline Calls
Recognizes calls to signal() and computed() both in variable initializers and later assignments.
Detects Property Access Signals
Supports signals accessed via properties (this.someSignal) or object properties (this.complex.subSignal).
Signal Usage in Callbacks
Recognizes signal usages passed into callbacks and functions.
Flexible Coloring
Offers a configuration option so you can customize the highlight color to match your theme or preference.
Tip: The extension uses a TypeScript Plugin for deep semantic analysis. If you rename imports (e.g., import { signal as mySignal }), the extension will still detect them.
Requirements
VS Code 1.70.0 or later
The extension relies on APIs introduced in newer VS Code versions.
TypeScript 4.0+ (recommended)
Ensures compatibility with newer syntax.
TypeScript Plugin Enabled
The extension integrates with the TypeScript Language Server for precise signal detection.
No additional dependencies or Angular Language Service are required.
Extension Settings
This extension contributes the following setting(s):
Setting
Description
Default
signal-highlighter.signalFontColor
Configures the highlight font color for Angular signals. Accepts valid CSS color strings.
#dc8b46
Usage Example
Add the following to your VS Code user or workspace settings (settings.json):
** Was forced to leverage hints instead of message since ts-plugin library message diagnostic is showing it as an error problem **
Workaround: Reduce hint squiggy opacity:
Ctrl+Shift+P -> Open user Settings (JSON) -> Add the following:
