Description de l'interface de VSCode

1. Page de démarrage

Après avoir terminé l'installation de VSCode, cliquez sur l'icône VSCode et l'écran de démarrage s'affiche comme suit :

L'image ci-dessus montre l'écran d'accueil de Visual Studio Code (VS Code). C'est la page de démarrage d'un éditeur de code, offrant un accès rapide à différentes fonctionnalités et ressources.

Voici une description de chaque partie de l'image :

Barre d'activité：

• Située sur le côté gauche, elle contient plusieurs icônes, chacune représentant une vue fonctionnelle de VS Code.
• Quatre fonctions sont marquées par des flèches rouges dans l'image :
  • Gestion des documents: Fait peut-être référence à l'Explorateur, utilisé pour gérer les fichiers et les dossiers.
  • Recherche: Utilisée pour rechercher des fichiers ou du texte dans tout l'espace de travail.
  • Contrôle de version: Généralement intégré à Git pour la gestion des versions du code.
  • Debug: Utilisé pour démarrer une session de débogage pour le débogage du code.

Début：

• Situé au-dessus de la barre d'activité, il contient des raccourcis pour les fonctions courantes.
• Trois options sont marquées par des rectangles rouges dans l'image :
  • New File: Créer un nouveau fichier.
  • Open...: Ouvrir un fichier ou un dossier.
  • Run Command...: Exécuter des commandes à l'aide de la palette de commandes.

Dossiers récemment ouverts (Récents)：

• Affiche une liste des dossiers récemment ouverts, ce qui permet de basculer rapidement vers un répertoire de travail précédent.
• Les dossiers récemment ouverts sont marqués par un rectangle rouge dans l'image, par exemple "example-test".

Visite guidée (Tutoriel)：

• Situé sur le côté droit de l'écran d'accueil, il fournit quelques liens rapides pour aider les utilisateurs à découvrir et à utiliser VS Code.
• Trois liens sont marqués par des rectangles rouges dans l'image :
  • Bien démarrer avec VS Code: Fournit des conseils sur les méthodes de personnalisation et sur l'utilisation spécifique de VS Code.
  • Apprendre les bases: Liens vers les bases de VS Code, aidant les utilisateurs à comprendre les fonctionnalités essentielles.
  • Améliorer la productivité: Fournit des astuces pour améliorer l'efficacité lors de l'utilisation de VS Code.

Documentation de VS Code：

• Situé au-dessus de la section Visite guidée, il s'agit probablement d'un lien vers la documentation officielle de VS Code.

2. Page d'édition

L'interface permettant d'ouvrir ou de modifier du code est présentée ci-dessous :

Barre d'activité et barre latérale

Sur le côté gauche de l'interface, basculez entre différents modules fonctionnels via des icônes :

• Explorateur (première icône): Affiche la structure des fichiers du projet dans l'image, qui comprend :
  • EXAMPLE-TESTDossiers : le dossier de projet de l'espace de travail actuel.
  • test.htmlFichiers : le fichier HTML en cours d'édition.
• Rechercher (deuxième icône): Utilisé pour la recherche globale dans le contenu des fichiers (inactif).
• Contrôle de code source (troisième icône): Affiche l'état Git pour faciliter la gestion des versions du code.
• Exécuter et déboguer (quatrième icône): Permet de définir des points d'arrêt et d'exécuter le code.
• Extensions (cinquième icône): Permet d'installer et de gérer des plugins.

Immédiatement à droite de la barre d'activité, le contenu spécifique du module fonctionnel actuel est affiché :

• Actuellement, l'élément affiché estExplorateur。
• La structure du projet est clairement affichée, y compris :
  • EXAMPLE-TESTTous les fichiers du dossier.
  • Le fichier en cours d'éditiontest.html。

Zone d'édition

Située au milieu de l'interface, elle est utilisée pour afficher et modifier le contenu des fichiers :

• La zone d'édition affichetest.htmlLe code du fichier.
• Prend en charge la coloration syntaxique (commeDOCTYPE htmlet<h1>balises).
• Le curseur est positionné à la ligne 11 (la barre d'état inférieure affiche "Ligne 11").

Barre d'état

Située en bas, affichant des informations sur le fichier actuel et l'environnement d'édition :

• État Git: La branche actuelle estmain(coin inférieur gauche).
• Informations sur le fichier：
  • Format d'encodage : UTF-8.
  • Séquence de fin de ligne : LF.
  • Type de fichier actuel : HTML.
• État du terminal: Affiche le type de terminal actuellement ouvert sous la formezsh。

Autres extensions