Question 1

Qu'est-ce que Prettier Config Generator ?

Accepted Answer

Prettier Config Generator est un outil web interactif gratuit qui vous permet de configurer visuellement chaque option de Prettier et de copier instantanément le fichier .prettierrc généré.

Question 2

Qu'est-ce que Prettier et pourquoi l'utiliser ?

Accepted Answer

Prettier est un formateur de code opiniâtre qui applique un style cohérent dans toute votre base de code, éliminant les débats sur le style lors des revues de code.

Question 3

Qu'est-ce qu'un fichier .prettierrc ?

Accepted Answer

Un fichier .prettierrc est un fichier de configuration à la racine de votre projet qui indique à Prettier comment formater votre code.

Question 4

Comment utiliser cet outil pour générer ma configuration ?

Accepted Answer

Sélectionnez les options Prettier sur la page principale. La configuration se met à jour en temps réel. Cliquez sur "Copier la configuration" et collez le JSON dans un fichier .prettierrc.

Question 5

Prettier Config Generator est-il gratuit ?

Accepted Answer

Oui, entièrement gratuit. Pas d'inscription, pas de compte requis, pas de limites d'utilisation.

Question 6

Cet outil couvre-t-il toutes les options Prettier ?

Accepted Answer

Oui. Il inclut chaque option Prettier officiellement supportée avec des descriptions et des valeurs par défaut.

Question 7

Comment copier et utiliser la configuration générée ?

Accepted Answer

Cliquez sur "Copier la configuration" dans la barre latérale sur ordinateur ou sur le bouton flottant sur mobile.

Question 8

Quelle est la différence entre .prettierrc, prettier.config.js et la clé prettier dans package.json ?

Accepted Answer

Les trois sont des méthodes valides. .prettierrc supporte JSON/YAML, prettier.config.js est un module JavaScript, et la clé prettier dans package.json regroupe tout.

Question 9

Prettier fonctionne-t-il avec TypeScript, React et Vue ?

Accepted Answer

Oui. Prettier supporte TypeScript, JSX/TSX, les composants Vue et beaucoup d'autres formats.

Question 10

Comment intégrer Prettier avec VS Code ?

Accepted Answer

Installez l'extension "Prettier - Code formatter" et ajoutez formatOnSave: true dans vos paramètres VS Code.

Question 11

Comment exécuter Prettier sur tout mon projet ?

Accepted Answer

Exécutez npx prettier --write . à la racine du projet.

Question 12

Quels langages et types de fichiers Prettier supporte-t-il ?

Accepted Answer

JavaScript, TypeScript, JSX, CSS, HTML, Vue, JSON, YAML, Markdown et plus encore.

Question 13

Comment ignorer des fichiers du formatage Prettier ?

Accepted Answer

Créez un fichier .prettierignore à la racine du projet.

Question 14

Puis-je utiliser Prettier avec ESLint ?

Accepted Answer

Oui. Installez eslint-config-prettier.

Question 15

Que fait l'option printWidth ?

Accepted Answer

printWidth indique la longueur de ligne cible. Par défaut 80.

Question 16

Quelle est la différence entre singleQuote et jsxSingleQuote ?

Accepted Answer

singleQuote contrôle les guillemets en JS/TS, jsxSingleQuote contrôle les attributs JSX.

Question 17

Comment utiliser la fonction de recherche ?

Accepted Answer

Utilisez la barre de recherche en haut de la page.

Question 18

Ce site supporte-t-il le mode sombre ?

Accepted Answer

Oui. Cliquez sur le bouton de thème dans l'en-tête.

Question 19

Quelle est la configuration Prettier par défaut ?

Accepted Answer

printWidth: 80, tabWidth: 2, semi: true, singleQuote: false, trailingComma: "all".

Question 20

Comment signaler un bug ou contribuer ?

Accepted Answer

Ouvrez une issue ou une pull request sur le dépôt GitHub.

Question 21

Quelles versions de Prettier cet outil prend-il en charge ?

Accepted Answer

Vous pouvez choisir n'importe quelle version 3.x de Prettier dans le menu déroulant — de 3.0 à 3.6 ainsi que "latest". Le bundle de la version sélectionnée est chargé à la demande depuis jsDelivr, ainsi la liste des options correspond toujours au schéma réel de cette version.

Question 22

Quels langages puis-je formater dans l'onglet Votre code ?

Accepted Answer

TypeScript, JavaScript, Flow, CSS, SCSS, Less, HTML, Vue, templates Angular, JSON, JSON5, JSON avec commentaires, Markdown, MDX, YAML et GraphQL. Le parser est détecté automatiquement à partir de l'entrée, mais vous pouvez le remplacer avec le menu déroulant.

Question 23

Comment fonctionne l'URL partageable ?

Accepted Answer

Cliquez sur le bouton de partage et la version actuelle de Prettier, les options sélectionnées, le code et le remplacement de parser sont compressés en LZ dans le hash de l'URL, puis copiés dans votre presse-papiers. Ouvrir ce lien restaure exactement la même configuration. Rien n'est envoyé à un serveur — tout reste dans le navigateur.

Question 24

Que signifie le compteur de tokens à côté du diff ?

Accepted Answer

Il indique combien de tokens d'IA votre entrée et votre sortie coûteraient avec le modèle sélectionné. GPT-4o / GPT-4 / GPT-3.5 utilisent les tokeniseurs BPE officiels pour un comptage exact ; Claude, Gemini, Llama et Mistral utilisent une approximation basée sur les caractères préfixée par "~".

Question 25

Mon travail survit-il à un rechargement de page ?

Accepted Answer

Oui. Votre version de Prettier, vos sélections d'options et vos préférences de vue fractionnée / tokeniseur sont enregistrées dans localStorage, donc un rechargement restaure tout. Un hash d'URL partageable a priorité s'il est présent lorsque vous ouvrez la page.

Question 26

Pourquoi le bandeau d'erreur de format apparaît-il parfois ?

Accepted Answer

Lorsque le parser de Prettier ne peut pas analyser votre entrée — généralement parce que le parser choisi ne correspond pas au code (par exemple CSS sélectionné mais vous avez collé du JSX) — le message d'erreur apparaît dans un bandeau rouge au-dessus du diff. Changez le parser pour qu'il corresponde à votre code et l'erreur disparaît.

Question 27

Puis-je prévisualiser ma configuration sur des langages autres que JavaScript ?

Accepted Answer

Oui. L'onglet Preview a son propre dropdown de parser à côté du toggle du diff, et chaque parser est livré avec un exemple conçu sur mesure — CSS, SCSS, Less, HTML, Vue, Angular, JSON / JSON5 / JSONC, Markdown, MDX, YAML, GraphQL, plus TypeScript / JS. Changer de parser re-formate l'exemple correspondant avec vos options actuelles, ainsi des options spécifiques au langage comme proseWrap, htmlWhitespaceSensitivity et vueIndentScriptAndStyle ont un endroit où démontrer leur effet. Votre choix persiste entre les rechargements.

Foire aux Questions