Creé una extensión de VSCode con Claude Code

Como incorporamos Claude Code en la empresa, quise crear alguna herramienta útil para el trabajo. Así que desarrollé una extensión para VSCode que detecta errores de escritura y de etiquetas mientras editas!

Resumo el proceso desde la idea hasta la implementación de "una función que me gustaría tener".

Proceso

Durante la implementación, uno de los problemas más frecuentes son los errores descuidados, como olvidar el atributo alt="" o confundir caracteres de ancho completo con los de ancho medio...

Tenía en mente una herramienta así, así que primero lo planteé en forma de conversación por chat.

Quiero crear una aplicación que evite estos errores descuidados, por ejemplo, que resalte las 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 revisar antes de enviar
• Diff visual HTML/CSS | Pega dos códigos para visualizar las diferencias
• Comparador de diferencias de capturas de pantalla | Compara a nivel de píxel las imágenes antes y después de la corrección
• Revisor de errores HTML/CSS en vivo | La IA detecta los problemas con solo pegar el código

Nos propuso algunas opciones, pero vamos a enviarle una solicitud adicional

Que la IA haga las revisiones es muy buena idea, pero en lugar de pegar el código, queremos poder supervisarlo en tiempo real en VSCode y verificarlo al terminar el trabajo.

Decidimos desarrollarlo como extensión de VSCode en lugar de una aplicación de navegador.

Como la supervisión en tiempo real resulta costosa en llamadas a la API, optamos por una revisión posterior al trabajo mediante la ejecución de comandos.

Inicialmente se propuso usar la API de Claude, pero requiere un pago adicional, así que se decidió usar GitHub Copilot, que ya teníamos contratado.

En síntesis, es una extensión que, tras finalizar el trabajo, obtiene el git diff, envía una solicitud a GitHub Copilot y detecta automáticamente los errores por descuido.

Funcionamiento

Al terminar el trabajo, haz clic en el botón de la barra de estado
↓
Obtén git diff HEAD y compara las diferencias
↓
Analiza el diff y extrae los archivos modificados y los números de línea
↓
Envía el diff y el prompt a GitHub Copilot (vscode.lm API)
↓
Copilot devuelve los resultados de la revisión en formato JSON
↓
Muestra los resultados de la revisión en la vista de VSCode
↓
Haz clic en el número de línea de una observación para saltar al archivo y la línea correspondientes
↓
Acumula las tendencias detectadas por la IA

Así se ve la pantalla.

Cuando termines de trabajar en el código, antes de hacer commit en GitHub, inicia la extensión Code Review. Compara las diferencias con el commit anterior y revisa si hay algo extraño.

Las tendencias detectadas por la IA se acumulan en el almacenamiento para visualizar qué tipos de errores cometes con más frecuencia.

Así es el prompt.

チェック観点:
- テキスト内の不自然なスペース（全角・半角スペースの混入など）
- 大文字・小文字の不統一（クラス名・テキストなど）
- 誤字脱字の可能性がある箇所
- 括弧・記号の全角・半角混在（例: (）・（) のように開き括弧と閉じ括弧で全角半角が混ざっている、テキスト中に全角の()[]{}が使われているなど）
- <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 sigues añadiendo aquí y actualizando la extensión, podrá revisar con más atención tus tendencias de errores y su rendimiento mejorará cada vez más.

Aspectos técnicos e implementación

Esta extensión se ha creado únicamente con TypeScript, la API estándar de VSCode y las funciones estándar de Node.js, sin usar ninguna biblioteca externa. La estructura de archivos también es sencilla, con solo cinco archivos .ts principales.

La API estándar de VSCode incluye vscode.lm (Language Model API), una función que permite llamar directamente a los modelos de GitHub Copilot. Con ella, es posible implementar una revisión con IA sin una clave de API de Anthropic u OpenAI, pero como es una API relativamente nueva y hay poca documentación oficial, normalmente investigar sus especificaciones requiere mucho tiempo.

Mientras implementaba la extensión, le pregunté a Claude Code cómo llamar a los modelos de Copilot desde una extensión de VSCode, y así pude entender en el momento detalles de implementación concretos, como el uso de vscode.lm.selectChatModels() y la recepción de la respuesta en streaming (for await (const chunk of response.text)).

Asimismo, la comunicación bidireccional con WebviewPanel (envío y recepción de mensajes entre Webview y Node.js) y el mecanismo de almacenamiento persistente con context.globalState también los fui implementando mientras confirmaba cada punto con Claude Code, lo que redujo considerablemente el tiempo que necesitaba para profundizar en la documentación.

Conclusión

En esta ocasión les conté sobre la creación de una extensión para VSCode que permite detectar los errores descuidados "de una vez antes de hacer commit".

Combinando git diff con Copilot, se pueden reducir los errores que se pasan por alto y, al aumentar los puntos de revisión, construir una herramienta personal adaptada a tus propias tendencias de error.

Descubrí que crear extensiones para VSCode, usando la API estándar de VSCode, es sorprendentemente sencillo. ¡Si no fuera por Claude Code, nunca se me habría ocurrido crear una extensión! (risas)

Entender el código y su funcionamiento es, por supuesto, importante; pero incluso si dejas todo en manos de la IA, las ideas y los descubrimientos suelen surgir al ponerte manos a la obra y simplemente probar a construir algo.