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:
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.
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:
También tiene resaltado de errores, es decir, si cometemos un error de sintaxis al escribir el código la extensión lo indicará:
Otra ventaja de Vetur es que autocompleta código. Por ejemplo, sugiere invocar a un método:
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.
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.
