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.
La impresión de un PDF en cualquier impresora se puede automatizar con un bot de…
Hoy te enseñaré cómo enviar un mensaje a un usuario desde un bot de Telegram…
El día de hoy te enseñaré algo muy sencillo pero útil al programar con PHP:…
El plugin para imprimir en impresoras térmicas alcanza hoy su versión 3.4.0 agregando soporte para…
En ocasiones es necesario leer los pixeles y colores de una imagen con JavaScript del…
Siguiendo con los tutoriales de listas desplegables o select con JavaScript, vamos a ver cómo…
Esta web usa cookies.