Visual Studio Code (VScode) es un editor de código fuente ligero pero potente que se ejecuta en su escritorio. Viene con soporte incorporado para JavaScript, TypeScript y Node.js y tiene un rico ecosistema de extensiones para otros idiomas y herramientas.
Tabla de contenido
- Instalación
- Primer lanzamiento e información general de la interfaz
- Configuración esencial
- Extensiones
- Configuración del espacio de trabajo
- Atajos de teclado
- Terminal integrado
- Integración de control de fuente
- Depuración
- Recursos adicionales
Instalación
Windows
- Visite el Página de descarga de VScode
- Haga clic en el botón Descargar Windows
- Ejecute el instalador (archivo .exe)
- Siga el asistente de instalación
- Verifique las opciones para:
- Crear un icono de escritorio
- Agregue “Abrir con código” al menú contextual de Windows Explorer
- Registre el código como editor para los tipos de archivos compatibles
macosa
- Visite el Página de descarga de VScode
- Haga clic en el botón Descargar Mac
- Abra el archivo .zip descargado
- Arrastre Visual Studio Code.App a la carpeta de aplicaciones
- Opcional: Agregue VScode a su muelle
Linux
- Visite el Página de descarga de VScode
- Elija el paquete apropiado para su distribución (.deb, .rpm, etc.)
- Para Debian/Ubuntu:
- Para Red Hat/Fedora:
Primer lanzamiento e información general de la interfaz
Cuando abres VScode por primera vez, verás:
- Página de bienvenida: Contiene enlaces rápidos a comandos comunes y proyectos recientes
- Barra de actividad: Barra lateral izquierda con iconos para diferentes vistas:
- Explorer: navegador de archivos
- Buscar: busque y reemplace
- Control de origen: integración Git
- Ejecutar y depurar: panel de depuración
- Extensiones: gestionar extensiones
- Barra de estado: Barra inferior que muestra información sobre el archivo y el editor actuales
- Área de editor: Área de codificación principal (se puede dividir en múltiples editores)
- Panel: Panel inferior que puede mostrar terminal, salida, problemas, etc.
Configuración esencial
Configuración de acceso por:
- Windows/Linux: archivo> Preferencias> Configuración
- MacOS: Código> Preferencias> Configuración
Configuración recomendada para considerar:
- Tema:
- Archivo> Preferencias> Tema de color (o Ctrl+K Ctrl+T)
- Opciones populares: Dark+, Light+, Monokai, Solarized
- Fuente:
- Auto Guardar:
- Tamaño de pestaña:
- Formato:
Extensiones
El poder de VScode proviene de sus extensiones. Para instalar extensiones:
- Haga clic en el icono de extensiones en la barra de actividades (o presione CTRL+Shift+X)
- Buscar extensiones por su nombre
- Haga clic en Instalar
Extensiones esenciales por categoría:
General
- Más bonito – formatero de código: Formato de código consistente
- Eslint: Pelusa de javascript
- EditorConfig: Mantener estilos de codificación consistentes
Lenguas
- Pitón: Soporte completo de Python
- C/C ++: C y C ++ Intellisense, depuración
- Paquete de extensión de Java: Herramientas de desarrollo de Java
- Javascript (ES6) Fragmentos de código: Fragmentos para JavaScript
Temas
- Tema material: Paquete de tema popular
- Un Dark Pro: El tema icónico de Atom
Productividad
- Gitlens: Capacidades de sobrealimentación git
- Compartir en vivo: Edición colaborativa
- Path IntelliSense: Nombres de archivo de autocompletar
Configuración del espacio de trabajo
Un espacio de trabajo en VScode representa una o más carpetas que se abren en la ventana de un editor.
- Abrir una carpeta: Archivo> Abrir carpeta (Ctrl+K Ctrl+O)
- Guardar el espacio de trabajo: Archivo> Guardar el espacio de trabajo como …
- Configuración del espacio de trabajo: Cree una carpeta .vscode en su proyecto con:
- settings.json: configuración específica del proyecto
- Launch.json: configuraciones de depuración
- tareas.json: construir configuraciones de tareas
- extensiones.json: extensiones recomendadas
Ejemplo de configuración.json para un proyecto JavaScript:
Atajos de teclado
VScode tiene muchos atajos de teclado. Aquí están los más esenciales:
- CTRL+P: Open rápido, vaya al archivo
- Ctrl+Shift+P: Mostrar paleta de comando
- CTRL+espacio: Sugerencia de activación
- F12: Ir a la definición
- Alt+F12: Definición de vista
- Shift+Alt+F: Documento de formato
- F5: Empiece a depurar
- CTRL+`: Terminal de palanca
- Ctrl+B: Barra lateral de palanca
- Ctrl+/: Comentario de la línea de alternar
- Ctrl+K Ctrl+C: Agregar comentario de línea
- Ctrl+K Ctrl+U: Eliminar el comentario de la línea
Terminal integrado
VScode incluye un terminal integrado:
- Terminal abierto: Ver> Terminal
- Múltiples terminales: Haga clic en el icono más
- Terminales de cambio: Usa el menú desplegable
Integración de control de fuente
VScode tiene soporte Git incorporado:
- Inicializar repositorio: Haga clic en el icono de control de origen y “Inicializar el repositorio”
- Cambios en la etapa: Haga clic en el + Next a los archivos modificados
- Confirmar cambios: Ingrese un mensaje y presione Ctrl+Enter
- Empujar/tirar: Use el menú de elipsis (…) para comandos git adicionales
- Diferencia visual: Haga clic en un archivo modificado para ver los cambios
Depuración
Configurar la depuración para su proyecto:
- Crear una configuración de lanzamiento:
- Haga clic en el icono Ejecutar y Depurar
- Haga clic en “Crear un archivo de Elunch.json”
- Seleccione su entorno
- Establecer puntos de interrupción: Haga clic en la canaleta junto a los números de línea
- Empiece a depurar: Presione F5
- Use controles de depuración: Continuar, darle la vuelta, entrar, salir
- Ver variables: Agregar expresiones al panel de reloj
Recursos adicionales
Nikhil es consultor interno en MarktechPost. Está buscando un doble grado integrado en materiales en el Instituto Indio de Tecnología, Kharagpur. Nikhil es un entusiasta de AI/ML que siempre está investigando aplicaciones en campos como biomateriales y ciencias biomédicas. Con una sólida experiencia en la ciencia material, está explorando nuevos avances y creando oportunidades para contribuir.