One place for hosting & domains

      Visual

      Verwenden der Git-Integration in Visual Studio Code


      Einführung

      Visual Studio Code (VS-Code) hat sich zu einem der beliebtesten Editoren für die Webentwicklung entwickelt. Dank seiner vielen integrierten Funktionen wie der Integration der Quellcodeverwaltung, insbesondere mit Git, hat er eine solche Popularität erlangt. Die Nutzung der Leistungsfähigkeit von Git innerhalb von VS-Code kann Ihren Workflow effizienter und robuster machen.

      In diesem Tutorial erkunden Sie die Verwendung der Quellcodeverwaltungs-Integration in VS-Code mit Git.

      Voraussetzungen

      Um dieses Tutorial zu absolvieren, benötigen Sie Folgendes:

      Schritt 1 — Vertrautmachen mit der Registerkarte Quellcodeverwaltung

      Was Sie zuerst tun müssen, um die Vorteile der Quellcodeverwaltung-Integration zu nutzen, ist die Initialisierung eines Projekts als Git-Repository.

      Öffnen Sie Visual Studio Code und greifen Sie auf das integrierte Terminal zu. Sie können dies durch Verwendung der Tastenkombination STRG+` unter Linux, macOS oder Windows öffnen.

      Erstellen Sie in Ihrem Terminal ein Verzeichnis für ein neues Projekt und wechseln Sie in dieses Verzeichnis:

      • mkdir git_test
      • cd git_test

      Erstellen Sie dann Git-Repository:

      Eine weitere Möglichkeit, dies mit Visual Studio Code zu bewerkstelligen, ist das Öffnen der Registerkarte Quellcodeverwaltung (das Symbol sieht aus wie eine Straßenverzweigung) im linken Bereich:

      Symbol für Quellcodeverwaltung

      Wählen Sie als Nächstes Open Folder (Ordner öffnen):

      Screenshot mit der Schaltfläche „Ordner öffnen“

      Dadurch wird Ihr Datei-Explorer für das aktuelle Verzeichnis geöffnet. Wählen Sie das bevorzugte Projektverzeichnis und klicken Sie auf Open (Öffnen).

      Wählen Sie dann Initialize Repository (Repository initialisieren):

      Screenshot, der die Schaltfläche „Repository initialisieren“ zeigt

      Wenn Sie nun Ihr Dateisystem überprüfen, sehen Sie, dass es ein Verzeichnis .git enthält. Verwenden Sie dazu das Terminal, um zu Ihrem Projektverzeichnis zu navigieren und alle Inhalte aufzulisten:

      Sie sehen das erstellte Verzeichnis .git:

      Output

      Nachdem das Repository nun initialisiert wurde, fügen Sie eine Datei namens index.html hinzu.

      Nachdem Sie dies getan haben, sehen Sie im Fenster Source Control (Quellcodeverwaltung), dass Ihre neue Datei mit dem Buchstaben U daneben angezeigt wird. U steht für unverfolgte Datei, d. h. eine Datei, die neu ist oder geändert wurde, aber dem Repository noch nicht hinzugefügt wurde:

      Screenshot einer unverfolgten Datei mit dem Buchstaben U-Indikator

      Sie können jetzt auf das Plus-Symbol (+) neben der Auflistung der Datei index.html klicken, um die Datei nach dem Repository zu verfolgen.

      Sobald die Datei hinzugefügt wurde, ändert sich der Buchstabe neben der Datei an eine A. A steht für eine neue Datei, die dem Repository hinzugefügt wurde.

      Um Ihre Änderungen zu übergeben, geben Sie eine Übergabe-Nachricht in das Eingabefeld oben im Fenster Source Control (Quellcodeverwaltung) ein. Klicken Sie dann auf das Prüfsymbol, um die Übergabe auszuführen.

      Screenshot einer hinzugefügten Datei mit dem Buchstabe-A-Indikator und der Übergabenachricht

      Danach werden Sie feststellen, dass keine Änderungen ausstehen.

      Fügen Sie als Nächstes Ihrer Datei index.html etwas Inhalt hinzu.

      Sie können eine Emmet-Verknüpfung verwenden, um ein HTML5-Skelett in VS-Code zu generieren, indem Sie die Taste ! drücken, gefolgt von der Taste Tab. Fahren Sie fort und fügen Sie dem <body> etwas wie eine Überschrift <h1> hinzu, und speichern Sie anschließend.

      Im Fenster Quellcodeverwaltung sehen Sie, dass Ihre Datei geändert wurde. Daneben wird der Buchstabe M angezeigt, der für eine modifizierte Datei steht:

      Screenshot der geänderten Datei mit dem Buchstabe-M-Indikator

      Zur Übung sollten Sie auch diese Änderung übergeben.

      Nachdem Sie nun mit der Bedienung des Quellcodeverwaltungsfensters vertraut sind, fahren Sie mit der Interpretation der „Gutter“-Indikatoren fort.

      Schritt 2 — Interpretation der Gutter-Indikatoren

      In diesem Schritt werfen Sie einen Blick auf das sogenannte „Gutter“ in VS-Code. Das Gutter ist der schmale Bereich rechts neben der Zeilennummer.

      Wenn Sie zuvor Code-Folding verwendet haben, befinden sich die Symbole für Maximieren und Minimieren im Gutter.

      Beginnen wir damit, eine kleine an Ihrer Datei index.html vorzunehmen, beispielsweise eine Änderung des Inhalts innerhalb des Tags <h1>. Danach werden Sie eine blaue vertikale Markierung im Gutter der Zeile, die Sie geändert haben, bemerken. Die vertikale blaue Markierung bedeutet, dass die entsprechende Codezeile geändert wurde.

      Versuchen Sie nun, eine Codezeile zu löschen. Sie können eine der Zeilen im Abschnitt <body> Ihrer Datei index.html löschen. Beachten Sie, dass im Gutter nun ein rotes Dreieck vorhanden ist. Das rote Dreieck kennzeichnet eine Zeile oder eine Gruppe von Zeilen, die gelöscht.

      Fügen Sie schließlich am Ende Ihres Abschnitts <body> eine neue Codezeile hinzu und beachten Sie den grünen Balken. Der vertikale grüne Balken steht für eine hinzugefügte Codezeile.

      Dieses Beispiel zeigt Gutter-Indikatoren für eine geänderte Zeile, eine entfernte Zeile und eine neue Zeile:

      Screenshot mit Beispielen der drei Arten von Gutter-Indikatoren

      Schritt 3 — Vergleichen von Dateien

      VS-Code bietet auch die Möglichkeit, einen Vergleich mit einer Datei auszuführen. Normalerweise müssten Sie dafür ein separates Diff-Tool herunterladen, sodass diese integrierte Funktion Ihnen dabei helfen kann, effizienter zu arbeiten.

      Um einen Vergleich anzuzeigen, öffnen Sie das Quellcodeverwaltungsfenster und doppelklicken Sie auf eine geänderte Datei. Doppelklicken Sie in diesem Fall auf die Datei index.html. Sie werden zu einer typischen Diff-Ansicht mit der aktuellen Version der Datei auf der linken und der zuvor übergebenen Version der Datei auf der rechten Seite gebracht.

      Dieses Beispiel zeigt, dass in der aktuellen Version eine Zeile hinzugefügt wurde:

      Screenshot mit einem Beispiel einer geteilten Bildschirmanzeige eines Vergleichs

      Schritt 4 — Arbeiten mit Zweigen

      In der unteren Leiste haben Sie die Möglichkeit, Zweige zu erstellen und zu wechseln. Wenn Sie einen Blick auf die unterste linke Ecke des Editors werfen, sollten Sie das Quellcodeverwaltungs-Symbol sehen (dasjenige, das wie eine Weggabelung aussieht), gefolgt höchstwahrscheinlich von master oder dem Namen des aktuellen Arbeitszweigs.

      Zweigindikator in der unteren Leiste von VS-Code mit der Anzeige „master“

      Um einen Zweig zu erstellen, klicken Sie auf diesen Zweignamen. Es sollte sich ein Menü öffnen, das Ihnen die Möglichkeit gibt, einen neuen Zweig zu erstellen:

      Eingabeaufforderung zur Erstellung eines neuen Zweigs

      Fahren Sie fort und erstellen Sie einen neuen Zweig namens test.

      Nehmen Sie nun eine Änderung an Ihrer Datei index.html vor, die anzeigt, dass Sie sich in dem neuen Zweig test befinden, indem Sie beispielsweise den Text „this is the new test branch“ (Dies ist der neue Testzweig) hinzufügen.

      Übergeben Sie diese Änderungen an den Zweig test. Klicken Sie dann erneut auf den Zweignamen unten links, um wieder zu dem Zweig master zu wechseln.

      Nach dem Wechsel zum Zweig master werden Sie feststellen, dass der Text this is the new test branch (Dies ist der neue Testzweig), der dem Zeig test übergeben wurde, nicht mehr vorhanden ist.

      Schritt 5 — Arbeiten mit Remote-Repositorys

      In diesem Tutorial wird nicht im Detail darauf eingegangen, aber über das Quellcodeverwaltungsfenster haben Sie Zugriff auf die Arbeit mit Remote-Repositorys. Wenn Sie schon mit einem Remote-Repository gearbeitet haben, werden Ihnen vertraute Befehle wie pull, sync, publish, stash usw. auffallen.

      Schritt 6 — Installieren nützlicher Erweiterungen

      VS-Code enthält nicht nur viele integrierte Funktionen für Git, es gibt auch einige sehr beliebte Erweiterungen, um zusätzliche Funktionalität hinzuzufügen.

      Git Blame

      Diese Erweiterung bietet die Möglichkeit, Git Blame-Informationen in der Statusleiste für die aktuell ausgewählte Zeile anzuzeigen.

      Dies kann einschüchternd klingen, aber keine Sorge, bei der Erweiterung „Git Blame“ geht es viel mehr um Praktikabilität als darum, jemandem ein schlechtes Gewissen einzureden. Bei der Idee, jemandem „ein schlechtes Gewissen“ für eine Code-Änderung einzureden geht es weniger darum, diese Person zu beschämen, als vielmehr darum, die richtige Person zu finden, der man Fragen zu bestimmten Teilen des Codes stellen kann.

      Wie Sie auf dem Screenshot sehen können, bietet diese Erweiterung in der unteren Symbolleiste eine subtile, auf die aktuelle Codezeile, die Sie gerade bearbeiten, bezogene Nachricht, die erklärt, wer die Änderung vorgenommen hat und wann sie vorgenommen wurde.

      Git Blame in der unteren Symbolleiste

      Git History

      Obwohl Sie mit den integrierten Funktionen in VS-Code aktuelle Änderungen anzeigen, Vergleiche durchführen und Zweige verwalten können, bietet es keinen detaillierten Einblick in Ihren Git-Verlauf. Die Erweiterung Git History löst dieses Problem.

      Wie Sie in der nachstehenden Abbildung sehen können, ermöglicht diese Erweiterung Ihnen, den Verlauf einer Datei, eines bestimmten Autors, eines Zweigs usw. sorgfältig zu untersuchen. Um das nachstehende Fenster „Git History“ zu aktivieren, klicken Sie mit der rechten Maustaste auf eine Datei und wählen Sie Git: View File History:

      Ergebnisse der Erweiterung „Git History“

      Zusätzlich können Sie Zweige und Übergaben vergleichen, Zweige aus Übergaben erstellen und vieles mehr.

      Git Lens

      Git Lens erweitert die in Visual Studio Code integrierten Git-Funktionen. Es hilft Ihnen, die Code-Autorenschaft auf einen Blick mittels Git Blame-Annotationen und Code Lens zu visualisieren, nahtlos durch Git-Repositorys zu navigieren und diese zu erkunden, wertvolle Erkenntnisse über leistungsstarke Vergleichsbefehle zu gewinnen und vieles mehr.

      Die Erweiterung „Git Lens“ ist eine der beliebtesten in der Gemeinschaft und ist auch die leistungsstärkste. In den meisten Fällen kann sie mit ihrer Funktionalität jede der beiden vorherigen Erweiterungen ersetzen.

      Für „Blame“-Informationen erscheint rechts neben der Zeile, an der Sie gerade arbeiten, eine subtile Nachricht, die Sie darüber informiert, werde die Änderung vorgenommen hat, wann sie vorgenommen wurde und die zugehörige Übergabemeldung. Es gibt einige zusätzliche Informationen, die angezeigt werden, wenn Sie mit der Maus über diese Nachricht fahren, wie die Code-Änderung selbst, der Zeitstempel und mehr.

      Git Blame-Funktionalität in Git Lens

      Für Git-Verlaufsinformationen bietet diese Erweiterung eine Vielzahl von Funktionen. Sie haben einfachen Zugriff auf zahlreiche Optionen, darunter die Anzeige des Dateiverlaufs, die Durchführung von Vergleichen mit vorherigen Versionen, das Öffnen einer bestimmten Revision und vieles mehr. Um diese Optionen zu öffnen, können Sie auf den Text in der unteren Statusleiste klicken, der den Autor enthält, der die Codezeile bearbeitet hat und wie lange es her ist, dass sie bearbeitet wurde.

      Dadurch wird das folgende Fenster geöffnet:

      Git History-Funktionalität in Git Lens

      Diese Erweiterung ist vollgepackt mit Funktionalität und es wird eine Weile dauern, bis Sie alles, was sie zu bieten hat, aufgenommen haben.

      Zusammenfassung

      In diesem Tutorial haben Sie erkundet, wie die Integration der Quellcodeverwaltung mit VS-Code verwendet wird. VS-Code kann mit vielen Funktionen umgehen, für die zuvor ein separates Tool heruntergeladen werden musste.



      Source link

      Cómo formatear código con Prettier en Visual Studio Code


      Introducción

      Formatear código de forma consistente puede ser un desafío, pero las herramientas modernas para el desarrollador hacen que sea posible mantener automáticamente la consistencia en toda la base de código de su equipo.

      En este artículo, configurará Prettier para que formatee de forma automática su código en Visual Studio Code, también conocido como VS Code.

      A efectos de demostración, aquí tiene el código de muestra que formateará:

      const name = "James";
      
      const person ={first: name
      }
      
      console.log(person);
      
      const sayHelloLinting = (fName) => {
      console.log(`Hello linting, ${fName}`)
      }
      
      sayHelloLinting('James');
      

      Si está familiarizado con el formateo de código, es posible que observe pasos erróneos:

      • Una mezcla de comillas simples y dobles.
      • La primera propiedad del objeto person debería estar en su propia línea.
      • La instrucción de la consola dentro de la función debería estar con sangría.
      • Es posible que no le gusten los paréntesis opcionales que rodean el parámetro de la función de flecha.

      Requisitos previos

      Para seguir este tutorial, necesitará descargar e instalar Visual Studio Code.

      Para trabajar con Prettier en Visual Studio Code, deberá instalar la extensión. Para hacer esto, busque Prettier - Code Formatter en el panel de extensión de VS Code. Si lo está instalando por primera vez, verá un botón install en vez del botón uninstall mostrado aquí:

      Readme de la extensión Prettier

      Paso 1: Usar el comando Format Document

      Con la extensión Prettier instalada, ahora puede usarla para formatear su código. Para comenzar, vamos a explorar el uso del comando Format Document. Este comando hará que su código sea más consistente con el espaciado formateado, el ajuste de líneas y las comillas.

      Para abrir la paleta de comandos, puede usar COMMAND + SHIFT + P en macOS o CTRL + SHIFT + P en Windows.

      En la paleta de comandos, busque format y seleccione Format Document.

      Paleta de comandos abierta con resultados para formatear

      Quizá se le pida elegir qué formato usar. Para hacerlo, haga clic en el botón Configure:

      Instrucción para seleccionar un formateador predeterminado

      Seleccione Prettier – Code Formatter.

      Selección de Prettier

      Nota: Si no ve una instrucción para seleccionar un formato predeterminado, puede cambiar esto manualmente en sus Ajustes. Establezca Editor: Default Formatter a ebsenp.prettier-vscode.

      Su código ahora está formateado con espacios, ajuste de líneas y comillas consistentes:

      const name="James";
      
      const person = { first: name };
      
      console.log(person);
      
      const sayHelloLinting = (fname) => {
        console.log(`Hello linting, ${fName}`);
      }
      
      sayHelloLinting('James');
      

      Esto también funciona en archivos CSS. Puede convertir algo con sangría inconsistente, corchetes, nuevas líneas y puntos y comas en código con un buen formato. Por ejemplo:

      body {color: red;
      }
      h1 {
        color: purple;
      font-size: 24px
      }
      

      Se formateará a:

      body {
        color: red;
      }
      h1 {
        color: purple;
        font-size: 24px;
      }
      

      Ahora que hemos explorado este comando, vamos a ver cómo esto puede implementarse para que se ejecute automáticamente.

      Paso 2: Formatear código en Save

      Hasta ahora, ha tenido que ejecutar manualmente un comando para formatear su código. Para automatizar este proceso, puede elegir un ajuste en VS Code para que sus archivos se formateen automáticamente cuando guarde. Esto también garantiza que el código no se comprueba a un control de la versión que no esté formateado.

      Para cambiar este ajuste, pulse COMMAND + en macOS o CTRL + ,en Windows para abrir el menú Settings. Una vez abierto el menú, busque Editor: Format On Save y asegúrese de que la opción está seleccionada:

      Editor: Format On Save seleccionado

      Una vez configurado esto, puede escribir su código de la forma habitual y se formateará automáticamente cuando guarde el archivo.

      Paso 3: Cambiar los ajustes de configuración de Prettier

      Prettier hace muchas cosas por usted de forma predeterminada, pero también puede personalizar la configuración.

      Abra el menú Settings. A continuación busque Prettier. Esto abrirá todos los ajustes que puede cambiar:

      Ajustes de configuración para Prettier

      Aquí tiene algunos de los ajustes más comunes:

      • Single Quote – Elija entre comillas sencillas y dobles
      • Semi – Elija si desea incluir o no puntos y comas al final de las líneas.
      • Tab Width – Especifique cuántos espacios desea que inserte el tabulador.

      La desventaja de usar el menú de ajustes integrados en VS Code es que no garantiza la consistencia entre los desarrolladores de su equipo.

      Paso 4: Crear un archivo de configuración de Prettier

      Si cambia los ajustes en VS Code, otra persona podría tener una configuración completamente diferente en su equipo. Puede establecer un formato consistente entre todo su equipo creando un archivo de configuración para su proyecto.

      Cree un nuevo archivo llamado .prettierrc.extension con una de las siguientes extensiones:

      Aquí tiene un ejemplo de un archivo de configuración sencillo usando JSON:

      {
        "trailingComma": "es5",
        "tabWidth": 4,
        "semi": false,
        "singleQuote": true
      }
      

      Para obtener más información sobre los archivos de configuración, eche un vistazo a la documentación de Prettier. Tras crear uno de estos archivos e introducirlo en su proyecto, puede garantizar que todos los miembros de su equipo siguen las mismas reglas de formato.

      Conclusión

      Tener un código consistente es una buena práctica. Es particularmente beneficioso cuando se trabaja en un proyecto con múltiples colaboradores. Acordar un conjunto de configuraciones ayuda en la legibilidad y comprensión del código. Puede dedicarse más tiempo a resolver problemas técnicos difíciles en vez de luchar contra problemas resueltos como la sangría del código.

      Prettier garantiza consistencia en el formato de su código y hace que el proceso sea automático.



      Source link

      Cómo usar la integración Git en Visual Studio Code


      Introducción

      Visual Studio Code (VS Code) se ha convertido en uno de los editores más populares que existen para el desarrollo web. Ha conseguido tanta popularidad gracias a sus muchas funciones integradas, incluyendo la integración del Control de código fuente, es decir, con Git. Aprovechar el poder de Git desde VS Code puede hacer que su flujo de trabajo sea más eficiente y robusto.

      En este tutorial, explorará usar la Integración del Control de código fuente con VS Code con Git.

      Requisitos previos

      Para completar este tutorial, necesitará lo siguiente:

      Paso 1: Familiarizarse con la pestaña Control de código fuente

      Lo primero que debe hacer para aprovechar la integración del Control de código fuente es iniciar un proyecto como repositorio Git.

      Abra Visual Studio Code y acceda al terminal integrado. Puede abrirlo usando el atajo de teclado CTRL +` en Linux, macOS o Windows.

      En su terminal, cree un directorio para un nuevo proyecto y cambie a ese directorio:

      • mkdir git_test
      • cd git_test

      A continuación, cree un repositorio Git:

      Otra forma de conseguir esto con Visual Studio Code es abriendo la pestaña Control de código fuente (el icono parece una brecha en la carretera) en el panel izquierdo:

      Icono de Control de código fuente

      A continuación, seleccione Abrir carpeta:

      Captura de pantalla que representa el botón Abrir carpeta

      Esto abrirá su explorador de archivos al directorio actual. Seleccione el directorio de proyecto preferido y haga clic en Abrir.

      A continuación, seleccione Iniciar repositorio:

      Captura de pantalla que representa el botón Iniciar repositorio

      Si ahora comprueba su sistema de archivos, verá que incluye un directorio .git. Para hacer esto, use el terminal para navegar al directorio de su proyecto y liste todo su contenido:

      Verá el directorio .git que se creó:

      Output

      Ahora que se ha iniciado el repositorio, añada un archivo llamado index.html.

      Tras hacer eso, verá en el panel Control de código fuente que su nuevo archivo se muestra con la letra U junto a él. U significa archivo sin seguimiento (untracked file), lo que significa que es nuevo o se ha cambiado, pero aún no ha sido añadido al repositorio:

      Captura de pantalla de un archivo sin seguimiento con el indicador de letra U

      Ahora puede hacer clic en el icono plus (+) junto al listado de archivos index.html para que el repositorio realice un seguimiento del archivo.

      Una vez añadido, la letra junto al archivo cambiará a una A. A indica un nuevo archivo que se añadió al repositorio.

      Para confirmar sus cambios, escriba un mensaje commit en el cuadro de entrada en la parte superior del panel Control de código fuente. A continuación, haga clic en el icono check para realizar la confirmación.

      Captura de pantalla de un archivo añadido con el indicador de letra A y el mensaje de confirmación

      Tras hacerlo, observará que no hay cambios pendientes.

      A continuación, añada un poco de contenido a su archivo index.html.

      Puede usar un atajo Emmet para generar un esqueleto HTML5 en VS Code pulsando la tecla ! seguida de la tecla Tab. Añada algo en el <body> como un encabezado <h1> y guárdelo.

      En el panel de control de código fuente, verá que su archivo ha cambiado. Mostrará la letra M junto a él, que representa un archivo que se ha modificado.

      Captura de pantalla de un archivo modificado con el indicador de letra M

      Para practicar, confirme también este cambio.

      Ahora que está familiarizado con la interacción con el panel de código fuente, pasará a interpretar los indicadores de margen.

      Paso 2: Interpretar indicadores de margen

      En este paso, echará un vistazo a lo que se denomina el “margen” en VS Code. El margen es el área muy delgada a la derecha del número de línea.

      Si ha usado code folding antes, los iconos maximize y minimize están en el margen.

      Vamos a comenzar realizando un pequeño cambio en su archivo index.html, como un cambio en el contenido en la etiqueta <h1>. Tras hacerlo, observará una marca vertical azul en el margen de la línea que ha cambiado. La marca azul vertical significa que la línea correspondiente de código ha cambiado.

      Ahora, intente eliminar una línea de código. Puede eliminar una de las líneas en la sección <body> de su archivo index.html. Observe que en el margen ahora hay un triángulo rojo. El triángulo rojo significa una línea o grupo de líneas que se han eliminado.

      Finalmente, en la parte inferior de su sección <body>, añada una nueva línea de código y observe la barra verde. La barra verde vertical significa una línea de código que se ha añadido.

      Este ejemplo muestra indicadores de margen para una línea modificada, una línea eliminada y una nueva línea:

      Captura de pantalla con ejemplos de tres tipos de indicadores de margen

      Paso 3: Diferenciar archivos

      VS Code también tiene la capacidad de realizar un diff sobre un archivo. Normalmente, tendría que descargar una herramienta diff independiente para hacer esto, de forma que esta función integrada puede ayudarle a trabajar de forma más eficiente.

      Para ver un diff, abra el panel de control del código fuente y haga doble clic en un archivo cambiado. En este caso, haga doble clic en el archivo index.html. Se lo dirigirá a una vista diff normal con la versión actual del archivo a la izquierda y la versión previamente confirmada del archivo a la derecha.

      Este ejemplo muestra que se ha añadido una línea en la versión actual:

      Captura de pantalla con un ejemplo de una vista de pantalla dividida de un diff

      Paso 4: Trabajar con ramas

      Si se mueve a la barra inferior, tiene la capacidad de crear y cambiar ramas. Si echa un vistazo a la parte inferior izquierda del editor, debería ver el icono control de código fuente (el que parece una división en la carretera) seguido de probablemente el master o el nombre de la rama actualmente en funcionamiento.

      Indicador de rama en la barra inferior de VS Code mostrando: master

      Para crear una rama, haga clic en ese nombre de la rama. Debería aparecer un menú que le da la capacidad para crear una nueva rama:

      Instrucción para crear una nueva rama

      Cree una nueva rama llamada test.

      Ahora, realice un cambio a su archivo index.html que significa que está en la nueva rama test, como añadir el texto this is the new test branch.

      Confirme esos cambios a la rama test. A continuación, haga clic en el nombre de la rama en la parte inferior izquierda de nuevo para volver a la rama master.

      Tras volver a la rama master, observará que el texto this is the new test branch confirmado para la rama test ya no está presente.

      Paso 5: Trabajar con repositorios remotos

      Este tutorial no tratará esto en profundidad, pero a través del panel Control de código fuente tiene acceso para trabajar con los repositorios remotos. Si ha trabajado con un repositorio remoto antes, observará comandos familiares como pull, sync, publish, stash, etc.

      Paso 6: Instalar extensiones útiles

      VS Code no solo cuenta con numerosas funciones integradas para Git, sino que también tiene algunas extensiones muy populares para añadir funciones adicionales.

      Git Blame

      Esta extensión ofrece la capacidad de ver información Git Blame en la barra de estado para la línea seleccionada actualmente.

      Esto puede sonar intimidante, pero no se preocupe, la extensión Git Blame es más sobre funcionalidad, no para hacer que alguien se sienta mal. La idea de “culpar” a alguien por un cambio de código no es para avergonzarlos, sino para averiguar quién es la persona adecuada a quien hacerle preguntas sobre ciertas piezas de código.

      Como puede ver en la captura de pantalla, esta extensión proporciona un mensaje sutil relacionado con la línea de código actual sobre la que está trabajando en la barra de herramientas inferior, explicando quién realizó el cambio y cuándo lo realizó.

      Git Blame en la barra de herramientas inferior

      Git History

      Aunque puede ver los cambios actuales, realizar diffs, y administrar ramas con las funciones integradas en VS Code, no proporciona una vista profunda del historial de Git. La extensión Git History resuelve ese problema.

      Como puede ver en la siguiente imagen, esta extensión le permite explorar de forma exhaustiva el historial de un archivo, un autor concreto, una rama, etc. Para activar la ventana Git History, haga clic con el botón derecho sobre un archivo y seleccione Git: View File History:

      Resultados de la extensión Git History

      Además, puede comparar ramas y confirmaciones, crear ramas a partir de confirmaciones y mucho más.

      Git Lens

      GitLens sobrecarga las capacidades de Git integradas en Visual Studio Code. Lo ayuda a visualizar rápidamente la autoría del código mediante anotaciones de Git Blame y Code Lens, navegar de forma impecable y explorar repositorios de Git, obtener información valiosa mediante potentes comandos comparativos, y mucho más.

      La extensión Git Lens es una de las más populares en la comunidad y también la más potente. En la mayoría de las maneras, puede sustituir a cada una de las dos extensiones anteriores con su funcionalidad.

      Para la información “blame” aparece un mensaje sutil a la derecha de la línea en la que está trabajando actualmente para informarle de quién realizó el cambio, cuándo lo hizo y el mensaje de confirmación asociado. Hay algunos fragmentos adicionales de información que aparecen cuando pasa el ratón sobre este mensaje como el cambio en el código, el sello de tiempo y mucho más.

      Funcionalidad Git Blame en Git Lens

      Para la información del historial de Git, esta extensión proporciona muchas funciones. Tiene acceso fácil a muchas opciones como mostrar el historial de archivos, realizar diffs con versiones anteriores, abrir una revisión específica y mucho más. Para abrir estas opciones, puede hacer clic en el texto en la barra de estado inferior que contiene el autor que editó la línea de código y hace cuánto se editó.

      Esto abrirá la siguiente ventana:

      Funcionalidad Git History en Git Lens

      Esta extensión cuenta con numerosas funciones y tardará un tiempo en aprender todo lo que ofrece.

      Conclusión

      En este tutorial, exploró cómo usar la integración de control de código fuente con VS Code. VS Code puede gestionar muchas funciones que previamente habrían requerido la descarga de una herramienta independiente.



      Source link