VS code: 1 introduccion

Vídeo Guía

Vídeo 1: Introducción

Introducción a VS CODE

Bienvenidos, escrito estará el contenido de los vídeos un poco mejor redactado, pero se recomienda seguir los vídeos para entender al 100% este curso

¿Que es vs code ?

Visual studio code (vs code) es un editor de texto gratuito que soporta diversos lenguajes de programación, es compatible para MAC, Windows y Linux. Cuenta con muchas características como Intellisense ,Git, snippets, y es customizable por lo que sus usuarios pueden cambiar las preferencias,shortcuts y temas a su gusto

¿Como lo instalo?

El instalador se puede descargar fácilmente de la pagina oficial: https://code.visualstudio.com/ , abres el instalador, lees y el resto te saldrá por naturaleza.

Requisitos para este curso

Para este curso se asume que ya tienen Visual Studio Code instalado, también es necesario poseer algún código de ejemplo donde se pueda probar los atajos del teclado, para esto se recomienda el repositorio

https://github.com/johnpapa/pluralsight-vscode-samples

Durante este curso no se hará énfasis en el desarrollo en TYPESCRIPT, JavaScript o punto Net, este código lo vamos a descargar a nuestro escritorio o a nuestra carpeta preferida para tener algo de código con el cual podamos hacer pruebas, simplemente hay que hacer clic en Dowlnload ZIP. Lo descomprime y eso es todo.

alt text

Abrir código

Una vez tenga Visual Studio Code instalado lo puede abrir a partir del icono que tenga en la barra de tareas, en doquer, en el launchpad o también lo puedes hacer a través del terminal. En la terminal simplemente digitas (code.) y lo que hace es abrir la carpeta actual, si utilizamos (code) sin el punto, lo que hace es abrir Visual Studio Code, pero sin ninguna carpeta en específico.

alt text

Aspectos básicos de vs code

Cambiar idioma

Para este caso hay que abrir la carpeta code play para que ver un poco de código. En Visual Studio Code, como pueden ver el menú superior está en español.

alt text

Eso es porque Visual Studio Code detecta automáticamente el lenguaje de su computador, pero es posible iniciarlo en cualquier otro lenguaje. Si quieren hacerlo utilizan el siguiente comando, asegurándose que Visual Studio Code, este cerrado completamente. (code -–locale=en)

alt text

Y como pueden ver el menú superior a pasado a inglés, preferiblemente se trabaja en inglés. Todas las demostraciones de este curso serán en inglés

alt text

Herramientas importantes

Explorer

Ahora en Visual Studio Code ahí cinco herramientas importantes en la parte izquierda, la primera es el explorador

alt text

Así como en Visual Studio el entorno completo es el explorador de soluciones, aquí tenemos simplemente el explorer. Es importante saber que Visual Studio Code, no trabaja con archivos CSPRO o (.Sln) para abrir proyectos (.Net) completos, si no que trabaja con carpetas, es posible que en este momento existan plugins para abrir ese tipo de archivos, pero digamos que no es funcionalidad nativa de Visual Studio Code

Entonces al abrir code en el terminal code punto (code.), me abre toda esta carpeta con código en la parte superior izquierda me aparecen los archivos utilizados recientemente cada vez que le doy doble clic a un archivo me aparece en esta lista y en la parte inferior todo nuestro proyecto.

alt text

En la parte superior pueden ver los comandos mas básicos

alt text

Agregar archivos e instalar extensión para ver iconos

Se pueden agregar archivos, vamos agregarlos en (app), y crea simplemente un (index.js). Al agregar la extensión, Visual Studio Code reconoce automáticamente el icono según la extensión, esto no viene con Visual Studio Code, hay que descargar un tema de iconos. Para activar los iconos a través del menú (Code), (Preferences), (File Icon Theme) puedo seleccionar diferentes iconos

alt text

alt text

La manera tradicional es sin iconos, pero también se puede seleccionar otros iconos. Personalmente recomiendo VSCode Icons, que tiene iconos diferentes para cada tipo de archivo

alt text

Editor de archivos y temas

En la parte derecha esta el editor, donde se puede abrir cualquier archivo JavaScript, TYPESCRIPT o PowerShell, CSS, HTML. Visual Studio Code, soporta una gran cantidad de formatos. También se puede cambiar el tema de visual Studio Code, en (Prefecences), (Color Theme), hay una cantidad de temas.

alt text

alt text

Estos temas los pueden descargar a través del Marketplace, hay dos opciones. En la opción izquierda en el último icono de la parte izquierda podemos buscar las extensiones. Por ejemplo (Theme) y aparecen todos los temas para instalar

alt text

Si queremos ver las plantillas, vamos a buscar (vs code Marketplace) en Google. (Seti-theme),

alt text

Personalmente recomiendo (Theme-Seti-Monokai).

alt text

¿Como instalo una extensión?

Hay 2 formas de instalar una extensión: Primera, si conoce cual instalar, simplemente le da instalar en el botón

alt text

Segunda, con (Ctrl + p)(command+p) y este comando que está en el Marketplace de Visual Studio Code, lo copio y aquí aparece de primero y por ultimo lo instala de la primera forma

alt text

alt text

alt text

Recarga Visual Studio Code, para que aparezca este nuevo tema disponible. (code), (color theme), y busca el (seti Monokai).

Git y Debugging: herramientas que veremos

En la parte izquierda tenemos la integración con GIT, esto lo veremos en otro vídeo también tenemos la parte de depuración para ver en otro vídeo donde profundizaremos como hacer el debugin de archivos como TYPESCRIPT, JavaScript e incluso C#. El debug es una configuración que usted puede personalizar para los diferentes lenguajes y lo veremos muy pronto.

alt text

Menú edición

Ahora vamos a explorar algunas opciones referentes al menú edición el cual ustedes pueden ver acá

alt text

Pero simplemente lo haremos a través de los atajos del teclado. No es necesario explicar cortar, copiar, pegar deshacer o rehacer eso lo tiene cualquier editor de texto. Sin embargo, si es necesario explicar algunos otros como buscar, buscar y reemplazar sobre todo desde el punto de vista del teclado.

Buscar y reemplazar

El teclado en Visual Studio Code, es lo que llamamos en ingles one key citizen, es decir, es demasiado importante para la productividad de nuestro desarrollo, entonces con (Ctrl + F), buscamos una palabra dentro del archivo que estoy viendo en este momento con (command + h), pero en Mac es con el (Alt). En Mac es con (Alt + F)

El Replace vamos a reemplazar (function por Var), si lo ven

alt text

Voy a deshacer para no dañar el código, también tenemos la opción de hacer esto en archivos entonces (Shift + command F ), para hacerlos en archivos, reemplazar en todas partes donde diga (angular por aurelia ),si lo ven, hay 293 resultados y con este botón simplemente puedo hacer el cambio en todos esos resultados

alt text

Obviamente no lo voy hacer aquí, no me quiero tirar el código eso es con respecto a buscar y a buscar y reemplazar.

Comentar

Ahora hablemos sobre comentarios, seleccionando un bloque completo le puedo decir (Toggle Block Comment), para comentar ese código o simplemente es des comentarlo, que es lo mismo (Shift + Alt + A),

alt text

También lo podemos hacer por líneas dependiendo obviamente del lenguaje que estemos utilizando para eso solo el (command) y el (-).

Ahora como seleccionar todo un código con (command A) igual que cualquier editor de texto, como copiar una línea completa (command Shift y las fechas), nos permite copiar líneas completas y si queremos mover líneas, por ejemplo, este (toastr. Options.timeOut), queremos cambiarlo hacia arriba o hacia abajo simplemente con (Alt y las flechas).

Menú ver

Ahora vamos al menú de Ver (view)

alt text

Las primeras opciones que tenemos es (command Palette..) o (Ctrl + P) en Windows, el cual nos permite digitar cualquier comando que queramos, todo lo que nosotros hacemos en Visual Studio Code, se traduce en comandos de esta manera ustedes pueden incluso personalizar los shortcuts para cada comando, dejo a tarea a la persona que esté viendo el vídeo explorar los comandos

alt text

También tenemos el explorador, la búsqueda, GIT, depuración, extensiones que es lo ítems que tenemos en la parte izquierda y tenemos otras ventanas adicionales por ejemplo OUTPUT, problemas, la consola de depuración y el terminal.

alt text

Desde el terminal puede ejecutar cualquier comando dependiendo del sistema operativo donde me encuentre. Entonces desde aquí puedo compilar, puedo iniciar procesos de (Node.js), puedo borrar archivos, puedo hacer cualquier cosa que sea necesaria. Estas ventanas las veremos más adelante.

alt text

Que más tenemos, lo que son los grupos si, los grupos es cuando partimos nuestra ventana en dos o hasta en tres ventanas al mismo tiempo para trabajar en varios archivos y los grupos son los que llamamos editores y están aquí

alt text

Entonces con (command 1, command 2, command 3), abro los diferentes editores y en cada uno puedo editar uno diferente, para cerrarlo simplemente en los tres punticos le doy cerrar.

alt text

alt text

También podemos hacer, cambiar de editor con (Alt Shift y las fechas), en este caso me equivoque, (Next Editor) y lo que hace es abrir en el orden los archivos que tengamos, aquí

alt text

Que hayan sido abiertos recientemente. Vamos hacer (Zoom In), le podemos hacer Zoom In a los archivos y no solamente a los archivos, sino también a toda la interfaz como tal. A mí no me gusta así, simplemente lo voy a devolver hacia el estado en que estaba. Existen muchas opciones más, pero creo que con las que hemos visto hasta ahora es suficiente para movernos ya y hacer cosas más avanzadas.

Preferencias

Como último en (Code), preferencias (Preferences), configuración (Settings).

alt text

En Visual Studio Code, toda la configuración es en archivos de texto en la parte izquierda van a ver el archivo por defecto, que no se puede modificar y en la parte derecha los (SETTINGS) del usuario que si se pueden modificar por ejemplo (editor.fontSize), de pronto podríamos pensar que está muy pequeño para nosotros y lo vamos a poner en 14, al guardar automáticamente se sube el tamaño de la fuente. Lo voy a dejar en 10, no en 11 me parece más adecuando para esta resolución

alt text

Estos son los (USER SETTINGS), pero también existen la configuración desde el punto de vista del espacio de trabajo lo cual veremos mas adelante, por ahora vamos a cerrar simplemente todos los archivos.

Repaso

Vimos que por preferencias (Preferences), podemos cambiar:

  • Los iconos
  • El esquema de color
  • La configuración a través de los archivos de texto

NOTA: Aunque no los hemos visto, también por acá se pueden configurar la parte de los shortcuts, que simplemente es otro archivo de texto llamado (keybindings.json), en cual podemos modificar los shortcuts o los atajos que ya vienen por defecto.

En la parte de edición vimos:

  • Todo lo de buscar, buscar y reemplazar, buscar en archivos, buscar y reemplazar en archivos
  • Comentar una línea de código y comentar un bloque de código

En la parte de selección vimos :

  • Copiar líneas hacia arriba o hacia abajo y moverlas. En la parte de vista vimos:
  • Los comandos para esconder o mostrar las opciones de la parte izquierda de nuestro menú, al igual que nuestras ventanas dentro de la superficie de desarrollo como son las ventanas de salida(output), problemas, depuración y terminal integrada

En la parte de Go, vimos como pasar entre ventanas que han sido cerradas recientemente o entre grupos es decir entre varias ventanas que son partidas hasta 3 ventanas

Y eso es todo lo que tiene que ver con la introducción. Espero que les haya gustado, en los próximos números o en las próximas series de vídeos, vamos a profundizar un poco más en desarrollo en (.Net Code), en (Node.js), vamos a ver la parte de REFACTORING con Visual Studio Code y otros trucos. Espero les haya gustado este primer vídeo.