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:
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.
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.
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.
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.
Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…
En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…
En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…
Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…
En este artículo te voy a enseñar cómo usar un "top level await" esperando a…
Ayer estaba editando unos archivos que son servidos con el servidor Apache y al visitarlos…
Esta web usa cookies.