Salta el contingut
 

Preparació de l'entorn

Joan Puigcerver Ibáñez

Llicència: CC BY-NC-SA 4.0

(Reconeixement - NoComercial - CompartirIgual) 🅭

Preparació de l'entorn

En aquesta secció s'explica com instal·lar i configurar les ferramentes necessàries per a treballar amb Git i Visual Studio Code.

Per què la terminal?

En aquest curs s'utilitza la terminal per a interactuar amb Git, però no és l'única manera de fer-ho. De fet, pràcticament tots els entorns de desenvolupament moderns tenen integració amb Git, que permet fer les mateixes operacions que la terminal de manera més visual i intuïtiva.

No obstant això, és important conéixer com funcionen les ordres de Git en la terminal per diferents raons:

  • Portabilitat: la terminal és un entorn comú en tots els sistemes operatius i entorns de desenvolupament.
  • Flexibilitat: la terminal permet fer operacions més avançades i personalitzades que les interfícies gràfiques.
  • Comprensió: treballar amb les ordres ajuda a entendre com funciona Git i quins processos fa internament.

Instal·lació de Git

Git està disponible en la pàgina oficial per a Windows, Linux i macOS. La instal·lació depén del sistema operatiu:

Git s'instal·la des del gestor de paquets del sistema:

sudo apt update
sudo apt install git

Descarrega i executa l'instal·lador de Git.

Una vegada instal·lat, es pot utilitzar la consola Git Bash, una terminal basada en l'intèrpret Bash que permet executar les ordres de Git.

Configuració inicial

Git utilitza un editor de text per a algunes operacions, com ara escriure els missatges dels commits.

Per defecte, Git utilitza l'editor ViM, un editor de text per terminal molt potent, però difícil i poc intuïtiu si no s'hi està acostumat. Per això, és recomanable canviar l'editor per defecte amb l'ordre següent:

git config --global core.editor <editor>
Editors de text
git config --global core.editor "code --wait"
  • notepad: editor instal·lat per defecte.
  • Notepad++: editor de text lleuger amb més funcionalitats.
git config --global core.editor notepad
  • gedit: editor instal·lat per defecte en Ubuntu.
  • nano: editor de text bàsic per terminal.
  • vim: editor de text avançat per terminal. Per guardar s'utilitza :w i per eixir, :q.
git config --global core.editor nano

Com que en el curs s'utilitza Visual Studio Code com a editor, et recomane configurar-lo també com a editor de Git.

git config --global core.editor "code --wait"

Instal·lació de Visual Studio Code

Visual Studio Code és un editor de text gratuït i de codi obert desenvolupat per Microsoft.

És un editor molt popular en el món del desenvolupament per la seua lleugeresa, el seu rendiment i la gran quantitat d'extensions disponibles, que permeten adaptar-lo a qualsevol llenguatge de programació.

Per a instal·lar-lo, descarrega'l des de la seua pàgina web i executa l'instal·lador.

Configuració

A continuació, es configuren alguns aspectes bàsics per a treballar amb Git en Visual Studio Code.

Integració amb la terminal

Visual Studio Code permet obrir una terminal integrada en la part inferior de la finestra. Així, es pot utilitzar la terminal sense haver de canviar de finestra.

La terminal s'obri des del menú Terminal > New Terminal.

En Windows, la terminal integrada utilitza PowerShell per defecte.

Es pot seleccionar Git Bash des del menú desplegable de la terminal, on també es pot configurar com a opció predeterminada.

Menú desplegable de la terminal en Visual Studio Code

Documentació oficial de Visual Studio Code

Figura 1. Menú desplegable de la terminal en Visual Studio Code.

Extensió Git Graph

Per a visualitzar la història dels commits de manera gràfica, es pot instal·lar l'extensió Git Graph des de l'apartat d'extensions de Visual Studio Code.

Demostració de l'extensió Git Graph

Extensió Git Graph

Figura 2. Demostració de l'extensió Git Graph.

Una vegada instal·lada, la vista gràfica de la història de commits s'obri des del botó Git Graph de la barra inferior esquerra de l'editor.

El botó Git Graph només és visible si s'ha obert un directori amb un repositori de Git.

Botó Git Graph en Visual Studio Code

Figura 3. Botó Git Graph en Visual Studio Code.

Configuració del prompt de la terminal

La terminal Git Bash defineix un prompt que incorpora informació molt útil sobre l'estat del repositori de Git, com ara la branca activa o l'estat del repositori durant alguns processos (MERGING, REBASING, etc.).

No obstant això, la terminal del sistema no mostra aquesta informació, i això dificulta el treball amb Git. A continuació, s'explica com configurar el prompt en Linux o en terminals basades en Bash:

  1. Copia el fitxer git-prompt.sh en algun lloc del teu sistema.

    curl -o ~/.git-prompt.sh https://raw.githubusercontent.com/git/git/refs/heads/master/contrib/completion/git-prompt.sh
    

    Revisa que el fitxer descarregat és l'adequat.

  2. Afig la línia següent al fitxer .bashrc, .zshrc o .profile del teu usuari:

    source ~/.git-prompt.sh # source <ruta>/git-prompt.sh
    
  3. Modifica la variable PS1 perquè incloga la informació de Git, $(__git_ps1):

    # Exemple amb colors
    export PS1='\[\033[01;32m\]\u@\h\[\033[00m\]:\[\033[01;34m\]\w\[\033[33m\]$(__git_ps1) \[\033[00m\]$ '
    # Exemple sense colors
    export PS1='\u@\h:\w$(__git_ps1) $ '
    
    setopt PROMPT_SUBST
    
    # Exemple amb colors
    PROMPT='%F{green}%n@%m%f:%F{blue}%~%f%F{yellow}$(__git_ps1 " (%s)")%f %# '
    # Exemple sense colors
    PROMPT='%n@%m:%~$(__git_ps1 " (%s)") %# '
    

    Pots adaptar el prompt al teu gust.

  4. Reinicia la terminal o executa source ~/.bashrc (o el fitxer que hages modificat).

Codi font: git-prompt.sh – Git

Exemple: Prompt amb informació de Git

S'inicialitza un repositori amb el prompt configurat.

jpuigcerver@fp:~ $ cd ~/git_introduccio
jpuigcerver@fp:~/git_introduccio $ git init
Initialized empty Git repository in /home/jpuigcerver/git_introduccio/.git/
jpuigcerver@fp:~/git_introduccio (main) $

S'observa que, després d'inicialitzar el repositori, el prompt mostra la branca activa, main.

Recursos addicionals

📌 Aquest document pot quedar desactualitzat després d’imprimir-lo. Pots consultar la versió més recent a la pàgina web.
🌿 Abans d’imprimir aquest document, considera si és realment necessari. Redueix el consum de paper i ajuda a protegir el nostre entorn.