Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>Signal HighlighterNew to Visual Studio Code? Get it now.
Signal Highlighter

Signal Highlighter

Cactus

|
24 installs
| (1) | Free
Highlight signals based on type
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

signal-highlighter

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):

{
  "signal-highlighter.signalFontColor": "#ffcc00"
}

This changes the highlight color to yellow.


Known Issues

  • ** 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:

"workbench.colorCustomizations": {
    "editorHint.foreground": "#ffffff1e"
  },

Enjoy!

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft