Pug LSP — Angular Template Intelligence

Full Angular Language Service support for Pug templates. Get the same IDE experience you'd have with HTML — but in .pug files.

Features

• Diagnostics — Real-time error detection for template expressions, bindings, and types
• Autocomplete — Component inputs/outputs, template variables, pipes, directives
• Hover — Type information and documentation on hover
• Go to Definition — Navigate from template bindings to component properties
• Find References — Find all usages across templates and components
• Rename — Rename symbols across .pug and .ts files

All powered by the official Angular Language Service — the same engine behind the Angular extension for HTML templates.

Requirements

• An Angular project (with angular.json and @angular/language-server installed)
• VS Code 1.95+
• Node.js 22+

The extension automatically detects your Angular project and resolves @angular/language-server from your project's node_modules or the VS Code Angular extension.

Setup

1. Install the extension
2. Open an Angular project that uses .pug templates
3. Make sure your components reference Pug files:

   @Component({
     templateUrl: './my-component.component.pug'
   })
   

4. For best results, enable strict template checking in your tsconfig.json:

   {
     "angularCompilerOptions": {
       "strictTemplates": true
     }
   }
   

Tip: If strictTemplates causes your build to hang, you can enable it only for the IDE by adding it to tsconfig.json and overriding it with "strictTemplates": false in tsconfig.app.json. The language server reads tsconfig.json, while ng serve/ng build uses tsconfig.app.json.

Supported Pug Syntax

Standard Pug features work as expected:

//- Tags, classes, IDs
h1.title#main Welcome

//- Angular bindings
input([ngModel]="name", (ngModelChange)="onNameChange($event)")

//- Structural directives
div(*ngIf="isVisible")
  ul
    li(*ngFor="let item of items") {{ item.name }}

//- Interpolation
p Hello, {{ user.firstName }}!

//- Event bindings
button((click)="onSave()") Save

Angular-specific attribute syntax ([prop], (event), [(banana)], *ngIf, #ref) is fully supported — both quoted and unquoted forms.

How It Works

Pug LSP acts as a translation proxy between VS Code and the Angular Language Service:

VS Code (.pug)  <-->  Pug LSP Server  <-->  Angular Language Server
                       Pug -> HTML
                       Source mapping
                       Position translation

1. Compiles Pug to HTML with a bidirectional source map
2. Feeds the HTML to @angular/language-server
3. Translates all positions and ranges between Pug and HTML coordinates

The compiled HTML files are cached in a .pug-lsp/ directory (auto-added to .gitignore).

Performance

The overhead is negligible:

• Pug compilation: Sub-millisecond for typical templates, cached per document
• Position translation: O(log n) binary search over source mappings
• Angular Language Server: Same process that powers the official Angular extension — no duplication

Known Limitations

• With strictTemplates: true, Angular may report false positives for *ngIf="expr | async" as localVar patterns on older Angular versions. Consider upgrading to Angular 18+ for improved type narrowing.
• The extension activates per-workspace. Multi-root workspaces use the first Angular project found.

License

MIT