Formatez votre code en utilisant Prettier Like a Pro

Ne soyez pas comme ce type, ne soyez pas un connard.

Pourquoi un code formaté est nécessaire

Le formatage aide à structurer les lignes de code que vous écrivez, ce qui les rend plus faciles à lire et à comprendre. Ceci est crucial lorsque vous travaillez sur une base de code avec plusieurs développeurs, chacun avec son propre style et ses préférences quant à la façon dont son code est structuré. Avoir une base de code au format uniforme permet d'éviter les maux de tête lors de la fusion et crée une norme sur laquelle vous et votre équipe pouvez vous appuyer.

Il existe plusieurs façons de configurer un modèle de formatage pour vous et votre équipe. Dans cet article, nous explorerons l’une des options les plus populaires : Plus jolie.

Selon l'enquête State of JS 2021, 83 % des personnes interrogées utilisent régulièrement Prettier comme formateur de choix, soit une augmentation de 13 % par rapport à l'enquête de l'année précédente. De nombreuses équipes de premier plan, telles que celles de Facebook, Webflow, Jest, Dropbox, Spotify et PayPal, utilisent Prettier pour garantir un formatage cohérent dans leurs bases de code.

Prettier peut être configuré et exécuté de plusieurs manières. Dans cet exemple, je vais montrer comment configurer Prettier avec un hook Git pour l'automatisation dans VS Code. Pour plus d’exemples et de configurations, visitez la documentation de Prettier.

---

Avant de commencer

Bien que ce ne soit pas obligatoire, il est utile de comprendre les options que vous allez configurer et ce qu’elles font. Vous devrez créer deux fichiers et les placer au niveau racine de votre projet. Gardez à l’esprit que ces options de formatage sont spécifiques au projet, vous devrez donc répéter ce processus pour chaque nouveau projet. Ces fichiers contiendront les options que vous pourrez choisir, et vous pourrez modifier ou supprimer les options qui ne correspondent pas aux besoins de votre projet.

---

.plus jolirc

Ce fichier, situé au niveau racine de votre projet, définit les règles de formatage de base pour Prettier. Il utilise une structure JSON et peut être adapté aux standards de votre équipe. Voici un exemple :

---

.editorconfig

Ce fichier garantit la cohérence des paramètres de votre éditeur avant même l'exécution de Prettier. Il couvre également les options que .prettierrc ne couvre pas. Voici un exemple :

---

Configuration du flux de travail

Pour faciliter l'utilisation, les deux fichiers peuvent être copiés à la fin de l'article. Une fois que vous avez créé et configuré les fichiers .prettierrc et .editorconfig, vous pouvez continuer. Installez ces trois packages npm pour rationaliser le processus de formatage :

npm install --save-dev plus joli husky à peluches

Puis initialisez Husky

initialisation du husky npx

Ces étapes accomplissent ce qui suit :

• Installez Prettier pour le formatage.
• Installez lint-staging pour formater uniquement les fichiers préparés avant de les valider.
• Installez Husky pour configurer les hooks Git pour l'automatisation.
• Initialisez Husky, qui crée les dépendances nécessaires et un fichier de pré-validation.

---

Configuration de nouveaux fichiers

Deux fichiers supplémentaires nécessitent une configuration : pre-commit et .lintstagedrc

pré-engagement

Ce fichier, créé automatiquement par Husky, guide le processus d'automatisation. Il se trouve dans le dossier Husky créé lors de l'initialisation. Configurez-le comme indiqué ci-dessous :

.lintstagedrc

Créez ce fichier (sans extension similaire à .editorconfig et .prettierrc) dans le dossier racine du projet. Il réduit la portée des fichiers aux formats plus jolis grâce au hook Git. Vous trouverez ci-dessous un exemple, mais vous pouvez l'ajuster en fonction des types de fichiers de votre projet :

---

Test du flux de travail

Une fois les quatre fichiers en place (.prettierrc, .editorconfig, .lintstagedrc et pre-commit), vous pouvez tester le flux de travail.

1. Apportez une simple modification de formatage à un fichier .js (ajoutez des espaces ou des retraits inutiles, par exemple).
2. Mettez en scène vos modifications : git ajouter -A
3. Commit avec un message de test git commit -m "Test du workflow de formatage"

Si tout a été configuré correctement, votre terminal devrait afficher un message de réussite et les modifications de formatage seront automatiquement appliquées.

---

C'est ça!

Vous disposez désormais d'un moyen simple mais efficace d'exploiter les hooks Prettier et Git pour automatiser le formatage de votre code.

J’aimerais entendre vos pensées ! Faites-moi savoir dans les commentaires si cela vous a été utile ou si vous rencontrez des problèmes, je suis là pour vous aider !

---

Exemples de fichiers Copier-Coller

.plus jolirc

{
  "arrowParens": "always",
  "bracketSameLine": false,
  "bracketSpacing": true,
  "embeddedLanguageFormatting": "auto",
  "endOfLine": "lf",
  "htmlWhitespaceSensitivity": "css",
  "insertPragma": false,
  "jsxSingleQuote": false,
  "printWidth": 80,
  "proseWrap": "preserve",
  "quoteProps": "as-needed",
  "requirePragma": false,
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "useTabs": false,
  "vueIndentScriptAndStyle": false
}

.editorconfig

# Top-most EditorConfig file
root = true

# Global settings
[*]
indent_style = space
indent_size = 2
tab_width = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

# Overrides
[*.md]
trim_trailing_whitespace = false
max_line_length = off

[*.yml]
indent_style = space
indent_size = 2

[*.ts]
indent_style = space
indent_size = 4

[Makefile]
indent_style = tab

[*.html]
indent_size = 2

[*.json]
indent_size = 2

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!