mirror of
https://github.com/ae-utbm/sith.git
synced 2024-12-21 23:31:18 +00:00
Add Biome to documentation
This commit is contained in:
parent
d0c18d4538
commit
24925f7726
@ -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/).
|
||||
|
@ -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
|
||||
```
|
||||
|
||||
|
||||
|
@ -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.
|
||||
|
||||
|
@ -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": "<other formatter>",
|
||||
"[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.
|
||||
```
|
Loading…
Reference in New Issue
Block a user