À la découverte de Helix : L’éditeur de code multi-modal dans le terminal

LES ORIGINES

Déjà, comment suis-je passé d'un éditeur graphique avec plein de plugins faciles à installer, qui ne nécessitait aucune configuration pour fonctionner, à un éditeur de texte multi-modal dans le terminal qui ne prend pas en charge les plugins et demande toute une config pour bien l'utiliser ?
La raison initiale qui m'a fait chercher une alternative est que lorsque j'ouvrais un projet Laravel sur VS Code, non seulement il prenait 5 minutes à s'ouvrir et à charger tous les fichiers sur mon vieux PC (qui était déjà vieux quand je l'ai reçu, et que j'ai utilisé intensément ces 4 dernières années), mais en plus il crachait régulièrement après un certain temps. Il fallait donc redémarrer le logiciel, attendre encore 5 minutes, sans compter les lags réguliers pendant les sessions de codage. Mis bout à bout, ça faisait beaucoup de temps perdu, et c'était amplement suffisant pour casser l'immersion dans le code. Il fallait absolument changer ça !

Je suis d'abord tombé sur Zed , un éditeur de code graphique écrit entièrement en Rust. Plus de JavaScript ni d'Electron, donc logiquement plus de lag. Effectivement, ça ne plantait plus, mais il n'y avait pas encore d'extensions pour Laravel et Vue.js, mes deux frameworks principaux. Je suis donc vite retourné sur VS Code, et les mêmes soucis sont rapidement revenus.

J'ai eu le déclic final quand Grafikart a sorti une vidéo où il parlait d'Helix comme substitut à Vim. J'avais déjà vu plusieurs seniors sur YouTube utiliser Vim dans leurs tutoriels et leur quotidien, en vantant ses mérites en termes de productivité. Mais il fallait une configuration très lourde, en plus d'un réapprentissage complet de la navigation, pour arriver à ce niveau. J'utilisais déjà nano pour des modifications mineures de fichiers de configuration, donc je me sentais capable d'apprendre les raccourcis clavier, mais me lancer dans une configuration interminable, c'était hors de question.

Cette vidéo m'a complètement fait changer d'avis quand j'ai vu qu'il ne fallait quasiment aucune configuration pour Helix. D'abord, il venait directement avec la coloration syntaxique pour tous les langages et des thèmes intégrés (notamment celui que j'ai choisi, qui ressemble beaucoup au thème Dark+ que j'avais sur VS Code). En plus de cela, j'ai appris dans une autre vidéo qu'il était extrêmement rapide, même plus que Neovim. Pour que Vim devienne un vrai éditeur de code, il faut lui ajouter des plugins souvent écrits en Lua, un langage interprété qui peut saper les performances. Tandis qu'Helix, entièrement écrit en Rust (un langage de bas niveau compilé), ne présente pas ce problème.

Mais pour dire la vérité, la raison qui m'a poussé à vraiment me lancer, c'était de pouvoir faire semblant d'être un développeur compétent en utilisant un éditeur de code dans le terminal 😂 Mdr....

COMMENT DEBUTER ?

Quelles sont les étapes à suivre si tu veux faire comme moi ?

Déjà, il faut installer l'éditeur. Pour ça, il suffit de choisir le système sur lequel vous êtes et de taper la commande d'installation, rien de plus simple. (Note qu'il est également possible d'avoir les raccourcis Helix dans votre éditeur de code actuel via des extensions, mais c'est une chose que je n'ai pas testée).

Après l'installation pour vérifier si tout fonctionne tapez : hx --version

Et pour commencer à utiliser l'éditeur de texte, vous pouvez commencer par le tutoriel fourni par Helix pour apprendre les commandes de l'éditeur. Pour ça, tapez : hx --tutor

Et suivez les instructions pour apprendre à naviguer, supprimer, sélectionner, split l'écran, ouvrir un nouveau fichier, utiliser les macros... dans Helix.

Ma configuration

Une fois le tutoriel terminé, vous pouvez configurer un minimum l'éditeur pour être à l'aise. Pour ça, tapez :config-open en mode normal puis éditez le fichier de configuration config.toml:

# Le thème qui ressemble le plus à ce que j'utilisais sur VS Code
theme = "dark_plus"

[editor]
# Active les numéros de ligne relatifs (affiche "0" sur la ligne actuelle, 
# et compte les écarts 1, 2, 3 pour les lignes au-dessus et en dessous).
# C'est parfait pour sauter rapidement d'une ligne à l'autre avec les commandes Vim/Helix.
line-number = "relative"

# Sauvegarde automatiquement tes fichiers dès que l'éditeur perd le focus 
# (par exemple quand tu changes de fenêtre ou que tu vas sur ton navigateur).
auto-save = true

# Désactive complètement le clic et le défilement à la souris dans l'éditeur.
# Cela t'oblige à tout faire au clavier pour maximiser l'efficacité.
mouse = false

# Affiche le mode actuel (NORMAL, INSERT, SELECT) avec une couleur spécifique 
# dans la barre de statut en bas pour mieux se repérer visuellement.
color-modes = true

[editor.cursor-shape]
# En mode INSERT (quand tu écris du texte), le curseur devient une barre verticale fine (comme sur VS Code).
insert = "bar"

# En mode NORMAL (navigation), le curseur devient un gros bloc carré.
normal = "block"

# En mode SELECT (sélection de texte), le curseur est représenté par un soulignement.
select = "underline"

[keys.normal]
# En mode NORMAL, appuyer sur Échap (esc) va vider les sélections secondaires et 
# ne garder que le curseur principal, tout en réduisant la sélection actuelle à un seul caractère.
esc = ["collapse_selection", "keep_primary_selection"]

[editor.file-picker]
# Permet de voir et de chercher les fichiers cachés (comme les fichiers `.env`) 
# lorsque tu ouvres l'explorateur de fichiers rapide.
hidden = false

# Ignore les fichiers spécifiés dans ton `.gitignore` (comme le dossier `node_modules` ou `vendor`) 
# pour ne pas polluer tes recherches de fichiers.
git-exclude = true

Vous pouvez choisir votre thème en tapant :theme puis en appuyant sur la touche tab pour en sélectionner un et le changer dans le fichier de configuration. Quant aux autres valeurs par défaut, la configuration est très bien et si vous voulez changer ça se passe ici.

D'éditeur de texte à éditeur de code

Enfin pour qu'il affiche vos erreurs de syntaxe, vous aide avec l'autocomplétion, aller à la définition d'une méthode ou d'une classe, formater le code, importer automatiquement... bref devienne un vrai IDE, il faut installer un LSP pour le langage que vous utilisez juste avec une commande. En ce sens-là, Helix se rapproche plus des éditeurs graphiques que des éditeurs multi-modaux tellement c'est facile, c'est l'équivalent d'installer le plugin qui gère le langage sue vscode quoi.

Pour que Helix devienne un IDE pour votre langage, il suffit qu'un LSP qui gère votre langage soit installé de manière globale sur votre système.

Par défaut il prend en charge une grande liste de langages les plus utilisés que vous pouvez voir sur leur site ou tout simplement taper la commande : hx --health

Pour chaque langage il attend un LSP spécifique, par exemple si vous tapez hx --health php, vous allez voir qu'il attend le LSP intelephense et ainsi de suite pour tous vos langages.

Pour installer les LSP des langages que j'utilise (PHP, JavaScript/TypeScript, Vue.js, Rust, HTML, CSS, JSON, Markdown, Dockerfile, YAML...) je me suis fait un petit fichier shell que je peux exécuter sur toutes mes installations de Linux, et pour installer la plupart des LSP vous pouvez utiliser npm :

#!/bin/bash

# Codes couleur
BLUE='\033[0;34m'
GREEN='\033[0;32m'
NC='\033[0m' # Réinitialisation de la couleur

echo -e "${BLUE}\nInstallation de rust-analyzer pour Rust...${NC}"
rustup component add rust-analyzer

echo -e "${BLUE}\nInstallation de vscode-langservers-extracted pour HTML, CSS et JSON...${NC}"
npm install -g vscode-langservers-extracted

echo -e "${BLUE}\nInstallation de @vue/language-server pour Vue.js...${NC}"
npm install -g @vue/language-server

echo -e "${BLUE}\nInstallation de typescript et son serveur pour JavaScript, TypeScript, JSX et TSX...${NC}"
npm install -g typescript typescript-language-server

echo -e "${BLUE}\nInstallation de intelephense pour PHP...${NC}"
npm install -g intelephense

echo -e "${BLUE}\nInstallation de dockerfile-language-server-nodejs pour Dockerfile...${NC}"
npm install -g dockerfile-language-server-nodejs

echo -e "${BLUE}\nInstallation de yaml-language-server pour Docker Compose et le YAML...${NC}"
npm install -g yaml-language-server

echo -e "${BLUE}\nInstallation de @tailwindcss/language-server pour l'auto-completion Tailwind...${NC}"
npm install -g @tailwindcss/language-server

echo -e "${BLUE}\nInstallation de marksman pour la gestion et les liens du Markdown...${NC}"
npm install -g marksman

echo -e "${BLUE}\nInstallation de bash-language-server pour l'aide aux scripts Bash...${NC}"
npm install -g bash-language-server

echo -e "${GREEN}\n=== Installation terminee ! ===\n${NC}"
echo -e "${GREEN}Pour que ton terminal actuel prenne en compte les nouveaux LSP, execute :${NC}"
echo -e "${GREEN}source ~/.bashrc${NC}"

Maintenant que tout est bon, il vous suffit de vous rendre dans le répertoire courant de votre projet et de taper hx . et voilà, vous pouvez désormais comme moi faire semblant d'être un ingénieur compétent que la NASA pourrait embaucher 😎.

CONCLUSION

Pour finir je tiens à préciser que je suis moi-même novice en la matière, mais j'en ai déjà assez vu pour savoir que cette technologie aura un impact positif sur ma manière de coder. Déjà ça augmente ma vitesse, mais en plus un truc inattendu : ça développe ma culture du terminal.

Je n'ouvre quasiment plus mon explorateur de fichiers, je fais tout dans le terminal (cd, ls, touch, cp, rm, mkdir...), et je ne pars chercher ma souris que quand je veux aller sur mon navigateur. Ça m'a permis de me détacher des interfaces graphiques dont je n'avais pas besoin comme Docker Desktop ou GitHub Desktop (en plus ces derniers participaient à faire crasher mon PC). C'est à un niveau que même pour éteindre j'utilise sudo poweroff mdr.

Je vais continuer à l'utiliser et revenir d'ici un an avec les meilleures astuces que j'aurai trouvées. Et vous, avez-vous déjà utilisé un éditeur de texte multi-modal ?