IDE y extensiones

Siguiendo la recomendación de la documentación oficial, configuramos Visual Studio Code y la extensión Volar.

Trabajar con Vue

Para trabajar con Vue no necesitas ningún IDE o editor de texto en particular, puedes usar el de tu preferencia. Inclusive puedes programar con Vue desde un bloc de notas, pero eso no es recomendado porque no tendrías un resaltado de sintaxis.

Elección del Editor de Código

En este caso, yo voy a seguir la recomendación de la documentación oficial y voy a usar Visual Studio Code. Si tú usas otro IDE u otro editor de texto con el que te sientes más cómodo, no hay problema, puedes usar Sublime Text, Atom, etcétera.

Apertura de la Carpeta del Proyecto

En este caso, yo voy a usar Visual Studio Code y voy a abrir la carpeta del proyecto. Tras abrir la carpeta del proyecto nos vamos a encontrar con esta estructura inicial. Esta estructura fue creada con el comando init que usamos en la lección anterior.

Estructura del Proyecto

¿Qué significa todo esto?

Para empezar, no te preocupes por todos los archivos que aquí se han creado. Puedes enfocarte en la carpeta src, que significa "Source" y que es la que contiene el código de nuestra aplicación Vue.

Dentro de esta carpeta nos encontramos con un archivo App.vue, que representa nuestro componente principal. Como vemos, la sintaxis no se encuentra resaltada correctamente.

Instalación de la Extensión Volar

Para habilitar el resaltado de sintaxis vamos a usar la extensión llamada Volar, que es lo que recomienda también la documentación.

En Visual Studio Code, nos dirigimos a Extensions.
Buscamos Volar.
Encontramos Vue Language Features.
Verificamos que tenga un check azul, lo que indica que es un paquete oficial.
Hacemos clic en Instalar.
Cerramos la ventana de extensiones.

Luego de la instalación, como vemos, ya se encuentra activo el resaltado de sintaxis.

Esta lección no cuenta con recursos adicionales.

Si crees que hace falta algo, o necesitas ayuda, puedes publicar una pregunta en el foro.

Para trabajar con Vue no necesitas ningún IDE o editor de texto en particular, puedes usar el de tu preferencia. Inclusive puedes programar con Vue desde un blog de notas, pero eso no es recomendado porque no tendrías un resaltado de sintaxis. En este caso yo voy a seguir la recomendación de la documentación oficial y voy a usar Visual Studio Code. Si tú usas otro IDE, otro editor de texto con el que te sientes más cómodo, no hay problema, puedes usar Sublime Text, Atom, etcétera. En este caso yo voy a usar Visual Studio Code y voy a abrir entonces la carpeta del proyecto. Tras abrir la carpeta del proyecto nos vamos a encontrar con esta estructura inicial. Esta estructura fue creada con el comando init que usamos en la lección anterior. ¿Qué significa todo esto? Para empezar no te preocupes por todos los archivos que aquí se han creado, puedes enfocarte en la carpeta SRS que significa Source y que es la que contiene el código de nuestra aplicación Vue. Aquí en el interior nos encontramos con un archivo App.vue que representa nuestro componente principal. Como vemos la sintaxis no se encuentra resaltada correctamente. Para habilitar ello vamos a usar la extensión llamada volar, que es lo que recomienda también la documentación. Entonces en Vue Code nos vamos a Extensions y vamos a buscar volar. Aquí tenemos volar. Vue Language Fishers. Aquí vemos este check azul, esto representa que es un paquete oficial. Vamos a dar clic a instalar. Luego de ello cerramos y como vemos ya se encuentra activo el resultado de sintaxis.

¿Tienes dudas?

Publicar pregunta

¡Comparte conocimiento!

Volver al índice

Regístrate

Inicia sesión para llevar un control de tu progreso.

Capítulos

Introducción al curso

Probar Vue rápidamente

Crear nuevo proyecto

IDE y extensiones

Instalar Visual Studio Code