Extensiones de código VS para HTML | Programar Plus

Veamos algunas extensiones para VS Code que mejoran la escritura y edición de HTML (y lenguajes que son básicamente HTML con poderes adicionales). Puede que no te gusten todos. Tal vez algunos de ellos no le atraigan, resuelvan un problema que no tiene o se sientan más desordenados del que necesita. Está bien. Estos son solo algunos que he probado y me han gustado hasta cierto punto.

Comenzaría con Emmet aquí, aunque técnicamente no es una extensión1 para VS Code. Está integrado. Debería saberlo porque es muy útil. Hace “Expansiones HTML” como esta, que uso casi todos los días de mi vida:

Etiquetas HTML de etiqueta final

Escuché sobre este de Stefan Judis, quien escribió en su blog el otro día e inspiró la idea de esta publicación.

La idea es que en lugar de dejar comentarios en su HTML para indicar qué elemento HTML está cerrando (una práctica algo común, especialmente para los parciales que cierran elementos que podrían no estar abiertos en el mismo documento).

<div class="main">


</div> <!-- / div.main -->

<?php /* / div.main */ ?>
<?php /* Sometimes I'd do it in a server side language so it didn't go over the wire. */ ?>

Esta extensión le muestra la interfaz de usuario sobre qué HTML se está cerrando:

Etiqueta de cierre automático

Tan pronto como escriba el > en un elemento HTML, como el último corchete en <div>, la etiqueta de cierre se crea automáticamente para usted.

Se puede configurar para que solo se cierre automáticamente después de haber escrito el </ para indicar que está a punto de cerrar una etiqueta, que es un valor predeterminado en Sublime Text 3. Hablando de eso, si instala el mapa de teclas de Sublime Text, lo obtendrá automáticamente, además de un puñado de otros comandos de teclas elegantes.

También existe la etiqueta Cerrar HTML / XML, pero solo funciona mediante un comando de teclado. Con Auto Close Tag puede configurarlo de cualquier manera, y tiene muchas más instalaciones por cualquier motivo.

Resaltar etiqueta coincidente

Aquí está el GIF de sus documentos:

Iba a hacer mi propio video, pero descubrí que incluso si tengo esta extensión desactivada, algo más en mi código VS resalta las etiquetas coincidentes de todos modos. No estoy del todo seguro de qué es, lo que me lleva a creer que ahora podría ser una función incorporada.

Lo que veo sin esta extensión: un borde alrededor de las etiquetas coincidentes.

No es específico para HTML, pero si le gusta este tipo de ayuda para hacer coincidir las cosas, puede probar Bracket Pair Colorizer 2, que puede ser bastante bueno para CSS y JavaScript.

Etiqueta de cambio de nombre automático

¡Encuentro este bastante útil!

Creo que esta funcionalidad está realmente integrada en el Emmet canónico, pero nuevamente, VS Code no usa Emmet canónico, por lo que esta característica no está ahí, de ahí la necesidad de este complemento adicional.

Mejores comentarios

Dejo comentarios de código de manera bastante generosa, especialmente cuando se desarrollan cosas nuevas. Una convención que me gusta es cuando un comentario tiene un prefijo (por ejemplo, TODO) que es muy importante y necesita atención. Better Comments permite que aquellos se vean visualmente diferentes.

Corrector ortográfico de código

No hay revisión ortográfica en el código VS. No me encanta eso. Para mí, este complemento es imprescindible, especialmente para HTML, porque HTML generalmente tiene contenido, como palabras, que deben escribirse correctamente. Y al igual que un linter, este complemento le brinda garabatos cuando algo está mal y un menú para intentar solucionarlo.

Arco iris de sangría

Disfruta de este glorioso arcoíris creado al profundizar las sangrías:

El punto es que le da algunas pistas visuales sobre el nivel en el que está mirando / trabajando actualmente. En ese sentido, es como el Highlight Matching Tag, pero honestamente me gustan los dos. Es más útil cuando necesita desplazarse hacia arriba o hacia abajo para encontrar dónde está la etiqueta coincidente.

Más bonita

Prettier funciona en HTML, pero casi lo llamaría una pizca de controversia. Por ejemplo, divide los atributos HTML en líneas simples, lo que se parece mucho a JSX, pero es menos común de ver en HTML sin formato. Pero a veces hay efectos secundarios literales. Como si escribieras <ul><li></li><li></li></ul> a propósito como ese (sin espacios en blanco) porque vas a configurar todos los elementos de la lista inline, Prettier los dividirá en sus propias líneas, insertando espacios en blanco y cambiando el diseño de lo que pretendes. Siempre puede solucionarlo con un comentario para que Prettier lo deje solo (por ejemplo, {/* prettier-ignore */}), pero pude ver que frotaba a la gente de la manera incorrecta. Incluso hay configuraciones para ello en Sensibilidad de espacios en blanco HTML, pero nunca podría ser perfecto.

De hecho, conseguí que Prettier for HTML funcionara solo para esta publicación de blog, así que creo que lo guardaré por un tiempo y veré si me gusta. Ya sé que me gusta Prettier for JSX. Por lo general, estoy a favor de la mayor cantidad de formato automático posible.

Retazo

Me imagino que hay muchos plugins de fragmentos, pero este es el único que he probado y funciona bien. Me gusta cómo crea fragmentos directamente a partir de archivos existentes.

Tabnine

Escuché sobre este de Kyle Simpson, quien creo que estaba haciendo una consultoría pagada con ellos o algo así. El punto es que ofrece sugerencias de autocompletado impulsadas por IA, incluso en HTML. Compruébalo adivinando algunos atributos:

Este parece un producto bastante comercial con características que lo empujan hacia planes pagados para equipos. Realmente no tengo ganas de meterme en eso; Fue interesante ver que una herramienta como esta funciona con HTML.

hacha Accesibilidad Linter

Esto modifica su HTML para problemas de accesibilidad directamente en el editor. Hay un montón de reglas que comprueba.

  1. ¿Sabías que a pesar de que VS Code tiene a Emmet directamente integrado, no hay comunicación entre el creador de Emmet y el equipo de VS Code? Intenté facilitar esa conexión en el pasado, pero falló. El punto es: Emmet en VS Code probablemente sería mejor si no solo estuviera conectado, sino integrado desde los paquetes oficiales. Emmet tiene cosas nuevas que VS Code podría usar, como vistas previas de expansión. ⮑

(Visited 33 times, 1 visits today)