Angular Touchbar: Cockpit is an interactive macOS Touch Bar dashboard and workflow accelerator for Angular developers. Control your dev server, "teleport" between component files, and fix imports—all from your keyboard's touch strip.
🌟 Key Features
🏎️ Dev Server Cockpit
Manage your local development environment without switching to the terminal:
- Serve: Execute
npx ng servein a dedicated background terminal. - Finish: Instantly terminate the active server process.
- Restart: One-tap restart for when the compiler gets stuck.
🌌 Component Teleport (Cyclic Navigation)
Stop hunting for files in the sidebar. The Teleport button cycles through your current component files in this order:
TS ➡️ HTML ➡️ SCSS/CSS ➡️ SPEC ➡️ TS
💡 Smart Import Fixer
When TypeScript "Cannot find name" errors are detected, a Quick Fix bulb automatically appears on your Touch Bar. Tap it to automatically resolve all missing imports in the current file.
📸 Code Snap Integration
Quickly generate beautiful code snippets for documentation or sharing. Highlighting code activates the Camera icon on your Touch Bar (requires the CodeSnap extension).
📋 Requirements
- OS: macOS (Hardware Touch Bar or Touché emulator).
- VS Code: v1.85.0 or higher.
- Angular CLI: Project must have
@angular/cliinstalled.
⚙️ Configuration
The extension automatically detects ngCockpitActive and ngCockpitHasImportErrors to show/hide relevant buttons dynamically.
Happy Coding! Developed with ❤️ for the Angular ecosystem.