Curso de Visual Studio Code

Este curso de Visual Studio Code está dirigido a desarrolladores web de todos los niveles que quieran mejorar su flujo de trabajo y aumentar su productividad en el desarrollo web.

1. Curso de Visual Studio Code

En este curso de Visual Studio Code, veremos todo lo necesario para utilizar VS Code. Veremos cómo, instalarlo, personalizar la interfaz de usuario, editar código, depurar problemas y utilizar atajos de teclado y extensiones.

1.1. ¿Qué es Visual Studio Code?

Visual Studio Code (VS Code) es un editor de código fuente desarrollado por Microsoft que se ha convertido en una herramienta muy popular para el desarrollo web y de software en general. Es de código abierto, multiplataforma (disponible para Windows, macOS y Linux) y altamente personalizable gracias a su amplia variedad de extensiones.

1.2. Diferencias entre Visual Studio Code y Visual Studio

Visual Studio Code es un editor de texto ligero diseñado para crear y editar código fuente en una variedad de lenguajes de programación. Su enfoque está en la simplicidad y la personalización, ofreciendo características esenciales como resaltado de sintaxis, sugerencias inteligentes y extensiones para mejorar la experiencia de desarrollo.

Visual Studio es un entorno de desarrollo integrado (IDE) más completo, orientado principalmente al desarrollo de aplicaciones utilizando lenguajes como C# o C++. La diferencia principal radica en la profundidad de funcionalidades y el alcance del desarrollo que cada uno ofrece: mientras que Visual Studio Code es ligero y adaptable, Visual Studio proporciona un conjunto completo de herramientas para el desarrollo de software.

2. Ventajas de utilizar VS Code para el desarrollo web

• Soporte de muchos lenguajes de programación: VS Code lo podemos utilizar para escribir y editar código en HTML, CSS, JavaScript, XML, Python, entre otros.
• Extensibilidad: Cuenta con muchas extensiones que nos permiten personalizar y ampliar sus funcionalidades.
• Integración con Git: Ofrece integración con Git, lo que facilita el control de versiones y la colaboración en proyectos de desarrollo.
• Potente editor de texto: Cuenta con características avanzadas de edición de texto, como resaltado de sintaxis, sugerencias inteligentes, refactorización de código, y otras.

3. Instalación de Visual Studio Code

1. Visita la página web oficial de Visual Studio Code en https://code.visualstudio.com/Download.
2. Haz clic en el botón de descarga correspondiente a tu sistema operativo (Windows, macOS o Linux).
3. Una vez descargado el archivo de instalación, ejecútalo y sigue las instrucciones del asistente de instalación. En Windows, sigue los pasos del instalador. En macOS, arrastra el icono de Visual Studio Code a la carpeta de Aplicaciones para completar la instalación. En Linux, descomprime el archivo descargado y sigue las instrucciones específicas para tu distribución.

4. Configuración inicial básica

• Cambio del color del tema: Puedes cambiar el color de tu tema desde «File» >»Preferences» > «Theme».
• Cambio del tamaño de fuente y otras preferencias: Ajusta el tamaño de la fuente desde «File» > «Preferences» > «Settings» y busca la opción «Editor: Font Size». Revisa el personalizador de preferencias para ver qué otras características puedes editar.
• Atajos de teclado: Utiliza los atajos de teclado más comunes desde «Help» > «Keyboard Shortcuts» o desde code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf.
• Organización de la barra lateral: Arrastra y suelta las secciones de la barra lateral para personalizar su orden y visibilidad.

5. Exploración de la interfaz de usuario

• Barra de menú superior: Ubicada en la parte superior de la ventana, proporciona acceso a todas las funcionalidades y comandos de VS Code.
• Panel de actividad (situado en el lado izquierdo): Muestra iconos para cambiar entre diferentes vistas y herramientas, como control de código fuente, depuración o extensiones, entre otras.
• Explorer en la Barra lateral izquierda (junto al panel de actividad): Permite navegar por la estructura de tu proyecto y realizar acciones como crear, eliminar y renombrar archivos y carpetas.
• Editor: La mayor parte de la ventana está ocupada por el editor de código, donde se escriben, editan y visualizan los archivos de código.

6. Creación de un proyecto web

• Creación de un nuevo proyecto:
  • Utiliza la opción de menú «File» > «Open Folder» para abrir la carpeta de tu proyecto en el editor. Si no tienes una carpeta creada para tu proyecto, créala en el lugar que prefieras como sueles hacerlo en tu sistema operativo.
  • Para iniciar un nuevo proyecto web, crea archivos HTML, CSS y JavaScript según sea necesario utilizando la opción «New File» del menú «File».
• Organización de archivos y carpetas:
  • Utiliza una estructura de carpetas lógica para organizar los archivos de tu proyecto. Por ejemplo, puedes tener una carpeta para archivos HTML, otra para archivos CSS, otra para archivos JavaScript, y así sucesivamente.
• Inicialización de un proyecto con Git:
  • Si aún no tienes un repositorio Git para tu proyecto, puedes inicializarlo en la carpeta raíz de tu proyecto utilizando el comando git init en la terminal integrada de VS Code.
  • Una vez inicializado, puedes comenzar a agregar archivos al repositorio utilizando los comandos git add y git commit.
  • Además, si tu proyecto ya existe en un repositorio remoto, puedes clonarlo en tu máquina utilizando el comando git clone y luego abrir la carpeta clonada en VS Code. Ver más información en el tutorial de Repositorios Git.

7. Edición de código

1. Funciones básicas de edición de código:
   • Escribir: Simplemente comienza a escribir en el editor de texto para agregar código a tus archivos.
   • Seleccionar: Utiliza el ratón o las teclas de dirección para seleccionar texto. Mantén presionada la tecla Shift mientras te desplazas para seleccionar texto.
2. Atajos de teclado que debes usar:
   • Ctrl + C: Copiar.
   • Ctrl + V: Pegar.
   • Ctrl + Z: Deshacer.
   • Ctrl + Shift + Z: Rehacer.
   • Ctrl + S: Guarda el archivo actual.
   • Ctrl + F: Abre la función de búsqueda para encontrar texto dentro del archivo.
   • Ctrl + H: Abre la función de búsqueda y reemplazo para buscar y reemplazar texto.
   • Ctrl + D: Selecciona la siguiente ocurrencia de la palabra seleccionada.
   • Alt + ↑ / ↓: Mueve la línea actual hacia arriba o hacia abajo.
   • Ctrl + Shift + L: Selecciona todas las ocurrencias de la palabra seleccionada.
   • Ctrl + Shift + K: Elimina la línea actual.
   • Alt + Clic: Permite seleccionar múltiples ubicaciones de edición simultáneamente.

8. Extensiones esenciales para desarrollo web

Veamos algunas extensiones interesantes que debes utilizar en tus desarrollos HTML, CSS y JS para ir más rápido y facilitarte la edición de tus archivos. Para ello, dirígete al menú de extensiones haciendo clic en el panel de actividad situado en la barra lateral izquierda o presionando Ctrl + Shift + X. Busca las extensiones que necesitas escribiendo sus nombres en el campo de búsqueda.

HTML:

• «HTML Snippets» para proporcionar atajos de teclado útiles.
• «Auto Close Tag» para cerrar automáticamente las etiquetas HTML.

CSS:

• «CSS Peek» para navegar rápidamente entre archivos CSS y sus definiciones.
• «CSS Intellisense» para completar automáticamente los nombres de las clases CSS mientras escribes.

JS:

• «ESLint» puede ayudarte a mantener un código limpio.
• «Prettier» para formatear automáticamente tu código según reglas predefinidas.
• «Live Server«. Esta extensión te permite visualizar los cambios en tiempo real en tu navegador mientras editas tus archivos HTML, CSS o JavaScript. Puedes iniciar Live Server haciendo clic derecho en tu archivo HTML y seleccionando «Open with Live Server» o utilizando el atajo de teclado Ctrl + Shift + L y luego Ctrl + Shift + O.

9. Depuración de código

1. Configuración de puntos de interrupción (Breakpoints):
   • Haz clic en el área a la izquierda del número de línea en el editor para establecer un punto de interrupción. También puedes presionar F9 para alternar un punto de interrupción en la línea actual.
   • Los puntos de interrupción detienen la ejecución del programa en el lugar específico donde se colocan, permitiéndote examinar el estado del programa en ese momento.
2. Uso del depurador integrado:
   • Haz clic en la pestaña de de depuración «Run & Debug» en la barra lateral izquierda o presiona Ctrl + Shift + D para abrir la vista de depuración.
   • Selecciona la configuración de depuración adecuada del menú desplegable en la barra de herramientas de depuración.
   • Ejecuta tu programa en modo de depuración haciendo clic en el botón de reproducción (F5), o seleccionando «Iniciar Depuración» en el menú.
   • Cuando se alcanza un punto de interrupción, el depurador se activará y podrás inspeccionar las variables, examinar el estado del programa y realizar acciones como paso a paso (F10) o paso a paso en detalle (F11) para avanzar a través del código línea por línea y entender su funcionamiento.

10. Publicación del proyecto

1. Preparación del proyecto para la producción:
   • Antes de publicar tu proyecto, asegúrate de que todos los recursos, como archivos HTML, CSS, JavaScript y archivos de imagen, estén optimizados y listos para su implementación en un entorno de producción.
   • Realiza pruebas exhaustivas para detectar errores y problemas de rendimiento antes de la implementación.
2. Configuración de entornos de desarrollo y producción:
   • Utiliza herramientas como variables de entorno y archivos de configuración para diferenciar entre entornos de desarrollo y producción.
   • Asegúrate de que tu aplicación esté configurada correctamente para funcionar en un entorno de producción, incluyendo la configuración del servidor, las rutas de los archivos estáticos y cualquier otra configuración específica del entorno.
3. Uso de VS Code para cargar archivos en un servidor remoto o servicios de alojamiento:
   • Utiliza extensiones de VS Code como «FTP Simple» o «SFTP» para cargar archivos directamente desde el editor a un servidor remoto a través de FTP o SFTP.
   • Investiga opciones de servicios de alojamiento como GitHub Pages u otros servicios de alojamiento en la nube para implementar tu proyecto de manera rápida y sencilla.

Después de formarte con este curso de Visual Studio Code solo te queda seguir practicando con tus proyectos todo lo aprendido e utilizar nuevas funcionalidades y extensiones. Esperamos que con este tutorial puedas mejorar tus habilidades de desarrollo web y optimizar tu flujo de trabajo.