Comment installer Prettier dans votre base de code et VSCode

Plus jolie

Prettier est un formateur de code avisé prenant en charge plusieurs langues.

Depuis que j'utilise Prettier, je ne veux plus travailler sur du code sans lui. Malgré quelques soucis au début (la largeur de trait forcée par exemple), je suis tombé amoureux des paramètres par défaut.

Installer et configurer plus joli

Installer Prettier est simple, voici les étapes en un mot. Vous pouvez également suivre le guide d'installation officiel.

Vous devez d’abord installer la version exacte de Prettier localement. Cela garantit que tout le monde utilisera exactement la même version pour formater le code dans le projet.

npm install --save-dev --save-exact prettier

Ensuite, vous devez créer le fichier de configuration Prettier .prettierrc et .prettierignore (facultatif) à la racine de votre projet.

Vous pouvez exécuter cette commande pour créer le fichier de configuration par défaut avec un objet vide :

node --eval "fs.writeFileSync('.prettierrc','{}\n')"

Le fichier .prettierignore fonctionne de la même manière qu'un fichier .gitignore. En fait, Prettier suit déjà les règles énoncées dans votre .gitignore, vous n'en aurez donc peut-être même pas besoin :

? Par défaut, Prettier ignore les fichiers dans les répertoires des systèmes de contrôle de version (".git", ".sl", ".svn" et ".hg") et node_modules (sauf si l'option CLI --with-node-modules est spécifiée). Prettier suivra également les règles spécifiées dans le fichier ".gitignore" s'il existe dans le même répertoire à partir duquel il est exécuté.

Voici un exemple .prettierignore pour ignorer tous les fichiers HTML :

# Ignore all HTML files:
**/*.html

Formater tout le code existant

Avant de continuer à formater l'ensemble de la base de code, validez vos modifications. Je recommande également de fusionner toutes les demandes d'extraction ouvertes, car de nombreux fichiers seront affectés.

Exécutez maintenant cette commande dans le dossier racine de votre projet pour formater tous les fichiers :

npx prettier . --write

ℹ️ utiliser npx ici garantit que la version installée localement de Prettier est exécutée. Ceci est important si vous avez également des plus jolies installées globalement.

Maintenant, tous vos fichiers de projet doivent être bien formatés. ?✨

Installez la plus jolie extension VSCode

Ensuite, vous pouvez configurer un plugin Prettier pour votre IDE. J'utilise Visual Studio Code, mais il existe également des plugins pour de nombreux autres éditeurs.

Pour VSCode, installez cette extension : esbenp.prettier-vscode

Cela fait, vous pouvez accéder aux paramètres VSCode et rechercher « formateur ». Ici, vous pouvez définir le Formateur par défaut sur esbenp.prettier-vscode.

Cependant, si, comme moi, vous travaillez sur de nombreux projets différents et que tous n'ont pas Prettier, vous le laisserez probablement au paramètre par défaut (Aucun).

Au lieu de cela, vous pouvez définir le formateur par défaut dans le fichier de paramètres VSCode local (.vscode/settings.json) des projets que vous utilisez de manière plus jolie.

Pour être sûr que les paramètres VSCode globaux spécifiques à une langue sont remplacés par la configuration locale, vous devrez peut-être spécifier defaultFormatter pour chaque langue individuellement.

Voici un exemple .vscode/settings.json pour référence :

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

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!