diff --git a/docs/explanation/conventions.md b/docs/explanation/conventions.md index 47989f7e..d4829f16 100644 --- a/docs/explanation/conventions.md +++ b/docs/explanation/conventions.md @@ -152,16 +152,24 @@ En ce qui concerne les templates Jinja et les fichiers SCSS, la norme de formatage est celle par défaut de `djHTML`. -Pour Javascript, vous pouvez utiliser -Prettier, avec sa configuration par défaut, -qui est plutôt bonne, -mais nous n'avons pas de norme établie pour le projet. +Pour Javascript, nous utilisons [standard](https://github.com/standard/standard). +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, + c'est sa principale limitation. + + Il est donc recommandé d'éviter de mettre trop de Javascript + directement dans jinja mais de préférer des fichiers dédiés. + ### Qualité du code -Pour s'assurer de la qualité du code, Ruff est également utilisé. +Pour s'assurer de la qualité du code, Ruff et Standard sont également utilisés. -Tout comme pour le format, Ruff doit tourner avant chaque commit. +Tout comme pour le format, Ruff et Standard ddoivent tourner avant chaque commit. !!!note "to edit or not to edit" @@ -182,6 +190,14 @@ Tout comme pour le format, Ruff doit tourner avant chaque commit. ruff check --fix ``` + Standard 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 + ``` + + ## Documentation La documentation est écrite en markdown, avec les fonctionnalités diff --git a/docs/explanation/technos.md b/docs/explanation/technos.md index cf546b1e..6cd7ff12 100644 --- a/docs/explanation/technos.md +++ b/docs/explanation/technos.md @@ -354,16 +354,25 @@ 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 + +[Site officiel](https://github.com/standard/standard) + +Puisque Ruff ne fonctionne malheureusement que pour le Python, +nous utilisons Standard pour le javascript. + +Tout comme Ruff, standard fait office de formateur et de linter. + ### DjHTML [Site officiel](https://github.com/rtts/djhtml) -Ruff permet de formater les fichiers Python, -mais il ne formatte pas les templates et les feuilles de style. +Ruff permet de formater les fichiers Python et Standard 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 et djHTML, +En utilisant conjointement Ruff, Standard 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 b585b92b..e34b9484 100644 --- a/docs/tutorial/devtools.md +++ b/docs/tutorial/devtools.md @@ -99,52 +99,122 @@ votre éditeur pour que Ruff fasse son travail automatiquement à chaque éditio Nous tenterons de vous faire ici un résumé pour deux éditeurs de textes populaires que sont VsCode et Sublime Text. -### VsCode +=== "VsCode" -Installez l'extension Ruff pour VsCode. -Ensuite, ajoutez ceci dans votre configuration : + Installez l'extension Ruff pour VsCode. + Ensuite, ajoutez ceci dans votre configuration : -```json -{ - "[python]": { - "editor.formatOnSave": true, - "editor.defaultFormatter": "charliermarsh.ruff" + ```json + { + "[python]": { + "editor.formatOnSave": true, + "editor.defaultFormatter": "charliermarsh.ruff" + } } -} -``` + ``` -### Sublime Text +=== "Sublime Text" -Vous devez installer ce plugin : https://packagecontrol.io/packages/LSP-ruff. -Suivez ensuite les instructions données dans la description du plugin. + Vous devez installer le plugin [LSP-ruff](https://packagecontrol.io/packages/LSP-ruff). + Suivez ensuite les instructions données dans la description du plugin. -Dans la configuration de votre projet, ajoutez ceci: + Dans la configuration de votre projet, ajoutez ceci: -```json -{ - "settings": { - "lsp_format_on_save": true, - "LSP": { - "LSP-ruff": { - "enabled": true, + ```json + { + "settings": { + "lsp_format_on_save": true, + "LSP": { + "LSP-ruff": { + "enabled": true, + } } } } -} + ``` + + Si vous utilisez le plugin [anaconda](http://damnwidget.github.io/anaconda/), + pensez à modifier les paramètres du linter pep8 + pour éviter de recevoir des warnings dans le formatage + de ruff comme ceci : + + ```json + { + "pep8_ignore": [ + "E203", + "E266", + "E501", + "W503" + ] + } + ``` + +## Configurer Standard pour son éditeur + +!!!note + + Standard 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: + +```bash +npx standard --fix # pour formatter le code +npx standard # pour linter le code ``` -Si vous utilisez le plugin [anaconda](http://damnwidget.github.io/anaconda/), -pensez à modifier les paramètres du linter pep8 -pour éviter de recevoir des warnings dans le formatage -de ruff comme ceci : +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`). -```json -{ - "pep8_ignore": [ - "E203", - "E266", - "E501", - "W503" - ] -} -``` +Appeler Standard 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é, +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. +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). + + Ensuite, ajoutez ceci dans votre configuration : + + ```json + { + standard.autoFixOnSave: true + } + ``` + +=== "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) + + Et enfin, dans la configuration de votre projet, ajouter les lignes suivantes : + + ```json + { + "settings": { + "linters": { + "standard": { + "paths": { + "PATH":"./node_modules/.bin/standard" + } + } + }, + } + } + ``` + + Pensez à redémarrer le plugin sublimelinter. \ No newline at end of file