Mira la lección en vídeo
Accede al vídeo completo de esta lección y a más contenido exclusivo con el Plan Plus.
Desbloquear Plan PlusCrear archivos y seleccionar el tipo de lenguaje
La creación de archivos en Visual Studio Code es una operación fundamental que puede realizarse de múltiples formas, cada una adaptada a diferentes flujos de trabajo. El editor no solo facilita la creación, sino que también proporciona un sistema inteligente de reconocimiento automático del tipo de archivo basado en su extensión.
Métodos para crear archivos
Visual Studio Code ofrece tres métodos principales para crear nuevos archivos, cada uno con sus propias ventajas según el contexto de trabajo.
1 - Desde el Explorer:
El método más visual consiste en utilizar el panel Explorer. Al hacer clic derecho en cualquier carpeta del árbol de archivos, aparece un menú contextual con la opción "New File". Este enfoque es especialmente útil cuando necesitas crear un archivo en una ubicación específica dentro de tu proyecto.
2 - Mediante el menú File:
La opción tradicional se encuentra en File > New File
o utilizando el atajo de teclado Ctrl+N
(Windows/Linux) o Cmd+N
(macOS). Este método crea un archivo temporal que inicialmente aparece como "Untitled-1" y requiere ser guardado posteriormente con Ctrl+S
para definir su nombre y ubicación.
3 - Atajos de teclado avanzados:
Para usuarios que prefieren el teclado, Ctrl+Alt+Windows+N
permite crear un archivo directamente en la carpeta actualmente seleccionada en el Explorer, combinando la rapidez del teclado con la precisión de ubicación.
Extensiones de archivo y reconocimiento automático
La extensión del archivo determina cómo Visual Studio Code interpreta y presenta el contenido. Las extensiones más comunes incluyen:
.html
- Archivos de marcado web con resaltado de sintaxis HTML.css
- Hojas de estilo con coloreado específico para propiedades CSS.js
- JavaScript con soporte completo para ES6+ y Node.js.py
- Python con indentación inteligente y detección de errores.md
- Markdown con vista previa integrada.json
- Archivos de configuración con validación de sintaxis.txt
- Texto plano sin formato especial
Cuando guardas un archivo con una extensión específica, Visual Studio Code activa automáticamente el Language Mode correspondiente, aplicando el resaltado de sintaxis, la indentación y las características específicas del lenguaje.
Language Mode y detección automática
El Language Mode es el sistema que determina cómo Visual Studio Code interpreta el contenido de un archivo. Esta detección se basa en varios factores:
La extensión del archivo es el indicador principal. Por ejemplo, un archivo .js
activa automáticamente el modo JavaScript, mientras que .py
activa el modo Python. Esta detección ocurre instantáneamente al abrir o guardar el archivo.
En casos donde la extensión no es suficiente, Visual Studio Code analiza el contenido del archivo buscando patrones característicos. Por ejemplo, un archivo sin extensión que comience con #!/usr/bin/python
será reconocido como Python.
Cambiar manualmente el Language Mode
Ocasionalmente necesitarás modificar manualmente el Language Mode, especialmente cuando trabajas con archivos sin extensión o con extensiones ambiguas.
Para cambiar el lenguaje, haz clic en el indicador de lenguaje ubicado en la esquina inferior derecha de la barra de estado. Este indicador muestra el lenguaje actualmente detectado (por ejemplo, "JavaScript" o "Python").
Al hacer clic, se abre la Command Palette filtrada con opciones de lenguaje. Puedes escribir el nombre del lenguaje deseado o navegar por la lista. La selección se aplica inmediatamente, cambiando el resaltado de sintaxis y las características del editor.
Alternativamente, puedes usar Ctrl+Shift+P
para abrir la Command Palette y escribir "Change Language Mode" para acceder a la misma funcionalidad.
Iconos de archivos según el tipo
Guarda tu progreso
Inicia sesión para no perder tu progreso y accede a miles de tutoriales, ejercicios prácticos y nuestro asistente de IA.
Más de 25.000 desarrolladores ya confían en CertiDevs
Visual Studio Code utiliza un sistema de iconos que facilita la identificación rápida del tipo de archivo en el Explorer. Cada extensión tiene un icono distintivo:
Los archivos HTML muestran un icono naranja con el símbolo <>
, mientras que los archivos CSS presentan un icono azul con cascadas estilizadas. Los archivos JavaScript utilizan un icono amarillo con "JS", y los archivos Python muestran un icono azul y amarillo con el logo de Python.
Esta representación visual acelera la navegación en proyectos con múltiples tipos de archivo, permitiendo localizar rápidamente el archivo deseado sin necesidad de leer las extensiones completas.
Crear archivos en carpetas específicas
Para mantener una estructura organizada en tus proyectos, es fundamental crear archivos en las carpetas correctas desde el inicio.
En el Explorer, navega hasta la carpeta deseada y haz clic derecho sobre ella. Selecciona "New File" del menú contextual. El archivo se creará directamente en esa ubicación, y podrás escribir inmediatamente el nombre completo incluyendo la extensión.
Si ya tienes un archivo abierto y quieres crear otro en la misma carpeta, puedes usar Ctrl+N
para crear un archivo temporal y luego Ctrl+S
para guardarlo, navegando hasta la carpeta deseada en el diálogo de guardado.
Esta práctica de organización temprana evita la necesidad de mover archivos posteriormente y mantiene tu proyecto estructurado desde el principio.
Aprendizajes de esta lección de VSCode
- Conocer los diferentes métodos para crear archivos en Visual Studio Code.
- Entender cómo la extensión del archivo determina el reconocimiento automático del lenguaje.
- Aprender a cambiar manualmente el Language Mode en archivos sin extensión o con extensiones ambiguas.
- Identificar la función de los iconos de archivos según su tipo para facilitar la navegación.
- Aplicar buenas prácticas para crear archivos en carpetas específicas y mantener la estructura organizada del proyecto.
Completa este curso de VSCode y certifícate
Únete a nuestra plataforma de cursos de programación y accede a miles de tutoriales, ejercicios prácticos, proyectos reales y nuestro asistente de IA personalizado para acelerar tu aprendizaje.
Asistente IA
Resuelve dudas al instante
Ejercicios
Practica con proyectos reales
Certificados
Valida tus conocimientos
Más de 25.000 desarrolladores ya se han certificado con CertiDevs