Validez le morceau sélectionné, pas le fichier entier

• Choisissez la portée d’un fichier, d’un morceau ou d’une ligne pour un commit spécifique.
• Sélectionnez les deux lignes supprimées/ajoutées pour un remplacement.
• Lisez l'index et le contenu de travail de manière indépendante.
• Conservez la modification de rayon non validée pour la leçon 8.

Vous commencez là où la leçon 6 s'est terminée : le principal d'origine a deux commits, la leçon exécutable 6 entrées et aucune télécommande. Travail/index propre ; une distribution ignorée peut exister. La vidéo a été enregistrée avec Git 2.52.0 et GitTree 2.0 sur Ubuntu 24.04 : les deux modifications ont été enregistrées dans le propre éditeur de GitTree, le morceau et les lignes ont été mis en scène et la validation a été effectuée dans l'application, et les vérifications du terminal ont été effectuées par rapport à ce que l'application a créé ou par rapport à des copies séparées. Les commandes de morceaux et de lignes étaient exploitées pour de vrai ; la route des correctifs natifs s'exécutait dans une copie séparée. Rien n'a été exécuté sur macOS ou Windows, et Ubuntu est le seul système Linux enregistré. La version Git minimale de GitTree est 2.39.0. Une fois connecté, le travail local est sur le plan gratuit.

Un dossier peut contenir plusieurs décisions indépendantes. Un morceau regroupe des modifications textuelles proches, pas nécessairement une seule intention commerciale. La sélection d'un remplacement nécessite l'ancienne ligne supprimée and la nouvelle ligne ajoutée ; choisir uniquement l'ajout peut créer un patch différent.

L'index décrit une arborescence suivante complète, même lorsque vous sélectionnez seulement quelques lignes modifiées. Ici, HEAD a CSS-01, l'index devient CSS-02-INDEX et le CSS de travail reste CSS-02-WORKING. L'enregistrement des modifications modifie les octets de travail ; Stage Lines modifie l'index ; le commit normal se déplace principal mais n'écrase pas le rayon restant. Aucun changement de référence à distance. Staging partiel natif et application de correctifs utilisent les mêmes distinctions de contenu.

Remplacez index.html par HTML-02-HEADLINE et working styles.css par CSS-02-WORKING. CSS-02-INDEX ci-dessous est le target index, pas un corps avec lequel écraser le fichier de travail.

index.html — HTML-02-HEADLINE

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>GitTree Features — course demo</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header class="site-header">
    <a href="#main">GitTree Features</a>
  </header>
  <main id="main">
    <section class="hero" aria-labelledby="hero-title">
      <p class="eyebrow">GitTree Learn demo project</p>
      <h1 id="hero-title">See your work clearly.</h1>
      <p id="hero-copy">Choose one change, then check what Git saved.</p>
    </section>
    <section class="features" aria-labelledby="features-title">
      <h2 id="features-title">Follow your work</h2>
      <div class="cards">
        <article class="feature-card">
          <h3>History</h3>
          <p>Read commits and branches together.</p>
        </article>
        <article class="feature-card">
          <h3>Changes</h3>
          <p>Review the exact content selected for a commit.</p>
        </article>
        <article class="feature-card">
          <h3>Recovery</h3>
          <p>Inspect the scope of a recovery point before using it.</p>
        </article>
      </div>
    </section>
  </main>
  <footer><p>Built by a fictional team for GitTree Learn.</p></footer>
  <script type="module" src="site.js"></script>
</body>
</html>

styles.css — CSS-02-INDEX

:root {
  color-scheme: light;
  --page: #f7f8fa;
  --surface: #ffffff;
  --text: #17212e;
  --link: #154ab5;
  --line: #bac4d0;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font: 1rem/1.6 system-ui, sans-serif;
}

a {
  color: var(--link);
}

.site-header,
main,
footer {
  width: min(68rem, 100% - 2rem);
  margin-inline: auto;
}

.site-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1rem;
}

.hero {
  max-width: 48rem;
  padding-block: 3rem;
}

h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.2;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: 1rem;
}

.feature-card {
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background: var(--surface);
}

section {
  margin-block-end: 2rem;
}

button,
input {
  font: inherit;
}

button,
input {
  padding: 0.5rem 0.75rem;
}

:focus-visible {
  outline: 3px solid var(--link);
  outline-offset: 3px;
}

form {
  display: grid;
  max-width: 28rem;
  gap: 0.5rem;
}

styles.css — CSS-02-WORKING

:root {
  color-scheme: light;
  --page: #f7f8fa;
  --surface: #ffffff;
  --text: #17212e;
  --link: #154ab5;
  --line: #bac4d0;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font: 1rem/1.6 system-ui, sans-serif;
}

a {
  color: var(--link);
}

.site-header,
main,
footer {
  width: min(68rem, 100% - 2rem);
  margin-inline: auto;
}

.site-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1rem;
}

.hero {
  max-width: 48rem;
  padding-block: 3rem;
}

h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.2;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: 1rem;
}

.feature-card {
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: var(--surface);
}

section {
  margin-block-end: 2rem;
}

button,
input {
  font: inherit;
}

button,
input {
  padding: 0.5rem 0.75rem;
}

:focus-visible {
  outline: 3px solid var(--link);
  outline-offset: 3px;
}

form {
  display: grid;
  max-width: 28rem;
  gap: 0.5rem;
}

1. Dans Show Files (Commande/Ctrl+Shift+E), concentrez le focus sur chaque fichier existant et Entrée ; collez son corps de travail indiqué, puis Save ou Commande/Ctrl+S. Ne collez pas la cible de l'index sur du CSS fonctionnel.
2. Back to Graph → Palette de commandes… (Commande/Ctrl+Maj+P) → Show Working Changes. Cliquez sur index.html sous Unstaged Files.
3. Choisissez Hunk dans la vue Diff (palette Show Diff as Hunks). Lors du remplacement du titre, choisissez Stage Hunk. Attendez-vous seulement à ce changement complet de titre dans Staged Files. Le fichier entier Stage File serait équivalent uniquement parce que ce code HTML n'a aucune autre modification.
4. Cliquez sur styles.css sous Fichiers non préparés. Gardez Ignore whitespace éteint. Recherchez le remplacement de la largeur maximale à la ligne 41 : 44rem → 48rem.
5. Cochez la case de la ligne max-width: 44rem; supprimée et de la ligne max-width: 48rem; ajoutée. Leurs noms accessibles incluent le signe, le numéro de ligne et le texte. Activez Stage Lines dans la barre d'outils de sélection. Ne choisissez pas la paire de rayons à la ligne 59.
6. Alternative dans une rediffusion séparée : Stage Hunk sur uniquement le morceau de largeur maximale donne la même cible ici. Split/palette Show Diff Side by Side place les cellules supprimées/ajoutées sur leur ancien/nouveau côté approprié ; les deux ont leurs propres commandes de sélection. Revenez à Hunk pour la prise principale.
7. Cliquez sur staged styles.css : seule la largeur maximale doit changer. Cliquez sur styles.css non mis en scène : seul le rayon reste. Utilisez Clear pour effacer une sélection, et non pour supprimer du contenu. Si vous avez trop mis en scène, sélectionnez le morceau mis en scène pertinent et Unstage Hunk ou choisissez les deux lignes de remplacement par étapes et Unstage Lines, puis revérifiez.
8. Entrez le résumé feat: refine the hero and card spacing, les options ordinaires sont toutes désactivées et Commit Changes to 2 Files (ou Commande/Ctrl+Entrée une fois). Vérifiez la validation partielle et conservez le rayon non intermédiaire.
9. N'utilisez pas Stage All Changes, Discard ou n'effectuez pas de validation de nettoyage. la leçon 8 possède délibérément le commit de rayon.

Une sélection obsolète est liée à l’empreinte digitale diff ; recharger après toute modification externe au lieu d'appliquer un correctif destiné aux anciens octets. Si le masquage des espaces supprime l'éligibilité au choix de ligne, lisez la raison et restaurez la différence complète plutôt que de prétendre que le choix s'est produit.

Après avoir enregistré les deux modifications :

git diff -- styles.css

Différentiel de fonctionnement complet observé :

diff --git a/styles.css b/styles.css
index d443c7e..6382365 100644
--- a/styles.css
+++ b/styles.css
@@ -38,7 +38,7 @@ footer {
 }
 
 .hero {
-  max-width: 44rem;
+  max-width: 48rem;
   padding-block: 3rem;
 }
 
@@ -56,7 +56,7 @@ h1 {
 .feature-card {
   padding: 1rem;
   border: 1px solid var(--line);
-  border-radius: 0.5rem;
+  border-radius: 0.75rem;
   background: var(--surface);
 }
 

Itinéraire interactif natif : git add -p -- index.html sélectionne son morceau principal. git add -p -- styles.css peut accepter le premier morceau et rejeter le morceau de rayon. Les invites varient selon la version de Git ; inspectez le contenu avant de répondre, pas une séquence o/n mémorisée.

Un équivalent natif déterministe consiste à enregistrer le correctif complet suivant outside le projet sous <selection.patch> et à l'appliquer uniquement à l'index :

diff --git a/styles.css b/styles.css
--- a/styles.css
+++ b/styles.css
@@ -38,7 +38,7 @@
 }
 
 .hero {
-  max-width: 44rem;
+  max-width: 48rem;
   padding-block: 3rem;
 }
 

git add -- index.html
git apply --cached --check "<selection.patch>"
git apply --cached "<selection.patch>"
git diff --cached -- styles.css

Les deux vérifications/applications ont réussi silencieusement dans le luminaire. La requête finale imprimée :

diff --git a/styles.css b/styles.css
index d443c7e..4dc8369 100644
--- a/styles.css
+++ b/styles.css
@@ -38,7 +38,7 @@ footer {
 }
 
 .hero {
-  max-width: 44rem;
+  max-width: 48rem;
   padding-block: 3rem;
 }
 

git show :styles.css doit être égal au CSS-02-INDEX complet ci-dessus. Le fichier de travail doit toujours être égal à CSS-02-WORKING complet. Aucune des deux commandes --cached patch n'écrit du CSS fonctionnel.

Alternative de validation native, pas de répétition après le succès de l'application :

git commit --quiet -m "feat: refine the hero and card spacing"
git status --short
git diff -- styles.css

Validation silencieuse : sortie 0, aucune sortie. Statut :

 M styles.css

Diff de travail restant total :

diff --git a/styles.css b/styles.css
index 4dc8369..6382365 100644
--- a/styles.css
+++ b/styles.css
@@ -56,7 +56,7 @@ h1 {
 .feature-card {
   padding: 1rem;
   border: 1px solid var(--line);
-  border-radius: 0.5rem;
+  border-radius: 0.75rem;
   background: var(--surface);
 }
 

A la fin de cette leçon : trois commits sur main. HEAD/index contient le nouveau titre et le héros plus large, mais le rayon y est toujours de 0,5rem ; le rayon de travail est de 0,75 rem. Seul styles.css a une modification non mise en scène. Pas de télécommande, de fusion ou de rebase. Les alternatives optionnelles de notebook/clean ne remplacent pas ce point de contrôle.

• Sélectionner uniquement la moitié ajoutée d'un remplacement : pas nécessairement le correctif prévu.
• Mise en scène de l'intégralité du fichier CSS : inclut également le rayon.
• Coller du CSS d'index cible sur du CSS de travail : perd la modification intentionnellement séparée.
• Faire un commit de nettoyage maintenant : contredit la tâche de départ de la leçon 8.

Utilisez des comparaisons mises en cache/fonctionnelles pour diagnostiquer une incompatibilité d’index. Avant de valider, Unstage Lines/Hunk peut modifier la sélection sans abandonner la modification de travail. Si Git refuse un patch mal formé ou obsolète, arrêtez ; ne le forcez pas. Relisez le fichier actuel et resélectionnez le contenu exact. Un commit/hook échoué n’est pas une autorisation pour ignorer les hooks.

Répondez à chaque question, puis lisez pourquoi. Les questions marquées « Obligatoire » comptent pour terminer la leçon.

1. Question 1 de 6

   Question 1 de 6

   Qu'est-ce qui définit un beau gosse ?

   Choisissez une réponse.

   Une fonctionnalité entière toujours

   Une succursale

   Contexte de comparaison à proximité

   Vérifier la réponse
2. Question 2 de 6

   Question 2 de 6

   À la scène 44rem → 48rem, à quelles lignes appartiennent ?

   Choisissez chaque réponse qui s'applique.

   44rem supprimé

   Paire de rayons aussi

   Ajout de 48rem

   Vérifier la réponse
3. Question 3 de 6

   Question 3 de 6Obligatoire

   Après la sélection partielle, que sont la largeur et le rayon dans l'index ?

   Choisissez une réponse.

   48rem et 0,5rem

   48rem et 0,75rem

   44rem et 0,75rem

   Vérifier la réponse
4. Question 4 de 6

   Question 4 de 6Obligatoire

   Si vous mettez également en scène radius avant de vous engager, que reste-t-il ?

   Choisissez une réponse.

   Une nouvelle télécommande

   Radius toujours sans mise en scène

   Aucune différence CSS

   Vérifier la réponse
5. Question 5 de 6

   Question 5 de 6

   Une sauvegarde externe modifie le diff sélectionné. Qu'est-ce qui est sûr ?

   Choisissez une réponse.

   Forcer l'ancien patch

   Supprimer tout le fichier

   Recharger/resélectionner les octets actuels

   Vérifier la réponse
6. Question 6 de 6

   Question 6 de 6Obligatoire

   Vérifiez le point de contrôle terminé. Quelles preuves correspondent ?

   Choisissez chaque réponse qui s'applique.

   Trois commits ; Largeur TÊTE/index 48rem, rayon 0,5rem

   Un commit de nettoyage a déjà enregistré un rayon

   Rayon de travail 0,75rem ; seul styles.css modifié

   Vérifier la réponse

Expliquez les trois états différents de rayon/largeur à l’aide des fichiers complets. Entrée modifiée : si vous préparez également la paire de rayons, le prochain commit contient les deux modifications CSS et ne laisse aucune différence CSS. Testez cela uniquement dans une rediffusion séparée ; conserver la modification du rayon canonique pour la leçon 8.

• Sélectionnez la portée qui correspond au changement souhaité.
• Vérifiez le fichier préparé complet et le diff de travail restant.
• Séparez le travail utile de manière indépendante sans le détruire.

• Lire la comparaison avant de juger un changement (leçon 6)
• Mettez en scène l'instantané prévu et effectuez votre premier commit (leçon 5)
• Télécharger GitTree

Morceau — كتلة; lignes sélectionnées — الأسطر المختارة ; scène — تجهيز; supprimer la scène — إلغاء التجهيز; pièce — رقعة; index — الفهرس.