Extension pour VSCode

Extension de Biome pour VS Code

Biome unifie votre stack de développement en combinant les fonctionnalités d’outils distincts. Il utilise un simple fichier de configuration, a des performances fantastiques et fonctionne avec n’importe quelle stack. Cette extension apporte Biome à votre éditeur de façon à ce que vous puissiez :

formater des fichiers à leur enregistrement ou à l’exécution de la commande Mettre le document en forme,
voir les lintings pendant que vous tapez et faire appliquer les corrections de code,
effectuer des refactorisations.

Installation

Vous pouvez installer l’extension de code en vous rendant à la page de l’extension sur la Market Place de Visual Studio Code ou depuis VS Code en effectuant l’une ou l’autre des actions suivantes :

ouvrir l’onglet extensions (Affichage → Extensions) et chercher Biome ;
ouvrir la modale d’ouverture rapide (Ctrl/⌘+P ou Atteindre -> Atteindre le fichier…), entrer ext install biomejs.biome et appuyer sur Entrée.

Démarrage

Outil de formatage par défaut

Configurez Biome comme outil de formatage par défaut pour les fichiers pris en charge pour vous assurer que VS Code utilise Biome plutôt que d’autres outils de formatage que vous avez pu installer. Vous pouvez le faire en ouvrant un fichier JavaScript ou TypeScript, puis :

en ouvrant la palette de commande (Ctrl/⌘+⇧+P ou Affichage → Palette de commandes…),
en sélectionnant Mettre en forme le document avec…,
en sélectionnant Configurer le formateur par défaut…,
en sélectionnant Biome.

Vous pouvez également activer Biome seulement pour des langages spécifiques :

ouvrez le settings.json : ouvrez la palette de commande (Ctrl/⌘+⇧+P) et sélectionnez Préférences: Ouvrir les paramètres utilisateur (JSON),
définissez editor.defaultFormatter à biomejs.biome pour le langage souhaité :

{
  "editor.defaultFormatter": "<autre outil de formatage>",
  "[javascript]": {
    "editor.defaultFormatter": "biomejs.biome"
  }
}

Cette configuration définit Biome comme outil de formatage par défaut pour les fichiers JavaScript. Tous les autres fichiers seront formatés en utilisant <autre outil de formatage>.

Résolution de la configuration

L’extension charge automatiquement le fichier biome.json du répertoire racine de l’espace de travail.

Résolution de Biome

L’extension essaie d’utiliser Biome à partir des dépendances locales de votre projet (node_modules/@biomejs/biome). Nous recommandons d’ajouter Biome comme dépendance de projet pour s’assurer que les scripts NPM et l’extension utilisent la même version de Biome.

Vous pouvez également spécifier explicitement le binaire de Biome que l’extension devrait utiliser, en configurant le paramètre biome.lspBin dans les options de votre éditeur.

Si le projet n’a aucune dépendance sur Biome et qu’aucun chemin explicite n’est configuré, l’extension utilise la version de Biome incluse dans son paquet.

Utilisation

Formater un document

Pour formater un document entier, ouvrez la palette de commande (Ctrl/⌘+⇧+P) et sélectionnez Mettre en forme le document avec….

Pour formater un échantillon de texte, sélectionnez le texte que vous voulez formater, ouvrez la palette de commande (Ctrl/⌘+⇧+P) et sélectionnez Mettre la sélection en forme.

Formater à l’enregistrement

Biome respecte le paramètre Format on Save de VS Code. Pour activer le formatage à l’enregistrement, ouvrez les paramètres (Fichier -> Réglages -> Paramètres), cherchez editor.formatOnSave et activez l’option.

Corriger à l’enregistrement

Biome respecte le paramètre Code Actions On Save de VS Code. Pour activer la correction à l’enregistrement, ajoutez

{
  "editor.codeActionsOnSave": {
    "quickfix.biome": "explicit"
  }
}

dans .vscode/settings.json.

Tri des imports [Expérimental]

L’extension de Biome pour VS Code prend en charge le tri des imports via l’action de code « Organiser les importations ». Par défaut, cette action peut être exécutée en utilisant le raccourci clavier ⇧+Alt/⌥+O ou est accessible via la palette de commande (Ctrl/⌘+⇧+P) en sélectionnant Organiser les importations.

Vous pouvez ajouter la configuration suivante à la configuration de votre éditeur si vous voulez que l’action s’exécute automatiquement à l’enregistrement au lieu de l’appeler manuellement :

{
  "editor.codeActionsOnSave":{
    "source.organizeImports.biome": "explicit"
  }
}

Paramètres de l’extension

`biome.lspBin`

L’option biome.lspBin écrase le binaire de Biome utilisé par l’extension. Le dossier de l’espace de travail est utilisé comme chemin de base si le chemin est relatif.

`biome.rename`

Active Biome pour prendre en charge les renommages dans l’espace de travail (expérimental).

Versionnage

Nous suivons les spécifications suggérées par la documentation officielle :

les versions mineures impaires sont dédiées aux pré-versions : par exemple, *.5.* ;
les versions mineures paires sont dédiées aux versions officielles : par exemple, *.6.*.

Problèmes

J’ai installé `@biomejs/biome`, mais l’extension montre un avertissement disant qu’il n’a pas pu résoudre la librairie

La librairie @biomejs/biome spécifie quelques dépendances facultatives qui sont installées en fonction de votre système d’exploitation et de son architecture.

Il est possible, en revanche, que l’extension ne puisse pas résoudre le binaire au chargement de l’extension. Ceci est causé — probablement — par votre gestionnaire de paquets.

Pour résoudre le problème, essayez d’installer le binaire manuellement. L’avertissement devrait vous indiquer le binaire correspondant à votre machine.

Si vous travaillez dans une équipe qui utilise différents OS/architectures, il est conseillé d’installer tous les binaires :

@biomejs/cli-darwin-arm64,
@biomejs/cli-darwin-x64,
@biomejs/cli-linux-arm64,
@biomejs/cli-linux-x64,
@biomejs/cli-win32-arm64,
@biomejs/cli-win32-x64.

Mon fichier `biome.json` est ignoré dans un espace de travail avec plusieurs racines

À l’heure actuelle, la prise en charge des espaces de travail avec plusieurs racines est limitée, rendant parfois les fichiers biome.json placés dans les dossiers racines individuels invisibles pour l’extension. À l’heure actuelle, il se peut que vous ayez besoin d’installer un espace de travail individuel pour chaque dossier qui dépend de Biome. Vous pouvez suivre l’évolution de cette prise en charge sur ce ticket.