Cela peut sembler idiot, mais il est important pour moi que mes cours Tailwind soient ordonnés de manière cohérente, et je ne veux pas avoir à gérer cela manuellement. Malheureusement, je n’ai jamais trouvé de solution qui me donne exactement ce que je veux, jusqu’à présent.
Voici ma liste d’incontournables :
- Fonctionne en CLI/intégration continue ( Rustywind fonctionnerait ici, mais pas Headwind )
- Fonctionne dans tous les IDE (donc Headwind ne suffit pas, et Rustywind nécessiterait du travail pour s’adapter)
- Utilise les spécifications de commande officielles de Tailwind (encore une fois, Headwind/Rustywind nécessiterait du travail pour arriver ici)
- Fonctionne sur les fichiers Laravel Blade
J’ai donc décidé, avec l’aide de Jason, de le faire fonctionner sur une nouvelle application Laravel, recevant plus tard l’aide du créateur de l’outil.
Ce que j’ai trouvé, c’est que la solution idéale à ma liste de souhaits ci-dessus consiste à l’utiliser prettier-plugin-blade avec le plugin Prettier officiel de Tailwind. Il fonctionne sur CI et CLI, dispose d’intégrations IDE, fonctionne dans les fichiers Blade et utilise l’ordre de classe officiel de Tailwind.
Allons creuser !
L’installation
- Installer
prettier,prettier-plugin-tailwindcss, etprettier-plugin-bladeavecnpm install
npm install --save-dev prettier-plugin-blade@^2 prettier prettier-plugin-tailwindcss
- Ajoutez un
.prettierrcfichier de configuration à la racine de votre projet
Voici le fichier le plus basique avec lequel vous commencerez, avant de commencer à configurer Prettier :
{
"plugins": ["prettier-plugin-blade", "prettier-plugin-tailwindcss"],
"overrides": [
{
"files": [
"*.blade.php"
],
"options": {
"parser": "blade"
}
}
]
}
En plus de cela, vous pouvez ajouter vos propres lignes pour configurer Prettier ; voici ceux que j’ai ajoutés, mais vous pouvez en trouver plus ici .
{
"printWidth": 120,
"semi": true,
"singleQuote": true,
"tabWidth": 4,
"trailingComma": "all",
"plugins": ["prettier-plugin-blade", "prettier-plugin-tailwindcss"],
"overrides": [
{
"files": [
"*.blade.php"
],
"options": {
"parser": "blade"
}
}
]
}
printWidth: Définit la largeur (en caractères) que vous souhaitez que vos lignes atteignent ; ce n’est pas une limite stricte, mais une ligne directrice générale pour Prettier. Prettier en recommande 80. Je ne sais pas sur quoi je vais atterrir ; J’en utilise 120 pour l’instant car c’est ce qui se trouvait dans le fichier de configuration original de Jason.semi: Ajoute des points-virgules à la fin de toutes les lignes en JavaScriptsingleQuote: Utilise des guillemets simples lorsque cela est possible en JavaScripttabWidth: Définit le nombre d’espaces dans chaque niveau d’indentation.trailingComma: Définit quand mettre des virgules de fin dans les structures multilignes
- Ajouter un
.prettierignorefichier
J’ai piraté cela ensemble en utilisant Jason et quelques autres références en ligne, mais je ne peux pas dire que ce soit parfait. Comme quoi .gitignore, chacun aura sa propre façon de procéder.
node_modules
dist
.env*
vendor/
/vendor
public/
.git
**/.git
package-lock.json
composer.lock
Utiliser le package manuellement
Maintenant que le package est installé, voyons ce que nous pouvons en faire .
Tout d’abord, si vous souhaitez exécuter Prettier, vous disposez de quelques options. Le plus courant est de résoudre vos problèmes. Vous exécuterez npx prettier --writeet transmettrez le répertoire que vous corrigez. J’utilise uniquement Prettier pour le code frontend, je vais donc lui transmettre le resources/répertoire :
npx prettier --write resources/
Si vous souhaitez vérifier si votre code réussit, mais ne formate rien (le plus courant en CI), vous pouvez à la place transmettre l’ --checkindicateur, qui renverra un code défaillant si votre code n’est pas formaté correctement :
npx prettier --check resources/
Prenons donc un projet dans lequel j’ai un seul fichier avec un style Tailwind div, résidant àresources/file.html :
<html><body>
<div class="mb-2 font-bold p-2">
Content!
</div>
</body></html>
Si je lance npx prettier --check resources/file.html, ça échouera :
± npx prettier --check resources/file.html
Checking formatting...
[warn] resources/file.html
[warn] Code style issues found in the above file. Run Prettier to fix.
Et si je lance npx prettier --write resources/file.html, ça va résoudre le problème :
± npx prettier --write resources/file.html
resources/file.html 257ms
Et maintenant nous avons un fichier corrigé :
<html>
<body>
<div class="mb-2 p-2 font-bold">Content!</div>
</body>
</html>
C’est ça!
Autres avantages de ce forfait
L’un des avantages de l’utilisation spécifique de ce package est qu’il comprend les contextes spécifiques à Laravel. Par exemple, si vous avez des chaînes à l’intérieur de Blade, cela les corrigera également. Comme vous pouvez le voir, les classes seront réorganisées ici même lorsqu’elles se trouvent dans une chaîne Blade, en tournant ceci :
<div class="{{ 'mb-2 font-bold p-2' }}">Content!</div>
pour ça:
<div class="{{ 'mb-2 p-2 font-bold' }}">Content!</div>
Vous pouvez en savoir plus sur les avantages spécifiques de ce package et sur la manière de personnaliser certains de ses paramètres uniques sur son site de documentation .
Utiliser Pint avec Prettier
Chez Tighten, nous utilisons Duster , qui inclut Pint, ce n’est donc pas une fonctionnalité que j’utilise, mais si vous utilisez Pint sur vos projets, vous pouvez également l’intégrer à vos exécutions Prettier.
Vous pouvez en savoir plus dans la documentation , mais vous le définirez essentiellement useLaravelPintdans truevotre .blade.format.jsonfichier de configuration, puis le plugin Prettier exécutera Pint dans le cadre de tout appel à celui-ci.
Autres options d’utilisation du package
Il existe d’autres façons d’utiliser ce package que de l’exécuter manuellement sur la ligne de commande.
Créez un script NPM pour exécuter Prettier
Si vous souhaitez faciliter l’exécution manuelle (ou par programme) de vos commandes de format, ou indiquer aux futurs développeurs comment et où l’exécuter, vous pouvez ajouter un script à votre package.jsonfichier :
{
// ...
"scripts": {
// ...
"format": "npx prettier --write resources/",
}
// ...
}
Vous pouvez désormais courir npm run formatpour déclencher votre course.
Déclenchez Prettier sur les actions Git avec Husky
Husky est un package JavaScript populaire qui facilite la gestion de vos hooks Git. Chez Tighten, nous l’utilisons souvent pour garantir que tous les participants au projet se souviennent d’exécuter les outils de formatage de code à chaque validation.
Pour un didacticiel sur la configuration de Husky, consultez le guide d’installation de Husky de Tower . Une fois Husky configuré, vous pouvez ajouter une étape pour exécuter Prettier dans le cadre de votre flux de travail Git ; voici mon lint-staged.config.js(que je devrais probablement modifier pour ne fonctionner que sur les fichiers en resources/):
export default {
'**/*': 'prettier --write --ignore-unknown',
};
Formater des fichiers dans VS Code avec Prettier
Si vous souhaitez configurer VS Code pour analyser correctement votre configuration Prettier avec ce plugin, vous devez faire un tout petit peu de configuration. J’ai vu quelques personnes en ligne dire que vous deviez tromper VS Code pour qu’il traite Blade comme du HTML, mais l’auteur du plugin, John, m’a dit que c’était la bonne réponse : ouvrez votre configuration VS Code et ajoutez les éléments de configuration suivants :
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[blade]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"prettier.documentSelectors": [
"**/*.blade.php"
]
}
Ceci, bien sûr, nécessite que vous ayez installé le plugin Prettier VS Code . Une fois le plugin installé, vous pouvez exécuter Prettier en déclenchant « Formater le document » à partir de la palette de commandes, ou vous pouvez définir le editor.formatOnSaveparamètre sur trueet il exécutera Prettier à chaque fois que vous enregistrerez un fichier.
Exécutez plus joliment dans les actions GitHub
Si vous souhaitez configurer Prettier dans votre workflow d’actions GitHub, vous avez deux options : échouer l’action si elle n’est pas correctement formatée, ou simplement la formater sur le serveur.
Si vous souhaitez formater votre code dans le cadre de votre flux de travail GitHub Actions, consultez ce didacticiel .
Si vous souhaitez que votre étape Prettier échoue si la vérification Prettier échoue, consultez ce tutoriel .