Creé una extensión de VSCode con Claude Code

Como implementamos Claude Code internamente, quise crear una herramienta útil para nuestro trabajo, así que desarrollé una extensión de VSCode que supervisa errores tipográficos, etiquetas faltantes y otros problemas mientras escribo en el editor.

Compilé el proceso desde la idea inicial hasta la implementación.

Antecedentes

Durante la implementación, sufrimos muchos errores por descuido, como olvidar agregar alt="" o confundir caracteres de ancho completo con ancho medio.

Imaginé que sería genial tener una herramienta como esta, así que decidí presentar la idea primero a través de un formato de diálogo conversacional.

Quería crear una aplicación que prevenga errores por descuido, por ejemplo, una que destaque diferencias en el navegador o señale errores en el código.

• Lista de verificación de revisión de código | Lista de verificación personalizada para confirmar antes de enviar
• Diff visual HTML/CSS | Pega dos códigos y visualiza las diferencias
• Comprobador de diferencias de capturas de pantalla | Compara píxeles de imágenes antes y después de la corrección
• Revisor de errores HTML/CSS en directo | AI identifica problemas solo pegando código

Recibió algunas sugerencias, así que decidí presentar solicitudes adicionales

¡Es increíble que AI identifique los problemas! Pero en lugar de pegar código, quería monitoreo en tiempo real en VSCode o la capacidad de revisar después de completar el trabajo.

Se decidió crear una extensión de VSCode en lugar de una aplicación de navegador.

El monitoreo en tiempo real parecía tener costos API elevados, así que adoptamos revisión posterior a la ejecución mediante comandos.

Inicialmente se sugirió Claude API, pero como requiere suscripción de pago, optamos por usar GitHub Copilot, que ya teníamos contratado.

En resumen, es una extensión que obtiene git diff después del trabajo, envía un mensaje a GitHub Copilot y detecta automáticamente errores descuidados.

Cómo funciona

Al terminar el trabajo, haga clic en el botón de la barra de estado
↓
Obtener git diff HEAD y comparar diferencias
↓
Analizar diff y extraer archivos modificados y números de línea
↓
Enviar diff + mensaje a GitHub Copilot (API vscode.lm)
↓
Copilot devuelve resultados de revisión en formato JSON
↓
Mostrar resultados de revisión en la vista de VSCode
↓
Hacer clic en el número de línea de una observación salta al archivo y línea correspondientes
↓
Acumular tendencias detectadas por AI

La pantalla se ve así.

Una vez que hayas completado el trabajo, antes de hacer commit en GitHub, activa la extensión Code Review. Te mostrará las diferencias respecto al commit anterior y verificará que no haya nada fuera de lugar.

Las tendencias detectadas por IA se almacenan en el almacenamiento, lo que te permite visualizar qué tipos de errores cometes con mayor frecuencia.

El prompt es algo como esto.

チェック観点:
- テキスト内の不自然なスペース（全角・半角スペースの混入など）
- 大文字・小文字の不統一（クラス名・テキストなど）
- 誤字脱字の可能性がある箇所
- 括弧・記号の全角・半角混在（例: (）・（) のように開き括弧と閉じ括弧で全角半角が混ざっている、テキスト中に全角の()[]{}が使われているなど）
- <a> の href属性が "#" のままになっている（未設定・仮置きの可能性）
- HTMLのネスト構造の意味的な違反（以下は特に重点チェック）:
  - <ul>・<ol> の直下に <li> 以外の要素（<div>など）が入っている
  - <h1>〜<h6> の中に <div>・<p>・<section> などブロック要素が入っている
  - <p> の中に <div>・<ul>・<table>・<h1>〜<h6> などブロック要素が入っている
  - <a> の中に <a> がネストしている
  - <button> の中に <button>・<a>・<input> などインタラクティブ要素が入っている
  - <tr> の中に <td>・<th> 以外の要素が入っている

Si añades aquí y actualizas la extensión, podrás verificar de manera más enfocada tus tendencias de errores, ¡y el rendimiento mejorará progresivamente!

Aspecto técnico e implementación

Esta extensión se construyó usando solo TypeScript + VSCode Standard API + funcionalidades estándar de Node.js, sin utilizar ninguna biblioteca externa. La estructura de archivos también es simple, con solo 5 archivos .ts principales.

La VSCode Standard API tiene vscode.lm (Language Model API), una función que te permite llamar directamente al modelo de GitHub Copilot. Con esto, puedes implementar reseñas de IA sin necesidad de claves de API de Anthropic u OpenAI, pero como es una API relativamente nueva con poca documentación oficial, normalmente la investigación de especificaciones llevaría mucho tiempo.

Al avanzar en la implementación mientras le preguntaba a Claude Code "¿Cómo llamar al modelo de Copilot en una extensión de VSCode?", pude comprender al instante métodos de implementación específicos como el uso de vscode.lm.selectChatModels() y la recepción de respuestas en streaming ((for await (const chunk of response.text)).

De manera similar, la comunicación bidireccional en WebviewPanel (envío y recepción de mensajes de Webview a Node.js) y el mecanismo de almacenamiento persistente usando context.globalState también los pude verificar con Claude Code conforme avanzaba, lo que redujo significativamente el tiempo dedicado a profundizar en la documentación.

Conclusión

Esta vez hemos compartido la experiencia de crear una extensión de VSCode para "encontrar errores de descuido en conjunto antes de hacer commit".

Con la combinación de git diff × Copilot, puedes reducir las omisiones mientras amplías los puntos de verificación, transformando tu herramienta en una personalizada que se adapta a tus tendencias de errores.

Descubrí que las extensiones de VSCode se pueden crear sorprendentemente fácil usando la API estándar de VSCode. ¡Si Claude Code no existiera, nunca se me habría ocurrido crear una extensión! (¡ja!)

Por supuesto, es importante entender el contenido y el funcionamiento del código, pero incluso si delegas todo a la IA, ¡simplemente creando algo práctico y poniendo manos a la obra encuentras ideas y descubrimientos!