El autor del material, cuya traducción publicamos hoy, ha creado 33 extensiones para VS Code. Decidió compartir con aquellos a quienes les gusta este editor, métodos de desarrollo y soporte de extensiones. Además, habló brevemente sobre sus proyectos. Quizás encuentre entre ellos algo que le sea útil.
Cómo escribir extensiones
Me esfuerzo por el trabajo productivo y la automatización del amor, por lo que desarrollé un proceso bien organizado para desarrollar extensiones para VS Code. Te contaré sobre los componentes principales de este proceso.
▍Herramientas
Escribí una
herramienta muy simple que te ayuda a comenzar rápidamente en nuevos proyectos usando una plantilla. La utilidad correspondiente funciona así:
- Acepta una carpeta como entrada (esto es lo que se llama una "plantilla").
- Procesa todos los archivos usando el paquete de manillar , haciendo preguntas en el proceso de procesamiento sobre qué se debe sustituir por cada marcador de posición encontrado (como
{{name}} ). - Como resultado, ella forma una nueva carpeta, cuyos archivos contienen lo que se ingresó en respuesta a sus preguntas.
Pensé en usar la utilidad
yeoman para trabajar con plantillas, pero, para mis necesidades, parece irrazonablemente complicado. Utilicé la herramienta
khaos , pero no es compatible y no actualiza las plantillas automáticamente, y actualizarlas manualmente cada vez que necesito usarlas no es particularmente conveniente.
▍Plantilla
Así es como yo, usando
template-vscode-extension , empiezo a desarrollar una nueva extensión para VS Code.
Crea un nuevo proyectoDespués de haber ingresado las respuestas a las preguntas del programa, tengo a mi disposición una extensión que funciona, como "¡Hola, mundo!" para VS Code. La plantilla incluye muchas funciones auxiliares que, como resultó, a menudo uso cuando desarrollo extensiones. En particular, la plantilla admite cargar el archivo de configuración del usuario desde la carpeta
.vscode , el registro automático de comandos, puede encontrar el directorio raíz actual basado en el archivo activo y resolver otros problemas similares.
Si pudiera retroceder el reloj, probablemente pondría todas estas funciones auxiliares en un paquete independiente, en algo como
vscode-utils , en lugar de hacer copias de estas funciones en cada proyecto de desarrollo de extensión. Pero, desafortunadamente, no sabía que iba a crear docenas de extensiones. Ahora tengo que pasar un tiempo actualizando el código correspondiente en todos los proyectos de mis extensiones.
Si planea desarrollar extensiones para VS Code, le aconsejaría que cree su propia plantilla, quizás tomando la mía como base.
▍ Documentación útil
Durante el proceso de desarrollo, siempre tengo a mano la
documentación para el Código API VS. Al principio, trabajar con este documento, que es una página enorme, no es particularmente conveniente, pero si se toma un tiempo para revisarlo rápidamente, si comprende qué API están disponibles para usted, será cómodo de usar. En general, puedo notar que el conjunto de API disponibles está bastante bien conmigo.
Y, por cierto, si desea desarrollar extensiones para VS Code, será extremadamente útil que lea
esta sección de la documentación.
▍Acerca de las extensiones que desarrollé
Estoy desarrollando extensiones para resolver varios problemas, hablaremos de ellos a continuación. Además, algunas de estas extensiones me ayudan a desarrollar otras extensiones.
Mis extensiones
Como dije, me esfuerzo por la productividad, muchas de mis extensiones están destinadas a aumentar la productividad laboral. Trato de no lidiar con la invención constante de la bicicleta, trato de lograr una separación clara de las funciones entre las diferentes extensiones para que su uso conjunto no cause problemas.
No sé si esto es bueno o malo, pero me gusta crear extensiones para VS Code. Además, el flujo de tareas que se pueden automatizar no se seca. Es por eso que, después de escribir la primera extensión, hice la segunda, luego la tercera, alcanzando, como resultado, hasta el trigésimo tercero.
Ahora hablaré brevemente sobre mis extensiones. Los detalles sobre ellos se pueden encontrar en sus páginas.
▍ Extensiones para crear extensiones
No 1. Administrador de depuración
La extensión
Debug Manager le permite comenzar a depurar, incluso desde el terminal, sin la necesidad de crear tareas o archivos de configuración. Creé esta extensión porque no quería obstruir los repositorios con archivos innecesarios (¿y quién, por ejemplo, usa tareas?). Creo que iniciar el depurador desde el terminal es una característica tan útil que debería
incluirse en el propio Código VS.
Ejecutando el depurador desde la terminalNo 2. StatusBar Debugger
La extensión del
depurador StatusBar agrega controles de depuración a la barra de estado del programa. Esto es mucho más conveniente que el
panel de depuración estándar. Además, si VS Code daría
más datos de depuración , mi extensión sería aún mejor.
Número 3. Instalar .VSIX
La
extensión Instalar .VSIX le permite instalar archivos
.vsix directamente desde el panel del
. La razón de esta extensión fue el hecho de que el procedimiento de instalación estándar para dichos archivos es
inconveniente .
Numero 4. Golpe
La extensión
Bump le permite aumentar el número de versión del proyecto e ingresar nuevos datos en el registro de cambios. Esta herramienta actúa de acuerdo con su propia lógica interna, pero se puede personalizar. Lo creé debido a que cualquier extensión decente necesita un registro de cambios, pero esto no significa que el desarrollador de dicha extensión deba ingresar al diario manualmente. Esta es una de mis extensiones favoritas. Tal vez crearé una herramienta de línea de comandos basada en ella, ya que me gustaría algún día permitir la automatización de las versiones de GitHub.
Uso de la extensión de relieveNo 5. Optimizar imágenes
La extensión
Optimizar imágenes le permite optimizar las imágenes disponibles en el proyecto utilizando una aplicación externa seleccionada por el usuario. Un equipo, y el trabajo está hecho.
▍ Gestión de proyectos
No 6. Proyectos +
La extensión
Proyectos + se usa para administrar proyectos. Tiene capacidades ricas, se puede configurar, encuentra proyectos automáticamente. Una de las extensiones más utilizadas de este tipo es
Project Manager , pero tengo alrededor de un centenar de repositorios y necesito las herramientas adecuadas para administrarlos, uno de los cuales es el soporte para grupos de anidamiento ilimitados.
Trabajando con el Proyecto + Extensión▍Gestión de listas de tareas pendientes
Número 7. Todo +
La extensión Todo + simplifica el trabajo con listas de tareas pendientes. Es una herramienta poderosa, fácil de usar y personalizable. Si no necesita resaltado de sintaxis para archivos
TODO , o si está satisfecho con el resaltado incorporado estándar, puede probar la agradable extensión de
Todo Tree .
Resaltado de sintaxis con Todo + e información a nivel de proyectoNumero 8. Destacar
La extensión
Highlight es una herramienta avanzada de resaltado de sintaxis de expresiones regulares. Es útil para trabajar con listas de tareas pendientes, anotaciones y similares. La extensión
TODO Highlight es muy popular en esta área, pero mi extensión es más versátil y mucho más potente. Además, probablemente funcione más rápido.
No 9. Markdown todo
La extensión
Markdown Todo facilita el trabajo con listas de tareas dentro de los archivos de rebajas. No tiene nada de especial, pero le permite usar las capacidades de Todo + dentro de los archivos de rebajas.
No 10. Proyectos + Todo +
La extensión
Proyectos + Todo + le permite analizar proyectos, por así decirlo, a vista de pájaro, para ver el resultado de la agregación de todos los archivos de todo en un solo archivo. Si utiliza la extensión Projects + para la gestión de proyectos y Todo + para trabajar con listas de tareas pendientes, entonces, gracias a esta extensión, puede recopilar listas de tareas de todos (o de algunos) proyectos en un solo lugar.
▍Expans para abrir archivos
Lo importante para mí es la capacidad de cambiar rápidamente entre diferentes aplicaciones o páginas web. Es por eso que creé una serie de extensiones para VS Code que simplifican la solución de tales problemas.
No 11. Abierto en la aplicación
La extensión
Abrir en la aplicación le permite abrir archivos arbitrarios en la aplicación predeterminada o en la aplicación que el desarrollador decida usar. Esta es una extensión universal.
No 12. Abrir en navegadores
La
extensión Abrir en navegadores agrega comandos al editor que le permiten abrir el archivo o proyecto actual en cualquier navegador, o incluso inmediatamente en todos los navegadores disponibles.
No 13. Abrir en código
La extensión
Open in Code facilita el cambio entre VS Code y VS Code Insiders.
No 14. Abrir en buscador
La extensión
Open in Finder está diseñada para abrir el archivo o proyecto actual en el administrador de archivos Finder.
Número 15. Abierto en github
La extensión
Abrir en GitHub le permite abrir el proyecto o archivo actual en github.com. Hay muchas extensiones para resolver este problema, pero cuando las probé, resultó que tienen demasiadas funciones que no necesito.
No 16. Abierto en gittower
La
extensión Abrir en GitTower agrega un comando al editor para abrir el proyecto actual en
GitTower .
Número 17. Abierto en marketplace
La extensión
Open in Marketplace equipa al editor con un equipo para abrir el proyecto actual en el
directorio de extensiones para VS Code.
Número 18. Abrir en node_modules
La
extensión Abrir en node_modules le permite encontrar los módulos correspondientes al texto seleccionado o alguna línea arbitraria en la carpeta
node_modules y abrir sus carpetas. Es útil para aquellos casos en que el desarrollador quiere comprender mejor los módulos que utiliza.
No 19. Abierto en npm
La extensión
Abrir en NPM le permite abrir páginas de módulos en el directorio npm. Es conveniente usarlo para ver la información de ayuda de los módulos.
No 20. Abierto en barco
La extensión
Open in Ship agrega un comando al editor para abrir el proyecto actual en Ship. Desafortunadamente, Ship dejó de funcionar. Entonces, para no olvidar la información que recibo sobre problemas en mis proyectos, tengo que usar una hoja de recordatorio especial en
Noty .
No 21. Abierto en terminal
La extensión
Abrir en terminal facilita la apertura del proyecto actual en la terminal.
Número 22. Abierto en transmisión
La extensión
Abrir en transmisión le permite abrir el archivo o proyecto actual en
Transmisión .
▍ Varios
Número 23. Actualización del navegador
La extensión de actualización del navegador le permite actualizar la página en el navegador presionando ⌘R directamente desde VS Code, sin tener que cambiar al navegador. Esta extensión es útil en los casos en que la opción de recarga interactiva no se puede usar, y cuando no necesita
browser-sync actualizar la página
sin la necesidad de esto .
Número 24. Comandos
La extensión de
Comandos le permite llamar a comandos arbitrarios desde la barra de estado. Argumento de aprobación apoyado.
Comandos personalizados creados por comandosNúmero 25. Diferencia
La extensión
Diff le permite comparar archivos abiertos.
code-diff path1 path2 esta extensión porque la
code-diff path1 path2 es demasiado lenta.
No 26. Historial de archivos Git
La extensión
Git File History simplifica el análisis de las diferencias entre el archivo actual y su versión anterior. Hay muchas extensiones para resolver este problema, pero cuando las probé, resultaron estar repletas de características innecesarias o no funcionaron.
Número 27. Notificaciones de Github
La extensión segura y personalizable de
notificaciones de GitHub está diseñada para mostrar información de notificaciones de GitHub en la barra de estado.
No 28. Tema de la noche de Monokai
Monokai Night Theme es un tema oscuro minimalista basado en el tema Monokai. Lo creé debido al hecho de que no podía recoger lo que me convenía de los temas existentes.
Tema de la noche de MonokaiNo 29. No [no compatible]
La extensión
No [No compatible] está diseñada para eliminar la línea "[No compatible]" del encabezado del editor. Esta extensión ya está en desuso, por lo que en su lugar recomiendo
Fix VSCode Checksums . Desafortunadamente, incluso después de
esto y
esta discusión, la molesta inscripción "[Sin soporte]" no ha desaparecido.
No 30. Abrir múltiples archivos
La extensión
Abrir varios archivos le permite abrir simultáneamente todos los archivos en una carpeta determinada. Si es necesario, los archivos se pueden filtrar por plantilla.
No 31. Buscar - Abrir todos los resultados
La extensión
Buscar - Abrir todos los resultados le permite mostrar simultáneamente todos los resultados de búsqueda con un solo comando.
Número 32. Gerente de terminales
La extensión
Terminals Manager automatiza el trabajo con varios terminales a la vez, por ejemplo, la ejecución de algunos comandos en ellos. Debo decir que Terminals Manager fue mi primera extensión. Si usa los terminales, le recomiendo probarlo.
No 33. Transmitir
La extensión
Transmitir equipa al editor con varios comandos para organizar la interacción con Transmit.
Gestión de extensiones
Administrar múltiples repositorios puede ser una tarea desalentadora. Te diré cómo lo hago.
▍ Compromisos recurrentes
Tarde o temprano, llega el momento en que necesita hacer algún cambio en todos los repositorios compatibles. Esto se reduce al hecho de que muchos repositorios tienen que hacer las mismas confirmaciones. Muy pronto se convierte en una tarea aburrida.
Para automatizar la solución de este problema, creé
autogit , una herramienta que le permite ejecutar comandos cuando se aplica a muchos repositorios.
Ejecutar un comando usando autogitConstantemente encuentro nuevas formas de usar
autogit . Por ejemplo, recientemente, usando esta herramienta, realicé los siguientes cambios en todos los repositorios en los que se almacena el código de mis extensiones para VS Code:
- Construir con
webpack . Esto dio como resultado una mejora en la velocidad de inicio de aproximadamente el 80%. - Ignorando el
package-lock.json . Este archivo solo obstruye mi historial de confirmaciones. Aquí hay un buen material sobre este tema. - Actualice
tsconfig.json . Utilizo las nuevas características del lenguaje de forma intensiva, en particular, las funciones asincrónicas. Se transponen si el objetivo de la transpilación se establece como <= es5 , en construcciones muy lentas. Dado que VS Code entiende el código moderno, esto ya no es necesario. - Desinstalar TSLint . Descubrí que, básicamente, no presto atención a las puntas de la pelusa, así que me deshice de esta oportunidad.
- Uso de un logotipo de alta resolución en materiales de referencia. Solía usar el logotipo de 128x128, ahora, para mejorar el aspecto de los materiales de referencia, usé una mejor imagen. No puedo decir que la imagen en sí es un milagro tan bueno, pero esa es otra historia.
Hacer tales cambios en un repositorio no es por mucho tiempo, pero cuando se trata de treinta y tres, es mucho más difícil vivir sin herramientas de automatización.
▍ Sincronice la descripción y las palabras clave con GitHub
Lo que se discute aquí no es necesario, pero una herramienta que automatice la sincronización de descripciones y palabras clave no me perjudicaría. Esta tarea puede ser manejada por las herramientas de mi
autogit y
autogit-command-github-sync .
Sincronice descripciones y palabras clave con autogitPero
autogit-command-github-publishing es mi herramienta para crear automáticamente nuevos repositorios.
▍Reportes
Poco después de crear varias extensiones, me interesé por saber qué tan populares son, cómo, con el tiempo, cambia el número de descargas. Puede encontrar información sobre todas las extensiones de un determinado desarrollador en una página especial. Por ejemplo,
aquí está mi página. Sin embargo, esta página no proporciona información, por ejemplo, sobre cuántas descargas de extensiones se han realizado desde la última comprobación. Por eso creé
rssa . Esta es una herramienta que le permite realizar un seguimiento de los cambios a cualquier cosa que sea accesible por URL.
Datos recibidos por rssaEl texto es bueno, pero sería mucho mejor presentar los datos en un gráfico. Ahora estoy desarrollando una herramienta para resolver este problema, aún no lo he publicado. Aquí, por ejemplo, se parece a la programación de descarga para la extensión
Todo + , construida sobre la base de los datos obtenidos con
rssa .
Todo + Descargar HorarioAquí, en algunos lugares, puede ver un fuerte aumento en el número de descargas. Esto sucede cuando se publican actualizaciones, ya que el sistema considera que la instalación de actualizaciones de extensión es una descarga. Esto lleva al hecho de que cualquiera puede ser el autor de la extensión con un millón de descargas, escribiéndola y publicando muchas actualizaciones. Este, por cierto, es uno de los
problemas del catálogo de extensiones para VS Code.
Resumen
En un momento, pensé que, en términos de la cantidad de extensiones publicadas para VS Code, estaba en segundo lugar después de Microsoft. Sin embargo, resultó que
algunos de ellos tienen 2 más que el mío. Por lo tanto, sigo escribiendo extensiones.
Estimados lectores! ¿Escribes extensiones para VS Code?