Introducción:
Visual Studio Code es un editor de código ligero pero potente desarrollado por Microsoft. En este tutorial, te mostraré cómo empezar a usar Visual Studio Code para escribir y editar código de forma eficiente.
Paso 1: Descarga e Instalación:
Ve al sitio web oficial de Visual Studio Code en https://code.visualstudio.com/.
Haz clic en el botón de descarga para tu sistema operativo (Windows, macOS, Linux).
Selecciona tu Sistema Operativo.
Una vez descargado, ejecuta el archivo de instalación y sigue las instrucciones para completar la instalación.
Atención: Muy IMPORTANTE seleccionar la opción «….PATH….» Si o Si para evitar problemas futuros.
Una vez terminada la instalación lo ejecutamos.
Paso 2: Visual Studio Code en Español/Castellano:
Si Nuestro Visual Studio Code esta en Inglés debemos pasarlo a Español. para ello seguimos los siguientes sencillos pasos:
- CTRL + SHIFT + P
- Escribir/Seleccionar: Configure Display Language
- Elegir en la lista: Spanish
- Install
- Reiniciar (si no se reinicia automaticamente).
Listo Nuestro VS Code ya estará en español.
Paso 3: Interfaz de Usuario:
Al abrir Visual Studio Code, verás una interfaz limpia y minimalista.
En la parte superior encontrarás la barra de menú con opciones como «File», «Edit», «View», etc.
A la izquierda, tienes el explorador de archivos donde puedes navegar por tu proyecto.
En la parte inferior, encontrarás la barra de estado que muestra información útil como el lenguaje de programación actual, el estado de Git, etc.
Paso 4: Crear un Nuevo Archivo:
Haz clic en «File» en la barra de menú.
Selecciona «New File» para crear un nuevo archivo.
Escribe el código en el nuevo archivo.
Paso 5: Guardar y Abrir Archivos:
Para guardar un archivo, haz clic en «File» y luego en «Save» o utiliza el atajo de teclado Ctrl + S.
Para abrir un archivo existente, haz clic en «File» y luego en «Open File» o utiliza el atajo de teclado Ctrl + O.
Paso 6: Extensiones:
Visual Studio Code tiene un sistema de extensiones que te permite personalizar y ampliar su funcionalidad.
Haz clic en el icono de extensiones en la barra lateral izquierda o presiona Ctrl + Shift + X para abrir la vista de extensiones.
Busca y selecciona las extensiones que deseas instalar.
Haz clic en «Install» para instalar la extensión seleccionada.
Para trabajar profesionalmente con HTML-CSS-JS debemos instalar las siguientes extensiones.
- Live Server (Ritwick Dey)
- Live Preview (Microsoft)
- vscode-icons (VSCode Icons Team)
Paso 7: Configuración:
Puedes personalizar Visual Studio Code según tus preferencias.
Haz clic en «File» y luego en «Preferences» para acceder a la configuración.
Aquí puedes cambiar la apariencia, configurar atajos de teclado, instalar temas, etc.
Paso 8: Atajos de teclado:
Es sumamente importe para agilizar nuestra tarea conocer los atajos de teclado en Visual Studio Code, pero hay que tener en cuenta el sistema operativo que utilizamos, porque tienen variaciones.
Les dejo Los atajos de teclado para los tres sistemas operativos más utilizados en la actualidad.
Aclaración:
Visual Studio Code es excelente para edición y programación de muchisimos lenguajes de programación, por lo que cada uno requerirá la instalación de diferentes extensiones. Estas son las fundamenteales para nuestro trabajo en este caso.
Conclusión:
¡Felicidades! Ahora sabes cómo empezar a usar Visual Studio Code para escribir y editar código. Explora las diversas características y extensiones para mejorar tu experiencia de desarrollo.