Angular Clicker: Angular Click-to-Code

Version: Portugues Espanhol Ingles

Portugues

Sumario: Visao geral | Recursos | Requisitos | Configuracao automatica | Uso manual | Comandos | Fluxo tecnico | Limitacoes | Notas de versao

Visao geral

Extensao para projetos Angular 8+ (View Engine) que abre o arquivo do componente no VS Code ao clicar com ALT no navegador.

Recursos

• Abertura de arquivo e linha via protocolo vscode://.
• Atalho ALT para HTML e ALT + SHIFT para preferir arquivo .ts.
• Comando de setup que injeta configuracao de build e inicializacao do inspector.

Requisitos

• Projeto Angular 8+.
• ng serve em ambiente de desenvolvimento.
• Uso de @angular-builders/custom-webpack para injetar data-source-path.

Configuracao automatica

1. Abra o projeto Angular no VS Code.
2. Execute Angular Clicker: Setup Angular Project.
3. Rode npm install e reinicie o ng serve.

Uso manual

O inspector no navegador destaca o elemento com ALT e envia o caminho do arquivo via vscode://.

Comandos

• Angular Clicker: Open File.
• Angular Clicker: Setup Angular Project.

Fluxo tecnico

1. O build injeta data-source-path nas tags HTML.
2. O injector.js captura ALT + clique e redireciona para o VS Code.
3. A extensao abre o arquivo e posiciona o cursor na linha informada.

Limitacoes

• Nao funciona em producao.
• Depende de configuracao do build para injetar data-source-path.

Notas de versao

• 0.0.1 Configuracao inicial do handler e do setup.

Espanhol

Sumario: Resumen | Funciones | Requisitos | Configuracion automatica | Uso manual | Comandos | Flujo tecnico | Limitaciones | Notas de version

Resume

Extension para proyectos Angular 8+ (View Engine) que abre el archivo del componente en VS Code al hacer clic con ALT en el navegador.

Funciones

• Apertura de archivo y linea via protocolo vscode://.
• ALT para HTML y ALT + SHIFT para preferir .ts.
• Comando de setup que inyecta configuracion de build e inicializacion del inspector.

Requisitos

• Proyecto Angular 8+.
• ng serve en entorno de desarrollo.
• Uso de @angular-builders/custom-webpack para inyectar data-source-path.

Configuracion automatica

1. Abra el proyecto Angular en VS Code.
2. Ejecute Angular Clicker: Setup Angular Project.
3. Ejecute npm install y reinicie ng serve.

Uso manual

El inspector en el navegador resalta el elemento con ALT y envia la ruta via vscode://.

Comandos

• Angular Clicker: Open File.
• Angular Clicker: Setup Angular Project.

Flujo tecnico

1. El build inyecta data-source-path en las etiquetas HTML.
2. injector.js captura ALT + clic y redirige a VS Code.
3. La extension abre el archivo y posiciona el cursor en la linea indicada.

Limitaciones

• No funciona en produccion.
• Depende de la configuracion del build para inyectar data-source-path.

Notas de version

• 0.0.1 Configuracion inicial del handler y del setup.

Ingles

Sumario: Overview | Features | Requirements | Automatic setup | Manual usage | Commands | Technical flow | Limitations | Release notes

Overview

Extension for Angular 8+ (View Engine) projects that opens the component file in VS Code when you ALT-click in the browser.

Features

• File and line opening via vscode://.
• ALT for HTML and ALT + SHIFT to prefer .ts.
• Setup command that injects build config and inspector initialization.

Requirements

• Angular 8+ project.
• ng serve in development.
• @angular-builders/custom-webpack to inject data-source-path.

Automatic setup

1. Open the Angular project in VS Code.
2. Run Angular Clicker: Setup Angular Project.
3. Run npm install and restart ng serve.

Manual usage

The browser inspector highlights the element with ALT and sends the path via vscode://.

Commands

• Angular Clicker: Open File.
• Angular Clicker: Setup Angular Project.

Technical flow

1. The build injects data-source-path into HTML tags.
2. injector.js captures ALT + click and redirects to VS Code.
3. The extension opens the file and positions the cursor at the line.

Limitations

• Does not run in production.
• Requires build configuration to inject data-source-path.

Release notes

• 0.0.1 Initial handler and setup.