Foire aux Questions

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é.

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.

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

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.

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

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

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

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.

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

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

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

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

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

Oui. Installez eslint-config-prettier.

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

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

Utilisez la barre de recherche en haut de la page.

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

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

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

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.

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.

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.

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 "~".

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.

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.

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.