Les pubs vous déplaisent ? Aller Sans pub Auj. 

Maison › Générateurs › Générateur de configuration plus joli

Partager sur Facebook Partager sur X Partager sur LinkedIn Partager par e-mail

Copier le lien

Générateur de configuration plus joli

DonnéesPromoteur

ANNONCE · Supprimer ?

SAISIR

Processus automatique Côté client

Basculer la largeur Entrer/Quitter le mode plein écran

Format de sortie

Le JSON est le format le plus courant ; choisissez un format JS si vous avez besoin de configurations dynamiques ou de réglages selon l'environnement.

Options de base

printWidth

Longueur de ligne à laquelle le formatage s'interrompt. Valeur par défaut de Prettier : 80.

tabWidth

Nombre d'espaces par niveau d'indentation. Valeur par défaut de Prettier : 2.

useTabs — utiliser des tabulations au lieu d'espaces pour l'indentation

semi — afficher des points-virgules à la fin des instructions

singleQuote — utiliser des apostrophes simples au lieu des guillemets

quoteProps

Changer la manière dont les noms des propriétés d'objet sont cités.

trailingComma

Afficher des virgules en fin de lignes dans les constructions à plusieurs lignes.

bracketSpacing — espaces à l'intérieur des littéraux d'objet { foo }

bracketSameLine — garder le > des éléments multi-lignes HTML/JSX sur la dernière ligne

arrowParens

Parenthèses autour d'un seul paramètre d'une fonction fléchée.

endOfLine

Style de fin de ligne pour les fichiers générés.

JSX

jsxSingleQuote — utiliser des apostrophes simples dans les attributs JSX

singleAttributePerLine — un attribut HTML/JSX par ligne

Markdown & HTML

proseWrap

Comment Prettier gère le renvoi du texte dans les fichiers Markdown.

htmlWhitespaceSensitivity

Comment Prettier traite les espaces dans HTML.

Surcharge par langage

Ajouter un overrides block pour ajuster les paramètres pour des types de fichiers spécifiques.

Markdown (*.md, *.mdx) — proseWrap: toujours, printWidth: 100

HTML (*.html) — printWidth: 120, singleAttributePerLine: true

YAML (*.yml, *.yaml) — tabWidth: 2, singleQuote: false

JSON (*.json) — printWidth: 200, trailingComma: none

Options de sortie

Inclure une commentaire descriptif (seulement pour les formats JS/YAML)

Générer également un modèle .prettierignore

SORTIR

Côté client

Basculer la largeur Entrer/Quitter le mode plein écran

Configuration générée

.prettierignore

ANNONCE · Supprimer ?

Outils associés

D'autres outils similaires à Générateur de configuration plus joli que vous pourriez trouver utile.

SQL CREATE TABLE Generator

DonnéesPromoteur

Environment Variable Template Expander

DonnéesPromoteur

Générateur de définitions de types GraphQL à partir de JSON

DonnéesPromoteur

Guide

Générateur de configuration plus joli

Construire une configuration Prettier correcte sans chercher dans les documents. Sélectionner chaque option de formatage dans une liste, ajouter des surcharges par langage pour Markdown, HTML, YAML et JSON, puis exporter le résultat sous forme de .prettierrc.json, .prettierrc.yaml, un module ES, un module CommonJS, ou une clé prête à copier "prettier" pour package.json. Un modèle correspondant est généré en parallèle afin que votre dépôt soit prêt à formater dès le premier commit. .prettierignore — JSON pour le fichier le plus simple à partager, YAML pour l'édition humaine, un module JS lorsque vous avez besoin de logique conditionnelle, ou la clé dans package.json lorsque vous voulez un fichier moins dans le dépôt.

Comment utiliser

Choisir un format d'export options de base
Définissez le : largeur de ligne, largeur de tab, points-virgules, style des guillemets, virgules en fin de ligne, espaces dans les crochets, parenthèses autour des fonctions fléchées, et style de fin de ligne.Ajuster le
block si votre codebase utilise React, et le JSX Markdown & HTML block pour le renvoi du texte et le traitement des espaces. Activer tout
surcharge par langage pour appliquer des règles différentes à des types de fichiers spécifiques — par exemple, une largeur plus grande pour le JSON, ou une seule attribut par ligne pour l'HTML. printWidth sur la configuration générée. La placer au niveau racine de votre projet et exécuter
Cliquez Copie ou Télécharger Toutes les options officielles de Prettier npx prettier --write ..

Caractéristiques

— printWidth, tabWidth, useTabs, semi, singleQuote, quoteProps, jsxSingleQuote, trailingComma, bracketSpacing, bracketSameLine, arrowParens, endOfLine, proseWrap, htmlWhitespaceSensitivity, singleAttributePerLine. Cinq formats de sortie
— JSON, YAML, ESM (.mjs), CommonJS (.cjs), et une partie de package.json. Surcharge par langage
pour Markdown, HTML, YAML et JSON avec des valeurs par défaut sensibles que vous pouvez copier telle quelle ou ajuster. Modèle généré automatiquement
couvrant les sorties de construction, les dépendances, les fichiers de verrou, les assets minifiés et les dossiers de cache des frameworks courants. .prettierignore JSDoc
annotation @type sur les sorties de modules JS afin que les éditeurs soient équipés d'autocomplétion et de vérification de type. — chaque modification met à jour immédiatement l'output, vous permettant ainsi de comparer rapidement des combinaisons d'options.
Prévisualisation en temps réel Pourquoi Prettier a-t-il si peu d'options ?

 FAQ

L'objectif de conception de Prettier est d'arrêter les débats sur les styles en étant opiniâtre. Chaque option existante a été ajoutée avec résistance, car il était impossible d'atteindre un consensus sur la « bonne » valeur par défaut. L'équipe résiste activement à l'ajout de nouvelles options afin de maintenir la portabilité des configurations et de garantir une prévisibilité dans les projets. C'est ainsi que des options comme « espaces autour des mots-clés » ne sont pas configurables — Prettier considère les choix de formatage comme des décisions commerciales, et non comme des expressions personnelles.

Quelle est la différence entre trailingComma 'es5' et 'all' ?
'es5' ajoute des virgules en fin de ligne dans les tableaux et objets, mais pas dans les paramètres de fonction ou les appels. 'all' ajoute également des virgules dans les listes de paramètres de fonction et les appels, ce qui est valide en ES2017+ et donne des différences plus nettes dans les commits lorsqu'on ajoute ou supprime des arguments. 'all' est la valeur par défaut de Prettier et la recommandation pour tout projet ciblant du JS moderne ou qui effectue une compilation.

Comment Prettier interagit-il avec ESLint ?
Prettier gère le formatage ; ESLint gère la correction. Ils se chevauchent sur des règles stylistiques comme les guillemets et les points-virgules, ce qui provoque des conflits où ESLint signale des problèmes que Prettier réécrit simplement. La solution est eslint-config-prettier — une configuration partagée qui désactive toutes les règles d'ESLint que Prettier contrôle déjà. Exécuter d'abord Prettier pour formater, puis ESLint pour détecter les bugs. Les plugins comme eslint-plugin-prettier qui exécutent Prettier comme règle de vérification ne sont plus recommandés car ils ralentissent ESLint et masquent les sources d'erreurs.

Qu'est-ce que fait proseWrap dans les fichiers Markdown ?
'preserve' conserve vos retours à la ligne existants. 'always' force le renvoi du texte à la largeur de printWidth, ce qui rend le texte lisible dans n'importe quel éditeur, ce qui fonctionne bien dans les dépôts de documentation. 'never' joint les paragraphes réorganisés en une seule ligne, ce qui est la bonne option pour les fichiers qui seront édités par des outils ou rendus dans des environnements où les retours à la ligne seraient affichés comme des paragraphes séparés. La valeur par défaut est 'preserve' car les retours à la ligne dans certains formats de Markdown peuvent changer le sens du texte.

Quand utiliser un fichier JS plutôt que JSON ?
Utilisez JSON lorsque la configuration est statique et partagée par l'équipe — c'est la forme la plus simple et la plus portable. Utilisez un fichier JS lorsque vous devez importer des règles partagées depuis un package, changer les options selon une variable d'environnement, dériver des surcharges à partir de listes globales dans le code, ou utiliser des types TypeScript via l'import JSDoc @type. Les fichiers JS sont plus lents à charger car Prettier doit les exécuter, mais ce coût est invisible à la vitesse d'enregistrement des éditeurs.

Générateur de configuration Prettier 1

Envie d'une expérience sans pub ? Passez à la version sans pub



 Installez nos extensions

Ajoutez des outils IO à votre navigateur préféré pour un accès instantané et une recherche plus rapide

Sur

恵 Le Tableau de Bord Est Arrivé !

Tableau de Bord est une façon amusante de suivre vos jeux, toutes les données sont stockées dans votre navigateur. D'autres fonctionnalités arrivent bientôt !

ANNONCE · Supprimer ?