Editor de Código (IDE) | Microsoft Visual Studio Code

Un IDE (Entorno de Desarrollo Integrado o Integrated Development Environment), es una aplicación de software que ofrece un conjunto de herramientas para desarrollar software codificando. Además de un editor de código, los IDE suelen incluir un depurador, compilador, y otras herramientas.

Instalación

1. Botón Descargar VS Code. Lleva a la Página Oficial de Descarga de VS Code.

2. Click Download for Windows. Se descarga el archivo instalador en la Carpeta Descargas.

3. Carpeta Descargas, ejecutar el archivo descargado (doble click) VSCodeUserSetup-x64-1.95.1.exe o posterior.

4. Acepto los Términos. Siguiente

5. En Carpeta Destino por defecto, Siguiente

6. En selecciones Carpeta del Menú de Inicio, Siguiente

7. En Tareas Adicionales, seleccionar la casilla Crear un acceso directo en el escritorio (opcional), luego Siguiente

8. En Listo para Instalar, Instalar

9. Esperamos que instale.  Finalizar. Listo!

Configuración de VS Code

1. Seleccionar el Tema: Dark Modern

2. En el Panel de la izquierda hacemos scroll bajando hasta Mark Done y click.

3. Se abre la Interfaz inicial de VS Code.

Interfaz inicial de VS Code

1. Open Folder

2. En nuestra Carpeta de Trabajo, creamos la Carpeta de Programación (para HTML, la Carpeta del Sitio Web), click en Seleccionar Carpeta

3. Click en Yes, I trust the authors. Listo!, queda la Carpeta de Trabajo seleccionada.

4. Las Pestañas: Outline y Timeline que aparecen por defecto, podemos dar Botón Derecho y ocultar Hide... (Pueden volver a activarse desde el Menú de tres puntos en el Panel Izquierdo).

Primeras Tareas en VS Code

1. Creamos el archivo index.html haciendo click en el icono New File en las herramientas horizontales del Panel Izquierdo Explorer.

2. Instalamos Extensiones utilitarias. Hacemos click en el icono Extensions en las herramientas verticales del Panel Izquierdo Explorer.

• Contraemos las Pestañas por defecto: Popular y Recommended. 

3. En el campo Search Extensions in Mark... buscamos:

• Prettier

Seleccionamos la opción Prettier - Code Formatter. Install

Es un formateador de código, ayuda a indentar, agregar saltos de línea, etc.

Borramos los resultados de la búsqueda con el icono Clear Extensions Search Results en el campo Search Extensions in Mark...

4. En el campo Search Extensions in Mark... buscamos:

   1. • Indent Rainbow

Seleccionamos la opción Indent Rainbow . Install

Agrega visualmente los espacios que estamos indentando, con barra en color, para controlar que estemos haciéndolo correctamente.

Borramos los resultados de la búsqueda con el icono Clear Extensions Search Results en el campo Search Extensions in Mark...

5. En el campo Search Extensions in Mark... buscamos:

   1. • Image Preview

Seleccionamos la opción Image Preview . Install

Permite previsualizar las imágenes que tenemos referenciadas en el código (sobrepasando el puntero del mouse).

Borramos los resultados de la búsqueda con el icono Clear Extensions Search Results en el campo Search Extensions in Mark...

6. En el campo Search Extensions in Mark... buscamos:

   1. • Live Server

Seleccionamos la opción Live Server . Install

Permite previsualizar la página web en la propia aplicación sin necesidad de recurrir al Browser. 

Atención: Crea un puerto abierto en el Servidor Local Host: 127.0.0.1:5500

Borramos los resultados de la búsqueda con el icono Clear Extensions Search Results en el campo Search Extensions in Mark...

7. OPCIONAL.  En el campo Search Extensions in Mark... buscamos:

   1. • Palenight

Seleccionamos la opción Palenight Theme . Install

Permite configurar la paleta de colores de los diferentes elementos.

Recomendamos:

Palenight (Mild Contrast) que emerge con la instalación.

Para modificar el Tema: Herramienta de Manage, Themes, Color Theme, y selecciono de la lista emergente.

Borramos los resultados de la búsqueda con el icono Clear Extensions Search Results en el campo Search Extensions in Mark...

Tips (plug-in) en VS Code

• Introducir html: 5 y genera toda la Estructura Básica del documento html.

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <title>Document</title>

    </head>

    <body>

    </body>

</html>

• Introducir Lorem en Etiqueta Párrafo <p> (prueba de texto)

<p>lorem</p>

obtenemos como resultado:

Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit ipsa, tenetur aliquid voluptate officiis, tempore reprehenderit amet dignissimos voluptatum cupiditate sunt facere possimus eligendi voluptatem et nesciunt odio nam facilis

• Ajustar un Párrafo al ancho de la ventana del Editor VS Code

1. Nos ubicamos dentro de la Etiqueta <p></p>

2. Tecleamos ctrl+shift+p

3. En el campo que se abre escribimos word wrap

4. En el listado que despliega seleccionamos: Toggle Word Wrap

5. Listo! El Texto del Párrafo se ajusta al ancho de la ventana del Editor.

• Introducir una secuencia de Encabezados <h$*6 > (Emmet Abbrevation)

1. Me ubico donde comienza la secuencia <h >

2. Escribo la orden: h$*6

Me devuelve la secuencia:

<h1></h1>

<h2></h2>

<h3></h3>

<h4></h4>

<h5></h5>

<h6></h6>

3. Ahora, si escribo la orden: h3*2

Me devuelve la secuencia:

<h3></h3>

<h3></h3>