mirror of
https://github.com/ae-utbm/sith.git
synced 2024-11-21 21:53:30 +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)](#)
|
[![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/).
|
||||||
|
@ -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
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
|
@ -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.
|
||||||
|
|
||||||
|
@ -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.
|
|
Loading…
Reference in New Issue
Block a user