Instalación y uso básico de Visual Studio Code para programar

Si vas a aprender a programar, necesitas un editor de código. Pero ¿Por qué usar uno? ¿Cuál elegir? ¿Y cómo instalarlo? Quédate conmigo y respondamos todas esas preguntas 😉.

¿Qué es un editor de código?

En pocas palabras, un editor de código es un software que te permite escribir y editar código en texto plano, a la vez que te brinda herramientas varias para facilitar tu proceso de trabajo.

El código se escribe en texto plano. Es decir, texto simple y sin ningún tipo de formato (como negritas, cursivas y variedades de tamaño o color). Por lo tanto, no puedes escribir código usando software dedicado a aplicar estos formatos en cartas y documentos (como Microsoft word, Google docs, o Pages).

Así que necesitas un software especializado que te permita escribir texto plano, pero que al mismo tiempo te brinde herramientas para facilitar tu proceso de trabajo. Algunas de estas herramientas son: detector de errores en el código, herramientas para autocompletar, buscar y reemplazar; resaltados varios para facilitar la lectura del código, entre otros.

Además. algunas de estas herramientas admiten la instalación de extensiones que permiten personalizar y ampliar aún más las capacidades del editor de código. Van desde asistencia con colores y resaltados, a herramientas de comunicación de equipos dentro del editor de código como CodeStream.

¿Qué editor de código instalo primero?

Si estás siguiendo este curso, te recomendamos que empieces probando Visual Studio Code.

Existen muchos editores de código en el mercado, y la mayoría son gratuitos (incluyendo el block de notas o el “notepad” que viene con tu computadora). Sin embargo, Platzi eligió esta para ti porque es gratuita, corre en windows, mac y Linux; y es una de las mejor valoradas en el entorno profesional al momento de lanzar este curso (2022).

¿Cómo instalar Visual Studio Code?

1. Entra al sitio web oficial de Visual Studio Code y descárgalo para tu sistema operativo.
2. Ejecuta el instalador que se descargó en tu computadora.
3. Acepta los términos y condiciones (si estás de acuerdo).
4. Luego tendrás que indicarle al instalador si deseas que realice alguna tarea adicional (abajo te explico qué significan estas opciones), y le das a siguiente.
5. Finalmente, esperas a que termine la instalación y le das finalizar 🙂

Tareas adicionales durante la instalación de Visual Studio Code

Te recomendamos habilitar las siguientes opciones: te recomendamos:

1. Crear el acceso directo en el escritorio (para que puedas abrirlo desde el escritorio con facilidad).
2. Agregar la acción “abrir en code” a los menu contextuales de archivo y de directorio (Esto te permite abrir archivos y carpetas desde el menú que se abre cuando haces click derecho en ellos).
3. Registrar Code como editor para los tipos de archivo admitidos (para que tu computadora abra los archivos con Visual Studio Code en lugar del Notepad).
4. Agregarlo al PATH (para que puedas abrir tus archivos y carpetas fácilmente desde la terminal y línea de comandos).

Estas opciones te beneficiarán en tu carrera cómo programador, especialmente si Visual Studio Code se convierte en tu editor de texto preferido.

Usando Visual Studio Code por primera vez

Solo la práctica te hará un maestro en Visual Studio Code. Sin embargo, déjame darte algunas nociones clave para que empieces a usarlo ahora mismo 👍

1. VSCode emplea ventanas al igual que el navegador de internet. Puedes trabajar con varios archivos a la vez desde la misma ventana.
2. Por defecto, VSCode suele mostrar una ventana de bienvenida y otra con las mejoras de la última versión instalada. Puedes cerrarlas cuando quieras.
3. Por defecto, VSCode te preguntará si confías en los autores de los archivos que intentes abrir. Esta es una medida de seguridad normal, y se toma para protegerte de archivos ejecutables que puedan puedan perjudicar tu computador.
4. VSCode tiene un menú superior muy similar a los de otros software, pero también tiene un menú a la izquierda que se distingue por íconos en lugar de palabras. Estos despliegan un panel lateral con diferentes funcionalidades.

• El primer botón es el explorador de archivos. Si decides abrir una carpeta entera con VSCode, este panel te permite navegar fácilmente por los diferentes archivos que se encuentran dentro de la carpeta.
• El segundo botón es un buscador. Te permite buscar palabras en cualquiera de los archivos de la carpeta que tienes abierta (y resalta todas sus iteraciones).
• El tercero tiene que ver con un software de control de versiones (algo indispensable para programar profesionalmente. Más información en el Curso Profesional de Git y Github).
• El cuarto es una herramienta interna de VSCode para correr y detectar bugs en el código.
• El quinto abre un panel dónde podrás buscar e instalar extensiones para tu editor de código.

5. El editor de VSCode tiene tema oscuro por defecto para que distingas la implementación de colores dentro del código.
6. VSCode cuenta el número de líneas del archivo que tengas abierto. También destaca la indentación de código, y aplica un código de colores al texto del archivo (que depende de la extensión del archivo).
7. VSCode emplea una vista miniatura del código en el extremo derecho de la ventana. Puedes usar este para navegar fácilmente por tu código.
8. Puedes hacer zoom para aumentar el tamaño del código y facilitar su lectura. Puedes lograrlo pulsando Ctrl→”+” y Ctrl→”-”

Bonus: utf-8

El navegador no puede leer acentos y letras “ñ” si no indicas esto en el HTML.

Es probable que ya te hayas dado cuenta de que estos acentos no se muestran bien cuando cargas el archivo HTML común y corriente en tu navegador. Esto se debe a que los acentos no pertenecen al set de caracteres que carga por defecto el HTML.

Para usar caracteres comunes del español (como acentos y la letra “ñ”), necesitas activar el Unicode Transformation Format 8 (UTF-8) en tu archivo HTML colocando la siguiente etiqueta <meta> en el <head> de tu archivo:

<meta charset="utf-8" />

Esta se ve así dentro del código:

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="utf-8" />
    </head>
    <body>
       
    </body>
</html>

¿Qué tal si creas un nuevo archivo HTML, pero esta vez desde Visual Studio Code? 🙂

Experimenta un poco, y nos vemos a continuación en la siguiente clase: Como declarar variables y usar prompt 😉

Contribución creada por: Jhonkar Sufia (Platzi Contributor).