From 24925f7726878ead0dcb1efbd299fe232bf66ef6 Mon Sep 17 00:00:00 2001 From: Sli Date: Tue, 8 Oct 2024 01:49:29 +0200 Subject: [PATCH] Add Biome to documentation --- README.md | 2 +- docs/explanation/conventions.md | 14 ++++----- docs/explanation/technos.md | 14 +++++---- docs/tutorial/devtools.md | 54 +++++++++++++++------------------ 4 files changed, 40 insertions(+), 44 deletions(-) diff --git a/README.md b/README.md index 544e473f..ba594fec 100644 --- a/README.md +++ b/README.md @@ -5,7 +5,7 @@ [![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) [![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) ### This is the source code of the UTBM's student association available at [https://ae.utbm.fr/](https://ae.utbm.fr/). diff --git a/docs/explanation/conventions.md b/docs/explanation/conventions.md index d4829f16..17649605 100644 --- a/docs/explanation/conventions.md +++ b/docs/explanation/conventions.md @@ -152,13 +152,13 @@ En ce qui concerne les templates Jinja et les fichiers SCSS, la norme de formatage 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, un peu comme ruff. !!!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. Il est donc recommandé d'éviter de mettre trop de Javascript @@ -167,9 +167,9 @@ un peu comme ruff. ### 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" @@ -190,11 +190,11 @@ Tout comme pour le format, Ruff et Standard ddoivent tourner avant chaque commit ruff check --fix ``` - Standard se comporte d'une manière très similaire + Biome se comporte d'une manière très similaire ```bash - npx standard # 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 # Liste toutes les erreurs et leurs catégories + npx @biomejs/biome check --write # Applique tous les fix considérés safe et formate le code ``` diff --git a/docs/explanation/technos.md b/docs/explanation/technos.md index 6cd7ff12..b1c67561 100644 --- a/docs/explanation/technos.md +++ b/docs/explanation/technos.md @@ -354,25 +354,27 @@ Bien installé, il peut effectuer ce travail à chaque sauvegarde d'un fichier dans son éditeur, 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, -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 [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. Pour ça, il faut un autre outil, aisément intégrable 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 Python et les fichiers relatifs au frontend. diff --git a/docs/tutorial/devtools.md b/docs/tutorial/devtools.md index e34b9484..083c05fa 100644 --- a/docs/tutorial/devtools.md +++ b/docs/tutorial/devtools.md @@ -123,7 +123,7 @@ que sont VsCode et Sublime Text. ```json { "settings": { - "lsp_format_on_save": true, + "lsp_format_on_save": true, // Commun à ruff et biome "LSP": { "LSP-ruff": { "enabled": true, @@ -149,72 +149,66 @@ que sont VsCode et Sublime Text. } ``` -## Configurer Standard pour son éditeur +## Configurer Biome pour son éditeur !!!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 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 -npx standard --fix # pour formatter le code -npx standard # pour linter le code + npx @biomejs/biome check # Pour checker le code avec le linter et le formater + npx @biomejs/biome check --write # Pour appliquer les changemnts ``` -Standard 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`) -ou bien s'il y a des erreurs à réparer (si vous avez faire `npx standard --fix`). +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 @biomejs/biome format --write`) +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. 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. 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 que sont VsCode et Sublime Text. === "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 : ```json { - standard.autoFixOnSave: true + "editor.defaultFormatter": "", + "[javascript]": { + "editor.defaultFormatter": "biomejs.biome" + } } ``` === "Sublime Text" - Pour formatter, il suffit d'installer le plugin [StandardFormat](https://packagecontrol.io/packages/StandardFormat). - 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) + Tout comme pour ruff, il suffit d'installer un plugin lsp [LSP-biome](https://packagecontrol.io/packages/LSP-biome). Et enfin, dans la configuration de votre projet, ajouter les lignes suivantes : ```json { "settings": { - "linters": { - "standard": { - "paths": { - "PATH":"./node_modules/.bin/standard" + "lsp_format_on_save": true, // Commun à ruff et biome + "LSP": { + "LSP-biome": { + "enabled": true, } - } - }, + } } } - ``` - - Pensez à redémarrer le plugin sublimelinter. \ No newline at end of file + ``` \ No newline at end of file