Add Biome to documentation

This commit is contained in:
Antoine Bartuccio 2024-10-08 01:49:29 +02:00
parent d0c18d4538
commit 24925f7726
4 changed files with 40 additions and 44 deletions

View File

@ -5,7 +5,7 @@
[![CI status](https://github.com/ae-utbm/sith/actions/workflows/ci.yml/badge.svg)](#) [![CI status](https://github.com/ae-utbm/sith/actions/workflows/ci.yml/badge.svg)](#)
[![Docs status](https://github.com/ae-utbm/sith/actions/workflows/deploy_docs.yml/badge.svg)](https://ae-utbm.github.io/sith) [![Docs status](https://github.com/ae-utbm/sith/actions/workflows/deploy_docs.yml/badge.svg)](https://ae-utbm.github.io/sith)
[![Built with Material for MkDocs](https://img.shields.io/badge/Material_for_MkDocs-526CFE?style=default&logo=MaterialForMkDocs&logoColor=white)](https://squidfunk.github.io/mkdocs-material/) [![Built with Material for MkDocs](https://img.shields.io/badge/Material_for_MkDocs-526CFE?style=default&logo=MaterialForMkDocs&logoColor=white)](https://squidfunk.github.io/mkdocs-material/)
[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com) [![Checked with Biome](https://img.shields.io/badge/Checked_with-Biome-60a5fa?style=flat&logo=biome)](https://biomejs.dev)
[![discord](https://img.shields.io/discord/971448179075731476?label=discord&logo=discord&style=default)](https://discord.gg/xk9wfpsufm) [![discord](https://img.shields.io/discord/971448179075731476?label=discord&logo=discord&style=default)](https://discord.gg/xk9wfpsufm)
### This is the source code of the UTBM's student association available at [https://ae.utbm.fr/](https://ae.utbm.fr/). ### This is the source code of the UTBM's student association available at [https://ae.utbm.fr/](https://ae.utbm.fr/).

View File

@ -152,13 +152,13 @@ En ce qui concerne les templates Jinja
et les fichiers SCSS, la norme de formatage et les fichiers SCSS, la norme de formatage
est celle par défaut de `djHTML`. est celle par défaut de `djHTML`.
Pour Javascript, nous utilisons [standard](https://github.com/standard/standard). Pour Javascript, nous utilisons [biome](https://biomejs.dev/).
C'est à la fois un formateur et un linter avec très peu de configuration, C'est à la fois un formateur et un linter avec très peu de configuration,
un peu comme ruff. un peu comme ruff.
!!!note "Le javascript dans les templates jinja" !!!note "Le javascript dans les templates jinja"
Standard n'est pas capable de lire dans les fichiers jinja, Biome n'est pas capable de lire dans les fichiers jinja,
c'est sa principale limitation. c'est sa principale limitation.
Il est donc recommandé d'éviter de mettre trop de Javascript Il est donc recommandé d'éviter de mettre trop de Javascript
@ -167,9 +167,9 @@ un peu comme ruff.
### Qualité du code ### Qualité du code
Pour s'assurer de la qualité du code, Ruff et Standard sont également utilisés. Pour s'assurer de la qualité du code, Ruff et Biome sont également utilisés.
Tout comme pour le format, Ruff et Standard ddoivent tourner avant chaque commit. Tout comme pour le format, Ruff et Biome doivent tourner avant chaque commit.
!!!note "to edit or not to edit" !!!note "to edit or not to edit"
@ -190,11 +190,11 @@ Tout comme pour le format, Ruff et Standard ddoivent tourner avant chaque commit
ruff check --fix ruff check --fix
``` ```
Standard se comporte d'une manière très similaire Biome se comporte d'une manière très similaire
```bash ```bash
npx standard # Liste toutes les erreurs et leurs catégories npx @biomejs/biome check # Liste toutes les erreurs et leurs catégories
npx standard --fix # Applique tous les fix considérés safe et formatte le code npx @biomejs/biome check --write # Applique tous les fix considérés safe et formate le code
``` ```

View File

@ -354,25 +354,27 @@ Bien installé, il peut effectuer ce travail
à chaque sauvegarde d'un fichier dans son éditeur, à chaque sauvegarde d'un fichier dans son éditeur,
ce qui est très agréable pour travailler. ce qui est très agréable pour travailler.
### Standard ### Biome
[Site officiel](https://github.com/standard/standard) [Site officiel](https://biomejs.dev/)
Puisque Ruff ne fonctionne malheureusement que pour le Python, Puisque Ruff ne fonctionne malheureusement que pour le Python,
nous utilisons Standard pour le javascript. nous utilisons Biome pour le javascript.
Tout comme Ruff, standard fait office de formateur et de linter. Biome est également capable d'analyser et formater les fichiers json et css.
Tout comme Ruff, Biome fait office de formateur et de linter.
### DjHTML ### DjHTML
[Site officiel](https://github.com/rtts/djhtml) [Site officiel](https://github.com/rtts/djhtml)
Ruff permet de formater les fichiers Python et Standard les fichiers js, Ruff permet de formater les fichiers Python et Biome les fichiers js,
mais ils ne formattent pas les templates et les feuilles de style. mais ils ne formattent pas les templates et les feuilles de style.
Pour ça, il faut un autre outil, aisément intégrable Pour ça, il faut un autre outil, aisément intégrable
dans la CI : `djHTML`. dans la CI : `djHTML`.
En utilisant conjointement Ruff, Standard et djHTML, En utilisant conjointement Ruff, Biome et djHTML,
on arrive donc à la fois à formater les fichiers on arrive donc à la fois à formater les fichiers
Python et les fichiers relatifs au frontend. Python et les fichiers relatifs au frontend.

View File

@ -123,7 +123,7 @@ que sont VsCode et Sublime Text.
```json ```json
{ {
"settings": { "settings": {
"lsp_format_on_save": true, "lsp_format_on_save": true, // Commun à ruff et biome
"LSP": { "LSP": {
"LSP-ruff": { "LSP-ruff": {
"enabled": true, "enabled": true,
@ -149,72 +149,66 @@ que sont VsCode et Sublime Text.
} }
``` ```
## Configurer Standard pour son éditeur ## Configurer Biome pour son éditeur
!!!note !!!note
Standard est inclus dans les dépendances du projet. Biome est inclus dans les dépendances du projet.
Si vous avez réussi à terminer l'installation, vous n'avez donc pas de configuration Si vous avez réussi à terminer l'installation, vous n'avez donc pas de configuration
supplémentaire à effectuer. supplémentaire à effectuer.
Pour utiliser Standard, placez-vous à la racine du projet et lancer la commande suivante: Pour utiliser Biome, placez-vous à la racine du projet et lancer la commande suivante:
```bash ```bash
npx standard --fix # pour formatter le code npx @biomejs/biome check # Pour checker le code avec le linter et le formater
npx standard # pour linter le code npx @biomejs/biome check --write # Pour appliquer les changemnts
``` ```
Standard va alors faire son travail sur l'ensemble du projet puis vous dire Biome va alors faire son travail sur l'ensemble du projet puis vous dire
si des documents ont été reformatés (si vous avez fait `npx standard`) si des documents ont été reformatés (si vous avez fait `npx @biomejs/biome format --write`)
ou bien s'il y a des erreurs à réparer (si vous avez faire `npx standard --fix`). ou bien s'il y a des erreurs à réparer (si vous avez faire `npx @biomejs/biome lint`) ou les deux (si vous avez fait `npx @biomejs/biome check --write`).
Appeler Standard en ligne de commandes avant de pousser votre code sur Github Appeler Biome en ligne de commandes avant de pousser votre code sur Github
est une technique qui marche très bien. est une technique qui marche très bien.
Cependant, vous risquez de souvent l'oublier. Cependant, vous risquez de souvent l'oublier.
Or, lorsque le code ne respecte pas les standards de qualité, Or, lorsque le code ne respecte pas les Biomes de qualité,
la pipeline bloque les PR sur les branches protégées. la pipeline bloque les PR sur les branches protégées.
Pour éviter de vous faire régulièrement avoir, vous pouvez configurer Pour éviter de vous faire régulièrement avoir, vous pouvez configurer
votre éditeur pour que Standard fasse son travail automatiquement à chaque édition d'un fichier. votre éditeur pour que Biome fasse son travail automatiquement à chaque édition d'un fichier.
Nous tenterons de vous faire ici un résumé pour deux éditeurs de textes populaires Nous tenterons de vous faire ici un résumé pour deux éditeurs de textes populaires
que sont VsCode et Sublime Text. que sont VsCode et Sublime Text.
=== "VsCode" === "VsCode"
Standard est fourni par le plugin [vscode-standard](https://marketplace.visualstudio.com/items?itemName=standard.vscode-standard). Biome est fourni par le plugin [Biome](https://marketplace.visualstudio.com/items?itemName=biomejs.biome).
Ensuite, ajoutez ceci dans votre configuration : Ensuite, ajoutez ceci dans votre configuration :
```json ```json
{ {
standard.autoFixOnSave: true "editor.defaultFormatter": "<other formatter>",
"[javascript]": {
"editor.defaultFormatter": "biomejs.biome"
}
} }
``` ```
=== "Sublime Text" === "Sublime Text"
Pour formatter, il suffit d'installer le plugin [StandardFormat](https://packagecontrol.io/packages/StandardFormat). Tout comme pour ruff, il suffit d'installer un plugin lsp [LSP-biome](https://packagecontrol.io/packages/LSP-biome).
Aucune configuration supplémentaire n'est nécessaire.
Pour la partie linter, cela nécessite plus de réglage.
* Installer [sublimelinter](http://www.sublimelinter.com/en/latest/installation.html)
* Installer le plugin pour standard [SublimeLinter-contrib-standard](https://packagecontrol.io/packages/SublimeLinter-contrib-standard)
Et enfin, dans la configuration de votre projet, ajouter les lignes suivantes : Et enfin, dans la configuration de votre projet, ajouter les lignes suivantes :
```json ```json
{ {
"settings": { "settings": {
"linters": { "lsp_format_on_save": true, // Commun à ruff et biome
"standard": { "LSP": {
"paths": { "LSP-biome": {
"PATH":"./node_modules/.bin/standard" "enabled": true,
} }
} }
},
} }
} }
``` ```
Pensez à redémarrer le plugin sublimelinter.