Tutorial completo

de instalación y configuración de
Visual Studio Code
Índice de
contenidos
1 Introducción
-
4 Instalación
-
Página 3 Página 9

2 ¿Qué es Visual Studio Code?

-
5 Utilidades y atajos
-
Página 5 Página 11

3 Características 6 Extensiones
- -
Página 7 Página 14
1 Introducción

En este tutorial vamos a ver la

instalación y configuración de
uno de los editores de código
que más está creciendo en estos
últimos tiempos.
Hablamos de Visual Studio Code. Iremos repasando
a través de varios apartados lo que es VS Code, las
características principales que posee, como instalarlo en
los diferentes sistemas operativos existentes, veremos
sus mejores utilidades y atajos y acabaremos con varios
ejemplos de instalación de extensiones que nos pueden
ser muy útil en muchos casos.

Página 3
Tutorial completo
de instalación y configuración de
de Visual Studio Code
2 ¿Qué es
Visual Studio Code?
Visual Studio Code es un editor de
texto para desarrollo muy ligero
y multiplataforma (disponible
para Windows, Linux y MacOS)
desarrollado por Microsoft.
Está basado en Electron, un
framework que utiliza Node.js
y HTML, CSS y Javascript para
crear aplicaciones de escritorio
multiplataforma.
Es uno de los editores que más ha crecido en uso en
los últimos años. Según la encuesta de desarrolladores
que realiza la famosa página Stack Overflow cada año,
en 2016 VS Code ocupaba el puesto número 13 en el
ranking de herramientas de desarrollo con solo un 7,2%
de uso. Pues bien, en la misma encuesta en la edición
de 2018 ha subido hasta el puesto número 1 con una
cuota del 34,9%.
Con estos datos nos podemos hacer una idea de las
grandes prestaciones que nos puede ofrecer este gran
editor.
Página 5
Tutorial completo
de instalación y configuración de
de Visual Studio Code
3 Características

Vamos a repasar las principales características que

hacen de VS Code una herramienta extremadamente
útil para los desarrolladores:

• Incluye soporte para debuguear el código.

• Incluye soporte para Git.

• Soporta la creación de snippets de código.

• Autocompletado inteligente del código.

• Refactorización de código.

• Es completamente gratuito además de open-source,

lo que permite mejoras por parte de la comunidad,
aunque la descarga oficial está bajo licencia propietaria.

• Es customizable, pudiendo ser personalizado con

temas e iconos.

• Es extremadamente versátil, ya que soporta infinidad

de lenguajes de programación.

• Su funcionalidad puede ser extendida a través de la

instalación de extensiones.

Página 7
Tutorial completo
de instalación y configuración de
de Visual Studio Code
4 Instalación

En este punto vamos a mostrar que tenemos que hacer
para instalar Visual Studio Code en nuestro ordenador.
En este caso, la instalación es muy sencilla.
Vamos a la página oficial d e l a herramienta, a lojada en
Azure de Microsoft:
Una vez descargado solo tenemos que ejecutar el fichero
y seguir los pasos correspondiente de la instalación.
Así de sencillo es instalar Visual Studio Code. Ya está listo
para poder ser usado.

https://azure.microsoft.com/es-es/products/
visual-studio-code/

Una vez ahí, en la parte central veremos un botón verde

donde pone “Descargar gratis ahora”. Pinchamos ahí.

Una vez nos lleve a la siguiente página elegimos la opción

que corresponda a nuestro sistema operativo. Como VS Code
hemos indicado en el punto segundo, está disponible
para Windows, Linux y MacOS.

Página 9
Tutorial completo
de instalación y configuración de
de Visual Studio Code
5 Utilidades
y atajos
Una de las principales utilidades que yo destacaría
de Visual Studio Code es que nos permite trabajar en
nuestros proyectos de diferentes formas. Esto es, si
queremos abrir un proyecto de forma individual solo
tenemos que irnos al menú de arriba, Archivo>Abrir
Carpeta y seleccionamos la carpeta de nuestro
proyecto. Se abrira como si fuera un espacio de trabajo y
detectará las extensiones de los archivos.

También podemos abrir una carpeta que contenga más

de un proyecto para trabajar de forma simultánea en
varios de ellos. Esto hace que no necesites tener infinidad
de ventanas en el caso de que tengas que tocar varios
proyectos al mismo tiempo.

Asimismo, es posible crear un espacio de trabajo

agrupando proyectos que no estén en la misma carpeta.
Una vez tenemos abierto un proyecto solo tendremos
que seleccionar Archivo>Agregar carpeta al área
de trabajo… y el nuevo proyecto se unirá a los anteriores
abiertos. Si queremos conservar permanentemente
ese espacio de trabajo solo tendremos que guardarlo,
seleccionando Archivo>Guardar área de trabajo
como…

También disponemos de un rápido acceso a las funciones

principales del editor, situadas en la parte izquierda del
mismo. Ahí se encuentran el explorador, la función de
búsqueda, el gestor de Git, el depurador y el instalador
de extensiones. Al tener un acceso directo a estas
funciones agilizamos nuestra forma de trabajar llegando
a optimizarla al máximo.

Página 11
5 Utilidades
y atajos
Otra cosa que nos hace la vida más fácil y más óptima al
trabajar con una herramienta son sus atajos de teclado.
Estos son los más interesantes que Visual Studio Code
incorpora.
Ctrl+X Cortar (selección vacía)
Estos son solo algunos de los atajos de teclado que
proporciona VS Code. Para visualizar la lista completa, se
pueden descargar los siguientes pdfs:
- Windows: https://code.visualstudio.com/
shortcuts/keyboard-shortcuts-windows.pdf

Ctrl+C Copiar (empty selection)

- Linux: https://code.visualstudio.com/shortcuts/
Shift+Delete Cut line keyboard-shortcuts-linux.pdf
Ctrl+Shift+K Borrar línea
Ctrl+Enter Insertar línea debajo - MacOS: https://code.visualstudio.com/shortcuts/
keyboard-shortcuts-macos.pdf
Ctrl+Shift+Enter Insertar línea arriba
Alt+Down Mover línea abajo Como fin a este apartado comentar que gracias a las
Alt+Up Mover línea arriba extensiones, que comentaremos en el último apartado,
Shift+Alt+Down Copiar línea abajo se pueden personalizar los atajos de teclado aplicando
los de tu editor o IDE al que estés acostumbrado (como
Shift+Alt+Up Copiar línea arriba
Eclipse) para no tener que aprender de nuevo todos estos
Ctrl+Shift+L Seleccionar todas las coincidencias con lo atajos.
seleccionado
Ctrl+F2 Seleccionar todas las coincidencias con la
palabra actual
Ctrl+Alt+Down Insertar cursor abajo
Ctrl+Alt+Up Insertar cursor arriba
Ctrl+] Indentar línea
Ctrl+[ Desindentar línea
Home Ir al principio de la línea
End Ir al final de la línea
Ctrl+End Ir al final del archivo
Ctrl+Home Ir al comienzo del archivo
Ctrl+F Buscar
Ctrl+H Reemplazar
F3 Buscar siguiente
Shift+F3 Buscar anterior
Página 12
Tutorial completo
de instalación y configuración de
de Visual Studio Code
6 Extensiones

En este último punto de la guía explicaremos como

instalar extensiones en VS Code.

Solo tenemos que irnos a la parte izquierda de la pantalla

principal, donde tenemos el menú lateral. Seleccionamos
la siguiente pestaña.

Una vez instalada seleccionamos la opción Recargar y ya

tendremos listo nuestra extensión para ser usada en VS
Code.

Existen infinidad de extensiones listas para desarrollar

Una vez ahí nos permitirá hacer una búsqueda.
Introducimos el criterio de búsqueda y seleccionamos la
extensión que queremos instalar.
Se nos abrirá en la pantalla principal dicha extensión.
Seleccionamos el botón Instalar.
con VS Code en casi cualquier lenguaje de manera muy
ligera. Esto hace entender mejor porque se ha convertido
en referencia de muchos programadores en este año
2018.

Página 14
 ¿Quieres convertirte en
Frontend Developer Profesional?
Aprende ahora con los mejores expertos
CARRERA
FRONTEND DEVELOPER WEB

Comenzar Carrera Ahora

¡Si te ha resultado útil,

comparte en redes sociales!

Más en openwebinars.net