Retour aux articles

Gagnez du temps avec un terminal surpuissant

Terminal ZSH
7 minutes de lecture- 39 vues

Comment configurer un thème zsh de terminal ?Header Icon

Le temps est une ressource précieuse. En tant que développeur, je souhaite être efficace et développer de belles features rapidement. J'utilise très souvent mon terminal pour lancer les commandes git, mettre à jour mes projets, changer le php.ini ...

Ces commandes sont très monotones et répétitives. Je vais vous montrer aujourd'hui comment gagner un peu de temps grâce au thème de terminal ZSH.

![Invité de commande (terminal) personnalisé proposant auto-completion, correction de syntaxe]Link(https://algomax-public.s3.eu-west-3.amazonaws.com/starship_terminal_696fc275c1.gif)

Installer sur UbuntuHeader Icon

1. Installation de ZSH, mise à jour du systèmeHeader Icon

Terminal

_10
sudo apt-get install zsh powerline fonts-powerline git -y
_10
sudo apt-get update && sudo apt full-upgrade -y

2. Installation de StarshipHeader Icon

Terminal

_10
curl -sS https://starship.rs/install.sh | sh

3. Installation de Oh My Zsh. Il faudra fermer et rouvrir le terminal pour que les modifications soient prises en compte.Header Icon

Terminal

_10
sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

4. Installation des plugins ZSHHeader Icon

Terminal

_10
git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions
_10
git clone https://github.com/zsh-users/zsh-completions ${ZSH_CUSTOM:=~/.oh-my-zsh/custom}/plugins/zsh-completions
_10
git clone https://github.com/zsh-users/zsh-syntax-highlighting ${ZSH_CUSTOM:=~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting

5. Configuration de Starship et des plugins ZSHHeader Icon

Terminal

_10
sudo nano ~/.zshrc

On va modifier le fichier ~/.zshrc généré par Oh My Zsh et remplacer son contenu par :

Terminal

_12
export ZSH="$HOME/.oh-my-zsh"
_12
_12
plugins=(
_12
git
_12
zsh-autosuggestions
_12
zsh-completions
_12
zsh-syntax-highlighting
_12
)
_12
_12
source $ZSH/oh-my-zsh.sh
_12
_12
eval "$(starship init zsh)"

6. Redémarrer le terminalHeader Icon

Terminal

_10
source ~/.zshrc

7. Décollage 🚀Header Icon

Vous êtes maintenant parés à utiliser ce terminal efficace et optimisé !

N.B : Vous développez des applications Javascript ? N'oubliez pas de réinstaller npm ou nvm !

Vous pouvez retrouver la documentation officielle de nvm ici.

Installer sur MacHeader Icon

1. Installation de Brew, le package manager macOSHeader Icon

Terminal

_10
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

2. Installation de ZSHHeader Icon

Terminal

_10
brew install zsh

3. Installation, de Oh My ZshHeader Icon

Terminal

_10
sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

4. Installation de StarshipHeader Icon

Terminal

_10
curl -sS https://starship.rs/install.sh | sh

5. Installation des plugins ZSHHeader Icon

Terminal

_10
git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions
_10
git clone https://github.com/zsh-users/zsh-completions ${ZSH_CUSTOM:=~/.oh-my-zsh/custom}/plugins/zsh-completions
_10
git clone https://github.com/zsh-users/zsh-syntax-highlighting ${ZSH_CUSTOM:=~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting

6. Configuration de Starship et des plugins ZSHHeader Icon

Terminal

_10
sudo nano ~/.zshrc

On va modifier le fichier ~/.zshrc généré par Oh My Zsh et remplacer son contenu par :

Terminal

_12
export ZSH="$HOME/.oh-my-zsh"
_12
_12
plugins=(
_12
git
_12
zsh-autosuggestions
_12
zsh-completions
_12
zsh-syntax-highlighting
_12
)
_12
_12
source $ZSH/oh-my-zsh.sh
_12
_12
eval "$(starship init zsh)"

7. Redémarrer le terminalHeader Icon

Terminal

_10
source ~/.zshrc

8. Décollage 🚀Header Icon

Vous êtes maintenant parés à utiliser ce terminal efficace et optimisé !

N.B : Vous développez des applications Javascript ? N'oubliez pas de réinstaller npm ou nvm !

Vous pouvez retrouver la documentation officielle de nvm ici.

Guide de l'installation sur Ubuntu avec explicationsHeader Icon

1. Télécharger PowerlineHeader Icon

En premier lieu, nous avons besoin d'installer une police spéciale qui va nous permettre de voir des icônes et des indicateurs dans le terminal. Commencez par ouvrir votre terminal et entrez la commande suivante.

Terminal

_10
sudo apt-get install zsh powerline fonts-powerline git curl -y

  • zsh est l'interpréteur de commandes (shell) que nous allons utiliser
  • powerline est un plugin pour notre terminal. C'est lui qui affiche les icônes de la branche active dans Git, de la version de PHP, etc
  • fonts-powerline est un repository possédant une trentaine de polices de terminal (avec icônes)
  • git est un outil de versionning que nous allons utiliser pour installer le thème
  • curl est un outil qui nous permet de télécharger des fichiers depuis le web
  • -y est un paramètre qui demande à Ubuntu de ne pas nous embêter à confirmer l'installation des paquets.

2. Mettre à jour les paquetsHeader Icon

Nous allons mettre à jour les paquets pour installer leur dernière version. Pour cela, entrez la commande suivante.

Terminal

_10
sudo apt-get update && sudo apt full-upgrade -y

3. Installer Oh My zshHeader Icon

Oh My Zsh est un framework qui va nous aider à configurer notre terminal. Il nous propose plus de 275 plugins et de nombreux thèmes. Pour l'installer, il suffit de lancer la commande suivante dans le terminal.

Terminal

_10
sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

Après l'installation, ZSH nous demande si on accepte d'en faire notre terminal par défaut. Après avoir répondu, il nous affiche un beau message de confirmation d'installation. Essayez de fermer votre terminel et de le rouvrir, vous verrez qu'il a bien changé 😄 .

Invité de commande (terminal) affichant un message de succès de l'installation de Oh My Zsh

4. Comprendre le fichier de configurationHeader Icon

Passons maintenant à un peu de configuration ! Notre terminal est beau, mais il n'est pas plus pratique pour autant. Nous allons maintenant modifier le fichier de configuration ~/.zshrc, qui se trouve à la racine de votre dossier utilisateur. Pour l'ouvrir, il suffit de lancer la commande suivante. Je vous conseille d'utiliser sudo pour être sûr de pouvoir le sauvegarder.

Terminal

_10
sudo nano ~/.zshrc

On se retrouve avec un fichier contenant beaucoup de lignes ! ZSH est très configurable, et nous avons beaucoup de lignes commentées en bleu, préfixées par #. Ce sont des exemples de syntaxes à titre indicatif pour nous indiquer les possibilités de configuration. Personnellement, je trouve que c'est illisible. J'ai supprimé tous les commentaires pour ne conserver que l'essentiel.

Configuration du fichier zshrc. Beaucoup de lignes s'y retrouvent et il est simple de s'y perdre

Voici les lignes qui restent après nettoyage :

Terminal

_10
export ZSH="$HOME/.oh-my-zsh"
_10
ZSH_THEME="robbyrussell"
_10
plugins=(git)
_10
source $ZSH/oh-my-zsh.sh

  • La première ligne permet d'exporter une variable d'environnement, contenant le chemin vers la configuration de ZSH.
  • La deuxième ligne permet de configurer le thème. Cependant ce n'est pas le thème robbyrussell qui est actif actuellement.
  • La troisième ligne permet de configurer une liste de plugins. C'est la partie qui nous intéresse car nous allons en rajouter trois.
  • La dernière ligne permet de charger la configuration de ZSH.

On sauvegarde la modification d'un fichier édité avec nano avec les touches Ctrl + X. L'éditeur nous demande si l'on souhaite sauvegarder, et nous répondons par Oui Y ou Non N, puis Entrée. On peut également annuler une modification avec Ctrl + C.

Maintenant, nous allons installer le thème starship ainsi que quelques plugins et nous pourrons profiter d'un terminal très efficace !

5. Installer le thème starshipHeader Icon

Starship est un thème pour ZSH qui propose une barre de statut avec des informations sur la branche Git, la version de PHP et plein de trucs sympa ! Nous allons donc l'installer avec la commande suivante.

Terminal

_10
curl -sS https://starship.rs/install.sh | sh

Starship nous demande de valider l'installation avec Y ou N. Après avoir répondu, il nous affiche un beau message de confirmation d'installation. Nous allons maintenant configurer notre terminal pour qu'il utilise ce thème.

Terminal

_10
sudo nano ~/.zshrc

Nous rajoutons la ligne eval "$(starship init zsh)" à la fin du fichier ~/.zshrc. Regardons à quoi il ressemble :

Terminal

_10
export ZSH="$HOME/.oh-my-zsh"
_10
ZSH_THEME="robbyrussell"
_10
plugins=(git)
_10
source $ZSH/oh-my-zsh.sh
_10
_10
eval "$(starship init zsh)"

6. Installer les plugins d'autocomplétion et de correctionHeader Icon

Passons donc à la pratique en installant les plugins suivants :

zsh-autosuggestionsHeader Icon

Ce plugin nous affiche des suggestions de commande en fonction de ce que nous avons déjà tapé. C'est très pratique pour éviter de retaper des commandes déjà saisies. Il suffit d'avoir une suggestion de d'appuyer sur → (flèche de droite) pour saisir la commande.

La commande suivante permet de l'installer au sein du dossier plugins de notre configuration oh-my-zsh.

Terminal

_10
git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions

zsh-completionsHeader Icon

Je n'ai pas réussi à comprendre le but de ce plugin, que je télécharge pourtant à chaque fois que je configure un nouveau terminal. Il permet d'ajouter des complétions de commandes supplémentaires.

Terminal

_10
git clone https://github.com/zsh-users/zsh-completions ${ZSH_CUSTOM:=~/.oh-my-zsh/custom}/plugins/zsh-completions

zsh-syntax-highlightingHeader Icon

Ce plugin permet de colorer nos commandes en fonction de leur syntaxe. Si tu entres une commande erronée, elle sera colorée en rouge. Cela te permet de ne pas l'exécuter et de la corriger avant de la lancer.

Exemple de coloration de commande en rouge pour une commande erronée, en vert pour une commande valide
Installons ce dernier plugin et nous serons enfin prêts.

Terminal

_10
git clone https://github.com/zsh-users/zsh-syntax-highlighting ${ZSH_CUSTOM:=~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting

Modifier la configurationHeader Icon

Maintenant, nous allons ouvrir à nouveau notre fichier de configuration ~/.zshrc pour lui demander d'exécuter chacun de nos plugins quand il se lance.

Terminal

_10
sudo nano ~/.zshrc

Et nous y collons le nom des trois nouveaux plugins.

Terminal

_12
export ZSH="$HOME/.oh-my-zsh"
_12
ZSH_THEME="robbyrussell"
_12
plugins=(
_12
git
_12
zsh-autosuggestions
_12
zsh-completions
_12
zsh-syntax-highlighting
_12
)
_12
_12
source $ZSH/oh-my-zsh.sh
_12
_12
eval "$(starship init zsh)"

Il suffit à présent de redémarrer le terminal pour que les modifications soient prises en compte.

Terminal

_10
source ~/.zshrc

ConclusionHeader Icon

Nous venons de configurer un terminal surpuissant. Bonne chance pour vos développements !

Articles similaires
Gère les erreurs avec le framework Remix.js
6 minutes de lecture - 326 vuesRemixReactJS

Comment gérer les erreurs avec Remix ? (ErrorBoundary)

Avoir des erreurs Javascript ne fait jamais plaisir. Mais il existe le composant ErrorBoundary). Dans ce guide, tu vas découvrir comment afficher un composant d'erreur personnalisé en pour protéger toutes les pages de ton application.

Rejoins la

newsletter