Consigamos VS Code

herramientas

Tiempo de lectura:

Publicado:

Actualizado:

🎬 Video

Ver en YouTube

¿Dónde conseguirlo?

Vamos a dirigirnos al sitio oficial de Visual Studio Code

En la página principal encontraremos un botón para descargarlo.

Botón de descarga en página principal
Botón de descarga en página principal
Botón de descarga en página principal

Usualmente bajará la versión correcta para el sistema operativo que estemos usando (Windows, MacOs o Linux), pero también podemos escoger un instalador particular o versiones anteriores del programa si damos clic en la lista.

Lista de instaladores
Lista de instaladores
Lista de instaladores

Instalación

La instalación es como cualquier otro programa.

Opciones de Windows

En Windows, uno de los últimos pasos del instalador se ve de esta manera:

Opciones de instalación
Opciones de instalación
Opciones de instalación

Opciones para marcar
Opciones para marcar
Opciones para marcar

Podemos marcar las dos casillas que dicen Add “Open with Code” para que nos aparezca este programa en el menú de clic derecho en el Explorador de Archivos.

Menú Abrir con
Menú Abrir con
Menú Abrir con

Paseo por la interfaz

🎬 Video

Ver en YouTube

Al iniciar

Cuando abrimos el programa por primera vez se ve de la siguiente manera:

Primera pantalla de VS Code
Primera pantalla de VS Code
Primera pantalla de VS Code

Tiene una serie de guías que nos ayudan a aprender a usar y modificar el editor. Si quieres saltar este paso puedes dar clic en las palabras Mark Done (_Marcar como hecho).

Botón marcar como hecho
Botón marcar como hecho
Botón marcar como hecho

Lo usual

Cuando abrimos el programa el resto de las veces podemos ver una pantalla como esta:

Pantalla de bienvenida
Pantalla de bienvenida
Pantalla de bienvenida

Si no queremos que se abra la pestaña de bienvenida por defecto, podemos desmarcar la casilla en la parte inferior.

Mostrar pantalla de bienvenida al iniciar
Mostrar pantalla de bienvenida al iniciar
Mostrar pantalla de bienvenida al iniciar

Sobre las diferentes secciones

Barra de menús

En la parte superior tenemos la barra de menús.

Barra de herramientas
Barra de herramientas
Barra de herramientas

Barra lateral

Del lado izquierdo tenemos la barra lateral o sidebar, aquí encontraremos diferentes botones que nos ayudarán a abrir paneles, cada uno con una tarea diferente.

Barra lateral
Barra lateral
Barra lateral

De arriba hacia abajo, el primero es el explorador de archivos. Similar al que utiliza nuestro sistema operativo, pero podemos abrir, crear y modificar archivos directamente desde aquí.

El segundo es el panel de búsqueda. Nos ayuda a encontrar los diferentes archivos que coincidan con algún patrón de texto

El tercero es el control de código fuente, nos ayuda a gestionar el historial de archivos creado por el control de versiones (usualmente Git).

El siguiente es el panel de ejecución y depuración, nos ayuda a ejecutar algunos archivos y poder encontrar errores y comportamientos no deseados en algunos lenguajes

El último de esta sección es el panel de extensiones, nos ayuda a agregar funcionalidades a nuestro editor.

Barra lateral - Cuentas y Ajustes
Barra lateral - Cuentas y Ajustes
Barra lateral - Cuentas y Ajustes

En la parte inferior de la misma barra podemos encontrar el menú de cuentas, nos sirve para iniciar sesión y poder guardar y sincronizar nuestros ajustes en otros dispositivos.

Y también el menú de gestión, donde podemos encontrar diferentes opciones para configurar el editor.

Sección principal

El resto de la interfaz es donde podremos ver los diferentes archivos que usemos en nuestros proyectos, se abrirán en forma de pestañas, como en un navegador. Podemos tener múltiples pestañas abiertas e incluso tenerlas lado a lado, o unas encima de otras.

Sección principal
Sección principal
Sección principal

Cambio de idioma

🎬 Video

Ver en YouTube

Para cambiar el idioma debemos dirigirnos a la barra lateral y dar clic en el menú extensiones.

Se abrirá un nuevo panel, dentro de la barra de búsqueda debemos escribir spanish.

Usualmente la primera opción (Spanish Language Pack for VS Code) es la correcta, así que podemos dar clic en install (instalar).

Extensión
Extensión
Extensión

Una vez instalado, en la parte inferior derecha nos aparecerá un mensaje para reiniciar el editor. Debemos dar clic en el botón azul.

Mensaje para reiniciar el editor
Mensaje para reiniciar el editor
Mensaje para reiniciar el editor

Al reiniciar el programa, lo encontraremos en el nuevo idioma.

VS Code en Español
VS Code en Español
VS Code en Español

Para volver a cambiar el idioma podemos ir al menú Ver (View) > Paleta de comandos (Command Palette)

Menú Ver
Menú Ver
Menú Ver

Escribir idioma (language) y seleccionar Configurar idioma de pantalla (Configure Display Language)

Cambiar idioma de pantalla
Cambiar idioma de pantalla
Cambiar idioma de pantalla

Aparecerá una lista de los lenguajes instalados y los lenguajes disponibles

Lista de lenguajes
Lista de lenguajes
Lista de lenguajes

Podemos seleccionar uno instalado o uno diferente para instalar la extensión correspondiente.

Comentarios