Visual Studio Code: No empieces sin estas extensiones [2023]
¿Ya usas Visual Studio Code en tus proyectos de Desarrollo Web? Sin duda VS Code se ha convertido en uno de los mejores editores de código, debido a su sencillez, posibilidad de emplearse en Windows, Linux o MacOS, gratuidad y sobre todo: por sus extensiones. Y es justo por esta última razón que voy a mencionarte aquí las principales extensiones que yo uso dentro de mi configuración y que considero deberías emplear si quieres sacarle el máximo provecho a tu editor de código.
Spanish Language Pack for Visual Studio Code
Esta extensión desarrollada por Microsoft te va a permitir tener tu VS Code en idioma español. Si deseas configurar adecuadamente esta extensión puedes darle un vistazo a esta publicación.
Live Server
Una de las actividades más repetitivas con la que lidiamos al trabajar en nuestro Front End es que cada que realizamos algún cambio en nuestro código tenemos que guardarlo, ir a nuestro navegador y darle a actualizar para recién poder ver dicho cambio. Live Server llega para solucionarte ese pequeño gran detalle.
Con Live Server podrás tener un servidor local de desarrollo para probar tu código en tiempo real. Live Server refrescará automáticamente tu página en el navegador cada que ejecutes la acción de guardar. Puede que te parezca que ahorras apenas unos segundos con esa acción automatizada, pero cuando estés desarrollando esa suma de segundos te significarán cuantiosos minutos ahorrados al final del día.
Puedes conocer más a fondo el funcionamiento de esta extensión en su enlace oficial.
Bracket Pair Colorizer 2
Esta extensión está desarrollada por CoenraadS y te va a permitir emparejar de manera visual las llaves y secciones de tu código mediante colores, lo que hará que tengas una lectura más amigable del mismo. Ideal para no perder el hilo de la apertura y cierre de cada llave, ya que los emparejará por colores.
Seguro que agradecerás mucho contar con esta extensión cuando empieces a usar varios IFs anidados y veas lo sencillo que es identificar cada nivel en tus llaves.
Y por si fuera poco, si te sitúas encima de alguna de tus llaves, paréntesis o corcheas, Bracket Pair Colorizer 2 dibujará automáticamente una línea hacia su par de cierre de manera temporal. Toda una gran ayuda para no perderse entre tantas líneas.
Puedes ingresar a su página oficial en el MarketPlace para conocer más acerca de esta genial extensión.
Path Intellisense
Muchas veces nos causa un verdadero dolor de cabeza tener que referenciar algunas imágenes, archivos css, js, etc… y para eso llega Path Intellisense al rescate. Este complemento de Visual Studio Code, creado por Christian Koler, completará automáticamente los nombres de tus archivos que necesites referenciar.
CSS Flexbox Cheatsheet
Flexbox ha ganado mucha popularidad ultimamente ya que nos permite acomodar los elementos de una manera más visual y sencilla. Esta extensión te permitirá hacer uso de Flexbox sin tener que memorizar todas las propiedades, ya que podrás acceder a ellos de manera visual.
Una extensión muy buena si estás empezando a maquetar, ya que te mostrará de manera visual las propiedades flex box que tienes y lo que puedes lograr con cada una de ellas. Está desarrollada por Dzhavat Ushev y puedes revisar las últimas actualizaciones de esta extensión aquí.
ESLint
ESLint se encargará de revisar tu código y advertirte cuando exista inconsistencias en él. Con esta extensión podrás integrar rápidamente ESLint a VS Code. Además de los mensajes que te podrá enviar desde tu ventana de terminal, ESLint corregirá automáticamente errores de formato, como la falta de “;” al final de las líneas o el usar distintos tipos de entrecomillados.
Para que pueda ejecutarse automáticamente ESLint al guardar tu proyecto puedes agregar esta línea a tu archivo de settings.json:
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},Esta extensión está desarrollada por Dirk Baeumer. Visita su MarketPlace para revisar más a fondo su documentación.
Auto Rename Tag
Muchas veces mientras estamos maquetando nos percatamos que necesitamos cambiar la etiqueta de alguno de nuestros bloques. Un DIV por un SECTION, un H1 por una etiqueta de párrafo, etc. El problema surge cuando al realizar el cambio tipeas mal una de las dos etiquetas o te olvidas de reemplazar su par, lo que puede que ocasione que se rompa toda tu maquetación.
Este complemento te permite que realices ese cambio sólo en uno de los lados de la etiqueta, ya que del otro lado se encargará Auto Rename Tag.
Esta extensión, creada por Jun Han, está dentro del grupo de extensiones que de a poco te van ahorrando muchos minutos al finalizar el día. ¡Siempre quedará tiempo para disfrutar de una tacita de café extra en la oficina!
Material Icon Theme
Aunque pueda parecer algo menor, Material Icon Theme realiza una tarea muy importante dentro de VS Code: se encarga de colocar los íconos a cada tipo de archivo o carpeta que tengas dentro de tu proyecto. Cada que crees un nuevo archivo dentro de tu carpeta de trabajo, Material Icon Theme analizará la extensión y se encargará de colocar el ícono adecuado, facilitando así que puedas reconocer rápidamente qué tipo de archivos son. Cuando se tiene proyectos grandes con múltiples formatos esta extensión sí que se hace notar.
Además, te permite personalizarlo desde el setting de tu configuración. Para conocer las opciones de personalización puedes ir a su página en el MarketPlace.
Prettier – Code formatter
Prettier va a permitir que VS Code ordene de manera adecuada el código, respetando las llaves, cadenas, longitud, etc. Sin duda uno de las principales extensiones que conforme lo vayas usando verás que será la manera más sencilla de tener tu código siempre ordenado.
Vas a necesitar una combinación de teclas cada que desees que se ordene tu código ( CMD/CTRL + Shift + P ), sin embargo puedes automatizar esta actividad haciendo que se ejecute cada que realices la acción de GUARDAR. Para ello debes ir al menú Archivo>Preferencias>Configuración y en la esquina superior derecha verás un ícono que te permitirá “Abrir Configuración (JSON)” donde podrás ver la configuración de tu usuario. Este es el lugar donde vamos a configurar el ordenado automático. Puedes copiar este código para que realice esta optimización:
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
// Set the default
"editor.formatOnSave": true,Y listo! Ahora, cada que guardes tu archivo, Prettier se encargará de ordenarlo por ti. Si deseas conocer más acerca de Prettier puedes visitar su página oficial AQUÍ.
Monokai Night Theme
No es que exista la necesidad de poner todo en modo oscuro, pero seguramente tus ojos te agradecerán que lo hagas luego de pasar muchas horas frente a la pantalla.
Monokai Night Theme nos presenta un tema completo, oscuro y minimalista inspirado en Monokai. Sencillo y elegante.
Dato Adicional
Configuraciones adicionales para Visual Studio Code
Hay un par de cambios adicionales que podrías realizar en tu archivo settings.json que te pueden ayudar en tu flujo de trabajo.
La primera te permitirá evitar que se genere una barra horizontal para cuando tengas que redimensionar el VSC. Esto hará que no tengas que estar arrastrando la barra horizontal ya que automáticamente la línea de código pasará a la siguiente línea para que siempre puedas visualizarlo de manera más cómoda.
"editor.wordWrap": "on", // Evita generar una barra horizontalEsta otra línea hará que se ejecute el autoguardado de tu documento cada que cambies de pestaña entre tus archivos dentro del Visual Studio Code o cuando cambies de ventana. Ideal para evitar accidentes y pérdida de datos por si se cuelga el programa o tu PC.
"files.autoSave": "onFocusChange", // Se ejecuta el autoguardado
