Explicación de la interfaz de VSCode

1. Página de inicio

Después de completar la instalación de VSCode, haga clic en el ícono de VSCode y la pantalla de inicio se mostrará de la siguiente manera:

La imagen de arriba muestra la pantalla de bienvenida de Visual Studio Code (VS Code), que es la página de inicio de un editor de código y proporciona acceso rápido a diferentes funciones y recursos.

A continuación se explica cada parte de la imagen:

Barra de actividades (Activity Bar)：

• Se encuentra en el lado izquierdo y contiene varios íconos, cada uno de los cuales representa una vista de función de VS Code.
• En la imagen, cuatro funciones están marcadas con flechas rojas:
  • Gestión de documentos: puede referirse al Explorador de archivos, utilizado para gestionar archivos y carpetas.
  • Búsqueda: se utiliza para buscar archivos o texto en todo el espacio de trabajo.
  • Control de versiones: normalmente está integrado con Git para la gestión de versiones de código.
  • Depuración (debug): se utiliza para iniciar sesiones de depuración y realizar la depuración de código.

Inicio (Start)：

• Se encuentra encima de la barra de actividades y contiene accesos directos a funciones de uso frecuente.
• En la imagen, tres opciones están marcadas con un recuadro rojo:
  • Nuevo archivo: crea un nuevo archivo.
  • Abrir...: abre un archivo o una carpeta.
  • Ejecutar comando...: utiliza la paleta de comandos para ejecutar comandos.

Directorios abiertos recientemente (Recientes)：

• Muestra una lista de las carpetas abiertas recientemente, lo que permite cambiar rápidamente a un directorio de trabajo anterior.
• En la imagen, el directorio abierto recientemente, por ejemplo "ejemplo-test", está marcado con un recuadro rojo.

Tutorial (Tutorial)：

• Se encuentra en el lado derecho de la pantalla de bienvenida y proporciona enlaces rápidos para ayudar a los usuarios a comprender y usar VS Code.
• En la imagen, tres enlaces están marcados con un recuadro rojo:
  • Comenzar a usar VS Code: ofrece métodos de personalización y guía para el uso de VS Code.
  • Conozca los conceptos básicos: enlaza a los conceptos básicos de VS Code para ayudar a los usuarios a comprender las funciones esenciales.
  • Mejore la eficiencia laboral: ofrece sugerencias para mejorar la eficiencia en el uso de VS Code.

Documentación de VSCode：

• Se encuentra encima de la sección Tutorial y puede ser un enlace a la documentación oficial de VS Code.

2. Página de edición

La interfaz para abrir o editar un código se muestra a continuación:

Barra de actividades y barra lateral

En el lado izquierdo de la interfaz, se puede cambiar entre diferentes módulos de funciones mediante íconos:

• Explorador de archivos (primer ícono): en la imagen se muestra la estructura de archivos del proyecto, que incluye:
  • EJEMPLO-TESTCarpeta: la carpeta del proyecto del espacio de trabajo actual.
  • test.htmlArchivo: el archivo HTML que se está editando actualmente.
• Búsqueda (segundo ícono): se utiliza para buscar contenido de archivos a nivel global (no activado).
• Control de código fuente (tercer ícono): muestra el estado de Git para facilitar la gestión de versiones del código.
• Ejecutar y depurar (cuarto ícono): permite establecer puntos de interrupción y ejecutar código.
• Extensiones (quinto ícono): se utiliza para instalar y administrar complementos.

Justo a la derecha de la barra de actividades, se muestra el contenido específico del módulo de función actual:

• Actualmente se muestraExplorador de archivos。
• La estructura del proyecto se muestra claramente, e incluye:
  • EJEMPLO-TESTTodos los archivos de la carpeta.
  • El archivo que se está editando actualmentetest.html。

Área de edición

Se encuentra en el centro de la interfaz y se utiliza para mostrar y editar el contenido del archivo:

• El área de edición muestratest.htmlel código del archivo.
• Admite resaltado de sintaxis (comoDOCTYPE htmly<h1>etiqueta).
• El cursor se encuentra en la línea 11 (la barra de estado inferior muestra "Línea 11").

Barra de estado

Se encuentra en la parte inferior y muestra información sobre el archivo actual y el entorno de edición:

• Estado de Git: la rama actual esmain(esquina inferior izquierda).
• Información del archivo：
  • Codificación: UTF-8.
  • Secuencia de fin de línea: LF.
  • Tipo de archivo actual: HTML.
• Estado del terminal: muestra que el tipo de terminal abierto actual eszsh。

Otras extensiones