VueJS

Configurar VSCode y Vetur para programar con Vue

Vetur es una extensión para Visual Studio Code y proporciona una caja de herramientas para programar con Vue. Entre sus principales características encontramos:

  • Remarcado de sintaxis
  • Algunos snippets
  • Soporte de Emmet
  • Comprobación de errores
  • Formateado de código
  • Autocompletado
  • Depuración

VSCode o Visual Studio Code se ha convertido en un potente pero ligero editor de código. No es un IDE ni un editor de texto plano, se encuentra entre estos dos y mantiene la sencillez de un editor con muchas características de un IDE.

Al comenzar a programar en Vue (con archivos que tienen la extensión .vue) no se muestra un resaltado de sintaxis ni las herramientas del lenguaje:

1 – Sintaxis no marcada

Veamos entonces cómo instalar Vetur y analicemos las herramientas que proporciona para hacer el desarrollo con Vue más fácil y agradable.

Instalar Vetur

Ve a VSCode y en la parte izquierda selecciona el apartado de Extensiones. Busca “vetur”, abre la extensión y selecciona Install.

2 – Instalar extensión Vetur en VS Code

Espera a que se termine de instalar, puede tardar un poco. Todo depende de tu conexión a internet y la velocidad de tu computadora.

Por cierto, el código de esta extensión lo puedes ver en GitHub. También puedes ver la extensión en el MarketPlace.

Ventajas y herramientas de Vetur

Si abrimos un archivo con extensión vue ahora sí muestra un resaltado de sintaxis. Además, en el apartado de template permite el uso de Emmet:

3 – Soporte para Emmet

También tiene resaltado de errores, es decir, si cometemos un error de sintaxis al escribir el código la extensión lo indicará:

4 – Marcado de errores

Otra ventaja de Vetur es que autocompleta código. Por ejemplo, sugiere invocar a un método:

5 – Autocompletado de métodos

Tiene autocompletado específico para Vue, y también para JavaScript.

No podía faltar el autoformato o el formateo de código. Vetur ofrece el formateo de archivos Vue y formatea el código de la vista, del estilo y del script.

En la siguiente imagen vemos cómo Vetur ordena el código, es decir, lo formatea para que sea más legible, agregándole indentaciones y espacios en donde hacen falta.

Formatear código de Vue con Vetur

Nota: si el formato de código no funciona con la combinación de CTRL + ALT + L presiona la tecla F1 y en el menú desplegable busca “Format document“.

Esto es porque tengo configuradas mis combinaciones de teclas con el mapa de los productos de JetBrains.

Conclusión

Así es como podemos programar con Vue y VSCode de una manera agradable con esta extensión llamada Vetur.

VSCode es una de las pocas cosas que me gustan de Microsoft y es algo que le ha salido bastante bien.

Me gusta cómo tiene extensiones (ya sé que no todas son programadas por Microsoft) para cada tipo de cosa que hacemos y cada lenguaje en el que programamos.

Estoy aquí para ayudarte 🤝💻


Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.
parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

Entradas recientes

Tramitar acta de nacimiento en línea de manera instantánea

En este post te quiero compartir mi experiencia tramitando un acta de nacimiento de México…

1 hora hace

Creador de credenciales web – Aplicación gratuita

Hoy te voy a presentar un creador de credenciales que acabo de programar y que…

2 semanas hace

Desplegar PWA creada con Vue 3, Vite y SQLite3 en Apache

Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…

2 semanas hace

Arquitectura para wasm con Go, Vue 3, Pinia y Vite

En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…

2 semanas hace

Vue 3 y Vite: crear PWA (Progressive Web App)

En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…

2 semanas hace

Errores de Comlink y algunas soluciones

Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…

2 semanas hace

Esta web usa cookies.