Extensiones para Desarrollo Web en VS Code

Publicado por MATR1X en

Extensiones para Desarrollo Web en VA Code

En este artículo conocerás lo que considero que son las mejores extensiones que puedes instalar en VS Code si eres un desarrollador web. No tomen en cuenta el orden de las mismas como un factor de clasificación, puede que con el tiempo algunas extensiones dejen de funcionar por algún motivo, ten eso en cuenta. Si estas interesado en conocer más continúa leyendo.


Autoprefixer


Añade los prefijos CSS a los atributos que lo requieran para dar soporte a los diferentes tipos de navegadores.


Beautify

Es un formateador de HTML, CSS, Javascript, Json y Sass, en mi caso yo utilizo esta extensión para formatear código HTML.


Bookmarks

Nos permite añadir marcadores dentro del código a los cuales podemos saltar hacia arriba y hacia abajo con los atajos de teclado: Ctrl+Alt+J y Ctrl+Alt+L, podemos agregar marcadores con Ctrl+Alt+K. Muy útil si tenemos que estar mirando código que está mas abajo o mas arriba de donde estamos trabajando sin necesidad de estar haciendo scroll.


Bracket Pair Colorizer


Esta extensión le da color a nuestras llaves y paréntesis de apertura y de cierre, si escribes código Javascript te va a venir muy bien para ayudarte a identificar donde cierra cierta llave o paréntesis, los colores son intercambiables. Si utilizas esta extensión con el tema de Monokai Pro queda genial. Cabe destacar que existe la versión 2 pero esta última no colorea los corchetes en CSS y la original sí, además no tiene opciones de configuración la versión 2.

Advertencia: Si no tienes VS Code actualizado (en mi caso versión 1.49.2) esta extensión te puede dar problemas de rendimiento al escribir código PHP que es donde lo he notado. Hay usuarios que han reportado problemas de alto uso de CPU en la versión 2 pero en mi caso no me ha dado problemas de rendimiento graves, así que ya sabes que hacer, actualiza si no lo has hecho.


Clipboard Manager

Esta extensión nos permite tener un historial de lo que hemos copiado y nos permite visualizarlo mediante su icono de la barra izquierda o escribiendo la palabra clip. También podemos ver el historial en la parte de arriba al presionar Ctrl+Shift+V


Color Manager

Una extensión para elegir colores, nos muestra a la derecha una interfaz en la que podemos ver paletas de colores. Al hacer clic derecho en un documento y seleccionar Color Picker se nos abrirá la interfaz para elegir colores y lo podremos insertar directamente sin copiar al presionar el botón insert. Si escribes código CSS te recomiendo esta extensión.


Comments Toolkit

Una extensión que nos permitirá añadir diferentes estilos de comentarios entre los que están secciones, subsecciones, también tenemos para añadir estilo TODO, bloque y simple. Al escribir comm nos aparecerá los diferentes snipets a escoger.


CSS Peek

Nos permite convertir las clases CSS en enlaces que nos llevará a donde se encuentra en nuestra hoja de estilos al presionar Ctrl y posicionar el mouse sobre la clase. También nos permite editar los estilos sin necesidad de ir al documento CSS al poner el cursor sobre la clase, luego presionar Ctrl+Shift+P y escribir Peek, le damos Enter y nos aparecerá algo como esto:


CSS Snippets

Atajos para CSS, por ejemplo, al escribir dsf nos muestra en el editor para autocompletar display: flex, podemos ver todos sus atajos dentro del Readme de la extensión.


ESLint

Nos muestra los errores que escribimos en JavaScript


formate: CSS/LESS/SCSS formatter

El mejor formateador de CSS que he visto, nos deja el código en forma de columnas y queda muy bien a la vista y cómodo de leer. Aquí tenéis un ejemplo en una captura de pantalla:


HTML link checker

Al presionar Alt+H nos dice si existe algún enlace html roto, nos lo muestra dentro del editor al lado de los números de línea de código, ideal para no tener que verificar cada enlace por nosotros mismos. Lo único malo que tiene que no se si lo habrán cambiado es que hay que presionar Alt+H después de arreglar el enlace para que se quite el icono de error.


HTML Hint


SI cometes algún error al escribir código HTML esta extensión te lo mostrará.


html tag wrapper

El texto que tengamos marcado al presionar Ctrl+i nos lo encierra en una etiqueta, nos puede ser de utilidad en algunos casos


HTTP Server/ HTML Preview

Crea un servidor local con vista previa dentro de Visual Studio Code o en nuestro navegador predeterminado y muestra los cambios al guardar. Dentro de VS Code muestra los cambios en HTML, CSS y JavaScript; no soporta PHP.


Hungry Delete

Nos permite borrar manteniendo los espacios de tabulación de nuestro código simplemente al presionar Backspace, si presionamos Ctrl+Backspace nos borra todas las tabulaciones detrás del cursor hasta encontrarse con el ultimo carácter que tengamos. Además, la extensión soporta múltiples cursores.


Image Preview


Nos muestra una miniatura en el editor al lado del número de fila y debería también mostrar una vista previa al realizar un hover sobre el enlace; digo debería porque probé a ver si lo hacía y no me funcionó, pero si mal no recuerdo anteriormente si funcionaba, quizás es idea mía o la extensión dejó de funcionar.


Inline HTML

Nos permite tener resaltado de la sintaxis de HTML y CSS en los Templates Strings de JavaScript siempre y cuando antes de las ( ` ` ) escribamos la plabra html o /*html*/. También nos otorga la posibilidad de usar los atajos de Emmet en HTML y dice también otorgar IntelliSense.
Nota: Puedes también ver las extensiones lit-html y CSS in JS, esta última que mecioné provee la posibilidad de convertir la sintaxis CSS que no es compatible con JavaScript para que lo sea.


JavaScript Code Snippet

Esta extensión trae muchos code snippets para JavaScript así que mira su lista en el Readme de la extensión. Existen también otras 2 extensiones que puedes instalar, una se llama JavaScript Snippet Pack y la otra JavaScript (ES6) code snippets.


jQuery Code Snippets

Básicamente nos otorga snippets para jQuery. Los snippets son útiles para escribir ciertas sentencias de código con abreviaturas y de esta manera codificar más rápido.


JS y CSS Minifier (Minify)

Nos permite minificar nuestro código JavaScript y CSS mediante su comando Minify que escribimos al presionar Ctrl+Ship+P o F1, también podemos hacer clic en el icono de la barra de estado que dice Minify.


Line Note

SI queremos hacer notas muy grandes en el código esta extensión es para ti porque nos crea un icono al lado del número de línea de código, las notas se guardan en un documento Markdown, cuando queramos ver la nota tenemos que buscarla en la carpeta correspondiente guiándonos por el número de línea. Útil para escribir mucho texto sin ensuciar el código de comentarios. Aquí un ejemplo de cómo queda:


Margin Colours

Nos muestra un recuadro cuadrado con el color correspondiente al lado del número de línea de código. Si escribes CSS te ayudará a encontrar un poco más rápido las líneas de código de color.


Multiple cursor case preserve

Cuando seleccionamos una porción de texto y presionamos Ctrl+D el editor nos marcará las coincidencias y esta extensión nos permitirá renombrar que al renombrar esa selección no perdamos las mayúsculas y minúsculas en la posición que estaba. Obviamente en una palabra mas larga a la original no funcionará.


Path Autocomplete


Nos permite ir visualizando las carpetas y archivos a medida que vamos escribiendo la ruta hacia el archivo que deseamos, de esta manera no tenemos que copiar y pegar la ruta entera de un golpe.

Para no tener problemas con los duplicados en VS Code agrega esta configuración en la configuración de la extensión donde dice Path-autocomplete: Ignored Files Pattern:


**/*.{css,scss,html}


PHP Awesome Snippets

Además de esta extensión de snippets para PHP. Existe otra extensión de snippets llamada PHP Snippets VS Code.


PHP CS Fixer

Nos formatea nuestro código PHP, además permite formatear HTML dentro de PHP si le marcamos la opción. Para hacer que funcione necesitamos el archivo php-cs-fixer e indicarle la ruta de donde se encuentra el mismo.


PHP Intelephense


Si escribes código PHP te aconsejo usar esta extensión para que te marque los errores en tu código y dispongas del autocompletado. Exista otra llamada similar que es PHP IntelliSense pero a diferencia de esta no sabe de la existencia de declare (strict_types) y no muestra si hay un error relacionado a ello. La extensión nos recomienda deshabilitar en la configuración de VS Code lo siguiente para evitar sugerencias duplicadas: php.suggest.basic


Prettier –Code formatter

Un formateador que recomiendo para usarlo con JavaScript


Quick HTML Previewer

Lo más cercano que encontrarás a la vista previa dinámica de Brackets en VS Code, lo malo de esta extensión es que tiene sus errores como que no muestra correctamente los márgenes y las imágenes no se visualizan, pero nos permite ver los cambios en vivo del código HTMl, CSS y JavaScript en una ventana lateral sin tener que guardar el documento. Podemos hacer uso de la misma al presionar Shift+P y escribir Side Preview, nos aparecerá una opción y le damos Enter, también podemos ver la vista previa en una pestaña por completo con Full Preview


Quokka.js

Esta extensión nos permite correr nuestro código JavaScript y TypeScript dentro de VS Code y nos lo muestra abajo, útil para ver el comportamiento de arreglos, variables, etcétera sin necesidad de usar la consola del navegador. Tienes que instalarla sí o sí en caso de que seas un escritor de código js. Tiene una versión gratuita, la comunity y la versión Pro que cuesta dinero, pero con la versión comunity creo que es más que suficiente. Te aconsejo buscar este video en YouTube para que veas de lo que es capaz esta extensión:


Quokka.js A Cool New JavaScript VSCode Extension You Must Check Out! (JavaScript



Remove Comments

Nos permite remover los comentarios en nuestro código, la extensión dice soportar mas de 60 lenguajes. No soporta HTML pero si PHP. Al presionar Ctrl+Shift+P y escribir Remove nos aparecerán las distintas opciones.


Reopen Closed Tab

Si hemos cerrado una pestaña por accidente podemos reabrirla con esta extensión. Al presionar Ctrl+Shift+T nos reabre la pestaña o al hacer clic derecho en una pestaña abierta y seleccionando la opción Volver a abrir el editor cerrado.


SCSS Everywhere

Autocompletado para CSS, SCSS y nombres de clase en HTML, no te puede faltar esta extensión si escribes HTML y CSS. Soporta varios lenguajes además de los mencionados como JavaScript, PHP, TypeScript React (tsx), Markdown, Vue, etcétcera.


Spanish Language Pack

Nos permite tener Visual Studio Code en español.


SQL Snippets

Como todas las extensiones de snippets nos proporciona atajos, en este caso para el lenguaje de SQL.


SQLTools

Esta extensión nos permite gestionar base de datos AWS Redshift, MariaDB, Microsoft SQL Server/Azure, MySQL, PostgreSQL y SQLite. Debemos descargarnos la extensión tipo driver para trabajar con cada tipo de base de datos. En el caso de MySQL podemos ver las tablas en nuestra base de datos e incluso correr consultas SQL.


Statusbar error

Nos muestra los mensajes de errores en la barra de estado, en el editor o en la actual línea según su descripción. Es útil poder leer una descripción pequeña de un error sin tener que abrir la pestaña de errores de la barra de estado y que además nos muestre un icono de error al lado del número de la línea de código.


SVG Preview

Nos permite ver nuestros vectores en formato .svg dentro de Visual Studio Code.


Eso es todo por este artículo, podría mencionar otras extensiones, pero serían más bien para los que usan Bootstrap, Materialize, Sass, etc y creo que no son tan imprescindibles en general para el desarrollo web pues puede que no todos usen lo que dije anteriormente. Si deseas una segunda parte sobre las extensiones que dejé dímelo en los comentarios. Espero que te haya servido de algo si fue el caso. Comenta si has descubierto alguna extensión útil y que te ha parecido este artículo. Gracias por leer.


MATR1X

Tengo conocimientos de: Edición de Vídeo conozco de After Effetcs y Premiere. Programación Web en lenguajes como PHP, JavaScript, MySQL, HTML y CSS. Animaciones 3D en Cinema 4D no muy complejas y también conozco de Photoshop

0 comentarios

Deja una respuesta

Tu dirección de correo electrónico no será publicada.