Formater JavaScript

Téléverser

0 caractères

Outil de formatage de code JavaScript/TypeScript/JSX/TSX/CSS/HTML/JSON dans le navigateur, avec configuration détaillée style Prettier, compression et obfuscation Terser, éditeur CodeMirror intégré, aperçu en temps réel, raccourcis clavier, chargement et téléchargement de fichiers.

Recommandations connexes

Minification JS

CSS Formatter

Formateur JSX

Générateur de QR Codes/Codes-Barres

Générateur de code cURL

Obfuscation JavaScript

Cas d'utilisation

Coller du code JS tiers compressé pendant le développement frontend pour l'embellir rapidement et faciliter la lecture et le débogage
Uniformiser le formatage du code JavaScript/TypeScript avant les revues de code d'équipe, éliminer les différences de style sur l'indentation, les guillemets, les points-virgules, et se concentrer sur la revue de logique
Lors de la reprise de projets legacy, formater en un clic le vieux code JS mal formaté pour comprendre rapidement la structure et la hiérarchie logique
Avant le déploiement en production, utiliser Terser pour compresser et obscurcir le code JavaScript, réduire la taille du fichier et améliorer la vitesse de chargement des pages
Lors de l'écriture de démos JS/JSX en ligne, maintenir le code ordonné avec un formatage en temps réel pour le partager facilement avec des collègues ou la communauté
Lors de l'apprentissage des effets de chaque option Prettier, prévisualiser les résultats de formatage en ajustant les options, comprendre des paramètres comme tabWidth, trailingComma, etc.
Traiter des extraits de code copiés depuis des plateformes comme Stack Overflow, GitHub, réparer automatiquement les problèmes d'indentation et de sauts de ligne
Lors de l'écriture de fichiers de configuration JSON, formater automatiquement l'indentation et les sauts de ligne pour éviter les échecs d'analyse causés par des erreurs de virgules ou de parenthèses
Lors du développement de pages CSS/HTML, formater le code JS+CSS+HTML du même projet en un seul endroit pour maintenir un style unifié
Organiser rapidement le code JS de problèmes d'algorithmes avant des entretiens, un formatage standard améliore la présentation du code

Comment utiliser

Ouvrez la page de l'outil de formatage JavaScript, vous pouvez coller du code directement dans la zone d'édition à gauche, ou cliquer sur le bouton de chargement pour sélectionner des fichiers locaux (supporte les formats .js/.ts/.jsx/.tsx/.css/.html/.json)
Sélectionnez le type de langage correspondant : l'outil détecte normalement automatiquement, si la détection n'est pas précise sélectionnez manuellement JavaScript/TypeScript/JSX/TSX/CSS/HTML/JSON dans le menu déroulant des langages
Configurez les options de formatage : vous pouvez choisir des préréglages rapides (default/modern/classic), ou ajuster manuellement les options Prettier (largeur d'indentation, tabulations/espaces, largeur de ligne, point-virgule, guillemets, virgule finale, parenthèses des flèches)
Si vous avez besoin de compresser du code, passez en mode compression, configurez les options Terser (si compress est activé, si mangle les noms de variables, si compresser les variables de niveau supérieur), niveau d'optimisation CSS, options de compression HTML
L'outil traite le code en temps réel, la zone d'édition à droite affiche immédiatement le résultat formaté ou compressé, la barre d'état en bas affiche en temps réel les statistiques de caractères, d'octets et de taux de compression
Utilisez les raccourcis clavier pour améliorer l'efficacité : Ctrl+Shift+B déclenche le formatage, Ctrl+Shift+M bascule en mode compression, Ctrl+Shift+O ouvre un fichier, Ctrl+Shift+D télécharge le résultat, Ctrl+Shift+K efface l'éditeur
Lorsque vous êtes satisfait, cliquez sur le bouton de copie pour copier le résultat dans le presse-papiers, ou cliquez sur télécharger pour enregistrer en fichier local ; vous pouvez également cliquer sur partager pour générer un lien URL avec code et configuration à partager avec d'autres

Fonctionnalités

Support multilingue : formate simultanément 7 langages frontend courants : JavaScript, TypeScript, JSX, TSX, CSS, HTML, JSON, traite tout le code frontend en un seul endroit
Configuration détaillée style Prettier : support des options complètes telles que tabWidth (2/4/8 espaces), useTabs (tabulations vs espaces), printWidth (largeur de ligne), semi (point-virgule), singleQuote (guillemets simples vs doubles), trailingComma (virgule finale), arrowParens (parenthèses des fonctions fléchées)
Fonction de minification de code : intègre le moteur de compression Terser, supporte les options de niveau production comme compress (compression), mangle (obfuscation des noms), toplevel (compression des variables de niveau supérieur)
Optimisation spécifique CSS : fournit une configuration de niveau d'optimisation CSS, supporte la compression CSS, la suppression des commentaires, la suppression des espaces et autres traitements spécifiques
Options de compression HTML : supporte la configuration HTML minify, peut réduire les espaces blancs, supprimer les commentaires, supprimer les guillemets d'attributs, etc.
Traitement en temps réel : formate et prévisualise le code en temps réel lors de la saisie, pas besoin de cliquer sur un bouton pour voir le résultat du formatage
Éditeur CodeMirror : éditeur professionnel CodeMirror intégré avec coloration syntaxique, numéros de ligne, correspondance des parenthèses, pliage de code et expérience d'édition professionnelle
Chargement et téléchargement de fichiers : supporte le chargement direct de fichiers locaux .js/.ts/.jsx/.tsx/.css/.html/.json, après formatage vous pouvez télécharger le fichier traité en un clic
Liens de partage : enregistre le code et la configuration via le hash de l'URL, génère un lien à partager avec des collègues pour reproduire la scène de formatage actuelle
Historique : enregistre automatiquement l'historique de formatage dans localStorage, vous pouvez revenir aux versions précédentes de code et de configuration à tout moment
Raccourcis clavier : supporte des raccourcis comme Ctrl+Shift+B pour formater, Ctrl+Shift+M pour minifier, Ctrl+Shift+O pour ouvrir un fichier, Ctrl+Shift+D pour télécharger, Ctrl+Shift+K pour effacer
Préréglages rapides : fournit 3 préréglages de configuration rapide : default (par défaut), modern (moderne), classic (classique), bascule entre les styles courants en un clic
Statistiques de caractères : affiche en temps réel la comparaison du nombre de caractères, d'octets et du taux de compression entre le code original et le code traité
Code d'exemple : inclut des codes d'exemple pour chaque langage, cliquez pour les charger et tester rapidement les fonctionnalités

FAQ

Est-ce que la logique du code JavaScript changera après formatage ?

Non. Le formatage ne fait qu'ajuster le contenu lié au « formatage » comme les espaces blancs, l'indentation, les sauts de ligne, la position des parenthèses, le style des guillemets, il est basé sur une transformation AST, la structure AST du code avant et après le formatage est complètement identique, la logique d'exécution est 100% la même. Tant que le code lui-même est syntaxiquement correct et peut être analysé normalement, le formatage ne changera aucun comportement d'exécution, vous pouvez l'utiliser en toute confiance. Mais la compression (mangle), bien qu'elle ne change pas non plus la logique, nécessite une attention particulière aux scénarios spéciaux comme eval et les exportations de variables globales, en évitant des configurations inappropriées.

Que faire si le résultat de l'outil de formatage est différent de mon VS Code/Prettier local ?

La logique de formatage de cet outil tente de rester cohérente avec le comportement officiel de Prettier. Si les résultats diffèrent, vérifiez les options de configuration : vérifiez que les options core tabWidth, useTabs, semi, singleQuote, trailingComma, arrowParens sont exactement les mêmes des deux côtés. De plus faites attention aux différences de version de Prettier — les configurations par défaut de Prettier 2/3 ont des différences subtiles (v3 par défaut trailingComma: all, v2 par défaut es5 ; depuis v2 arrowParens par défaut always). Si votre projet local a un fichier de configuration .prettierrc, ajustez les options sur le web pour qu'elles correspondent à celles de ce fichier, les résultats de formatage seront identiques.

Est-ce que le code compressé peut être restauré ? Est-ce que les noms de variables mangled peuvent être récupérés ?

Le code formaté est complètement réversible — parce que seul le formatage a changé, tous les identifiants et la logique sont complètement préservés, reformater le restaurera. Mais le code compressé : la partie de suppression des espaces et commentaires peut être reformatée pour récupérer la mise en page, mais mangle (obfuscation des noms de variables) est irréversible — le nom de variable avec une signification d'origine userName est devenu a, ce processus est unidirectionnel, on ne peut pas restaurer automatiquement le nom d'origine. Si vous avez besoin de déboguer du code compressé en production, vous devez configurer la génération de fichiers Source Map, via Source Map mapper de retour aux positions du code source. Donc avant de compresser assurez-vous de conserver le code source original non compressé !

Quels navigateurs sont pris en charge ? Peut-on l'utiliser sur téléphone mobile ?

Cet outil prend en charge tous les navigateurs modernes : les dernières versions de Chrome, Firefox, Safari, Edge fonctionnent correctement. IE n'est pas pris en charge (actuellement personne n'utilise IE pour développer). La mise en page responsive s'adapte aux écrans de téléphone, mais l'édition de code sur petits écrans a une expérience moyenne, il est recommandé de l'utiliser sur des navigateurs de bureau pour une meilleure efficacité sur grands écrans. Tous les calculs de formatage et de compression s'exécutent localement dans le navigateur, pas besoin d'envoyer du code sur des serveurs, le code ne quitte jamais votre navigateur, c'est sûr et fiable.

Pourquoi certain code ne peut pas être formaté et affiche une erreur d'analyse ?

L'outil de formatage doit d'abord analyser le code en AST pour fonctionner, si le code a des erreurs syntaxiques (parenthèses non correspondantes, chaînes non fermées, mots-clés mal orthographiés, virgules en trop, etc.), le parseur ne peut pas comprendre la structure du code et signale une erreur. Veuillez d'abord vérifier les erreurs syntaxiques du code : regardez s'il y a des messages d'erreur dans la console, si l'éditeur a des lignes ondulées rouges indiquant la position de l'erreur, après avoir corrigé les erreurs syntaxiques vous pourrez formater normalement. De plus assurez-vous de sélectionner le bon mode de langage, ne sélectionnez pas JS normal pour du code JSX/TSX.

Mon code sera-t-il envoyé sur un serveur ? Le code est-il sûr ?

Non. Tout le formatage, la compression et la coloration syntaxique s'exécutent complètement dans votre navigateur local via JavaScript, le code n'est envoyé à aucun serveur, il est traité complètement sur votre appareil. Vous pouvez tester en déconnectant le réseau : après déconnexion l'outil continue de fonctionner correctement. La fonction de liens de partage encode le code et la configuration dans le hash de l'URL, en cliquant sur partager cela ne génère qu'une URL, le code n'est pas envoyé — mais si vous envoyez le lien à d'autres personnes, en ouvrant le lien ils pourront voir votre code, donc ne partagez pas de code sensible via des liens.

Peut-on formatter des composants à fichier unique Vue (.vue) ? Et Svelte ?

Actuellement le support multilingue de cet outil inclut JS/TS/JSX/TSX/CSS/HTML/JSON, les fichiers à fichier unique (SFC) de Vue avec <template>/<script>/<style> et les composants Svelte ne sont pas pris en charge pour un formatage direct complet, mais vous pouvez copier séparément la partie script (JS/TS), la partie style (CSS) et la partie template (HTML) en sélectionnant le langage correspondant pour formater individuellement. À l'avenir il sera envisagé d'ajouter le support du formatage SFC Vue/Svelte.

Comment configurer une convention de formatage unifiée pour l'équipe ?

Pour une convention unifiée d'équipe il est recommandé la combinaison de trois couches : ① placez .editorconfig à la racine du projet pour uniformiser les configurations de base de l'éditeur (indentation, sauts de ligne, encodage) ; ② utilisez Prettier et placez un fichier de configuration .prettierrc dans le projet, tous les développeurs et CI utilisent cette configuration pour formater, cet outil peut également sélectionner les options correspondantes pour correspondre à la configuration ; ③ utilisez ESLint + eslint-config-prettier pour désactiver les règles de style ESLint et ne vérifier que la qualité du code. Configurez l'éditeur pour formater automatiquement à la sauvegarde (VS Code installez l'extension Prettier, configurez editor.formatOnSave: true), ajoutez une étape lint dans CI pour vérifier le format, garantissant que le code soumis respecte les normes.

Quels avantages a la virgule finale (trailingComma) ? Faut-il l'activer ?

Il est fortement recommandé d'activer la virgule finale (au moins au niveau es5, niveau all recommandé). Les avantages de la virgule finale sont : ① des diffs Git plus propres : lors de l'ajout du dernier élément vous n'avez pas besoin de modifier la ligne précédente pour ajouter une virgule, il n'y a que le diff de la nouvelle ligne, le diff de la ligne précédente n'est pas pollué par l'ajout de virgule ; ② c'est plus pratique lors de la réorganisation des éléments, pas besoin de gérer les problèmes de virgule finale ; ③ les navigateurs modernes et Node.js prennent complètement en charge les virgules finales, l'ancien IE ne les prend pas en charge mais actuellement il n'y a pas lieu de considérer IE. Le seul inconvénient est une virgule de plus, mais ça vaut complètement la peine par rapport à la commodité apportée. Prettier v3 par défaut est all.

Lors de la compression faut-il activer mangle ? Quelle est la différence entre compress et mangle ?

Pour la compression en production il est recommandé d'activer à la fois compress et mangle, ce sont deux options de compression indépendantes : compress est l'optimisation du code (pliage de constantes, suppression de code mort, simplification d'expressions, etc.), il ne modifie la structure du code que quand il peut simplifier, il ne change pas les noms de variables ; mangle est le raccourcissement des noms de variables locales, il change les noms de variables longs en caractères individuels, c'est l'une des plus grandes sources de réduction de taille. Tant que votre code n'est pas une bibliothèque destinée à être appelée externement directement par des noms de variables, ou n'utilise pas eval pour accéder dynamiquement aux noms de variables, mangle est sûr et peut réduire considérablement la taille. Si c'est une bibliothèque open source qui doit préserver les noms d'API, configurez mangle.reserved pour préserver les noms exportés.

Pourquoi lors du formatage JSON certains caractères sont-ils automatiquement échappés ?

La spécification JSON a des exigences syntaxiques strictes : les chaînes doivent être entre guillemets doubles, il ne peut pas y avoir de virgule finale, les caractères spéciaux doivent être échappés (saut de ligne→\n, guillemets→\", barre oblique inverse→\\, Tab→\t, etc.). Si dans votre chaîne JSON il y a des caractères spéciaux non échappés, lors du formatage ils seront automatiquement échappés conformément à la spécification JSON, c'est le comportement correct. Note : JSON n'est pas JavaScript, dans JSON on ne peut pas écrire de commentaires, il ne peut pas y avoir de guillemets simples, il ne peut pas y avoir undefined, ceux-ci causeront un échec d'analyse JSON.

Comment faire pour que les paramètres des fonctions fléchées aient toujours des parenthèses ? Ou pas de parenthèses ?

Ajustez l'option arrowParens : always c'est toujours avec parenthèses ((x) => x), qui est la valeur par défaut depuis Prettier v2, l'avantage est que lors de l'ajout ou de la suppression de paramètres vous n'avez pas besoin d'ajouter ou de supprimer des parenthèses, les diffs sont plus propres ; avoid c'est omettre les parenthèses pour un seul paramètre (x => x), le code est plus concis. Choisissez selon le style de l'équipe, les deux styles ne sont ni bons ni mauvais, uniformisez simplement. Note : les annotations de type de paramètre, paramètres par défaut, paramètres de déstructuration auront des parenthèses quelle que soit la configuration.

Est-ce que le formatage peut réparer automatiquement les problèmes de style signalés par ESLint ?

Cet outil est un formatage style Prettier, il ne peut réparer que les problèmes de style dont Prettier s'occupe (indentation, guillemets, point-virgule, virgule finale, largeur de ligne, espaces, etc.). Les problèmes de qualité du code signalés par ESLint (comme les variables inutilisées, l'absence de return, les problèmes de ===) sont des problèmes logiques, l'outil de formatage ne peut pas les réparer automatiquement, vous devez les modifier manuellement. Si votre ESLint a configuré eslint-config-prettier, après que Prettier a formaté, ESLint ne signalera plus d'erreurs liées au style, les problèmes de qualité restants réparez-les manuellement.

Quelle taille maximale de fichier de code est prise en charge ? Les gros fichiers sont-ils lents à formater ?

Comme le formatage s'exécute localement dans le navigateur, la taille de fichier prise en charge dépend des performances de votre appareil, normalement des fichiers JS de quelques dizaines de Ko à plusieurs Mo peuvent être traités correctement, le JS d'un seul fichier de projets courants est complètement suffisant. Si c'est un fichier JS empaqueté particulièrement grand (quelques dizaines de Mo) cela peut être lent voire manquer de mémoire, ces fichiers très volumineux sont recommandés d'être traités localement en ligne de commande Node.js+Prettier/Terser. La taille des fichiers source individuels dans le développement quotidien est normalement dans la plage de traitement.

Pourquoi en appuyant sur Ctrl+Shift+B dans Chrome ça ouvre le gestionnaire de favoris ?

C'est un conflit avec les raccourcis par défaut de Chrome : Ctrl+Shift+B est le raccourci de Chrome pour afficher/masquer la barre de favoris, les raccourcis du navigateur ont une priorité plus élevée que les raccourcis JS de la page, c'est pourquoi il est intercepté par Chrome. Solutions : ① cliquez sur le bouton de formatage pour opérer ; ② si vous êtes utilisateur de Mac utilisez Cmd+Shift+B qui n'entre pas en conflit avec Chrome ; ③ vous pouvez modifier les raccourcis du navigateur dans les paramètres de Chrome ; ④ vous pouvez d'abord donner le focus à l'intérieur de l'éditeur, dans certains cas le focus de l'éditeur peut capturer le raccourci. Si d'autres navigateurs ont également des conflits de raccourcis, vous pouvez toujours opérer via les boutons.

Dépannage

Erreur d'« analyse syntaxique » lors du formatage, impossible de formater

Le code lui-même a des erreurs syntaxiques : parenthèses non correspondantes, chaînes non fermées, mots-clés manquants, virgules en trop, etc., les erreurs syntaxiques font échouer l'analyse AST, corrigez d'abord les erreurs syntaxiques Sélection incorrecte du mode de langage : par exemple du code JSX/TSX sélectionné comme JavaScript, la syntaxe des génériques est confondue avec des balises JSX ou vice versa, sélectionnez manuellement le bon type de langage Contient de la syntaxe expérimentale : le code utilise des propositions de syntaxe JavaScript trop récentes qui ne sont pas encore standard (comme les décorateurs, l'opérateur Pipeline), le parseur ne les prend pas en charge Le fichier a un BOM : les trois octets UTF-8 BOM (EF BB BF) au début, certains parseurs peuvent ne pas les traiter, essayez de sauvegarder en UTF-8 sans BOM Mélange du code d'autres langages : par exemple des langages de template intégrés dans du HTML (EJS, Handlebars, directives de template Vue) ne sont pas du JS/HTML pur, le parseur ne les reconnaît pas Commentaires de bloc non fermés dans le code : /* sans */ correspondant, le commentaire non fermé fait que tout le code suivant est traité comme un commentaire Ambiguïté d'expressions régulières : certains endroits qui ressemblent à des divisions/opérateurs sont en réalité des littéraux d'expression régulière, le parseur se trompe, vous pouvez ajouter un point-virgule avant l'expression régulière pour éliminer l'ambiguïté

Erreur lors de la compression (Minify), impossible de compresser

Erreur syntaxique du code : comme pour le formatage, la compression est aussi basée sur l'AST, le code doit être syntaxiquement correct pour être compressé, corrigez d'abord les erreurs syntaxiques Utilisation d'import/export d'ES Module mais le type de module n'est pas correctement marqué, ou la configuration de compression ne correspond pas au type de module Problèmes lors du mangle des noms de propriétés : si vous avez activé le mangle des propriétés (non activé par défaut), l'accès dynamique aux propriétés obj['key'] fera que les propriétés ne seront pas trouvées, n'activez pas le mangle des propriétés sans précaution Le code contient eval() ou l'instruction with : Terser peut échouer au mangle quand il rencontre eval/with, car eval peut accéder dynamiquement aux noms de variables dans la portée, évitez eval en code de production Erreur dans la configuration des noms réservés : si vous avez configuré mangle.reserved mais avec des erreurs de frappe ou des noms oubliés qui doivent être préservés (comme les bibliothèques globales jQuery, $, etc.), cela peut causer des erreurs à l'exécution Problème de configuration de compression toplevel : si votre code s'exécute dans la portée globale au lieu d'être empaqueté dans un IIFE/module, activer compress.toplevel: true peut casser les références aux variables globales Configuration de la version du navigateur cible trop ancienne : Terser peut utiliser une syntaxe non prise en charge par le navigateur cible lors de la compression, vous pouvez configurer la version ecma pour spécifier la version de syntaxe JS de sortie

Les caractères chinois/commentaires chinois s'affichent avec des caractères incorrects après formatage

L'encodage du fichier n'est pas UTF-8 : le fichier local chargé est dans un encodage chinois comme GBK/GB2312, l'outil analyse par défaut en UTF-8 causant des caractères incorrects, utilisez un éditeur pour sauvegarder à nouveau le fichier en encodage UTF-8 avant de le charger L'encodage de la page du navigateur a été modifié accidentellement : bien que les navigateurs modernes utilisent UTF-8 par défaut, certains navigateurs anciens ou des paramètres spéciaux peuvent avoir un encodage incorrect, vérifiez le paramétrage d'encodage de page dans le menu du navigateur et configurez-le en UTF-8 Le fichier a un BOM UTF-8 : bien que BOM ne cause normalement pas de caractères incorrects, certains parseurs traitent BOM de manière anormale, vous pouvez utiliser un éditeur pour supprimer BOM et sauvegarder en UTF-8 sans BOM Problème de conversion d'encodage lors du copier-coller : en copiant du code depuis d'anciens logiciels (comme l'ancien Bloc-notes, Word), des caractères spéciaux (comme les guillemets chinois, les espaces pleine chasse) peuvent être convertis erronément, essayez de copier depuis des éditeurs modernes comme VS Code Problème de police : certaines polices monospaces ont un mauvais support du chinois causant un affichage anormal, ce n'est pas un problème d'encodage, c'est juste un problème de police d'affichage, changez pour une police monospace qui prend en charge le chinois Caractères Unicode spéciaux : le code contient des emoji, espaces de largeur nulle, caractères de contrôle et autres caractères invisibles spéciaux qui peuvent causer un affichage anormal ou des erreurs de formatage, vous pouvez activer l'affichage des caractères invisibles dans l'éditeur pour vérifier Problème de compression gzip ou proxy : si des caractères incorrects apparaissent lors de l'accès après déploiement, vérifiez que le serveur configure correctement l'en-tête de réponse Content-Type: application/javascript; charset=utf-8

Le formatage de code JSX/TSX échoue ou il y a une erreur d'analyse

Le mode de langage sélectionné est JavaScript au lieu de JSX/TSX : le parseur JS standard ne reconnaît pas la syntaxe <tag>, il interprétera les balises JSX comme des opérateurs de comparaison et signalera une erreur, sélectionnez manuellement le langage JSX ou TSX Ambiguïté de syntaxe générique TSX : le paramètre générique <T> en TSX peut être confondu avec une balise JSX, comme const f = <T>(x: T) => x, vous pouvez ajouter une virgule après <T> comme <T,> pour éliminer l'ambiguïté (c'est l'écriture courante en TSX) Balises JSX non fermées : JSX requiert que toutes les balises soient correctement fermées, les balises auto-fermantes doivent avoir />, contrairement à HTML, <img> doit s'écrire <img/> Problème de parenthèses dans les expressions JS en JSX : les expressions JS dans {} doivent être correctement fermées, si {obj.prop} n'a pas } cela causera un désordre d'analyse ultérieur Problème de syntaxe courte de Fragment : la balise vide <></> nécessite le support de React 16+ et doit être correctement fermée ; si vous utilisez <Fragment> vous devez l'importer correctement Problème de guillemets dans les valeurs d'attributs JSX : les valeurs d'attributs JSX si ce sont des chaînes doivent utiliser des guillemets (doubles), si ce sont des expressions utilisent {}, ne mélangez pas L'extension du fichier TSX est .ts au lieu de .tsx : le parseur TypeScript n'active l'analyse JSX qu'avec l'extension .tsx, si vous utilisez l'extension .ts pour écrire du JSX il signalera une erreur, utilisez la bonne extension

L'indentation après formatage est incorrecte, ne correspond pas à ce qui est attendu

Configuration incorrecte de tabWidth : vérifiez si la configuration de largeur d'indentation est 2 ou 4, les équipes utilisent couramment 2 espaces, si vous attendez 4 espaces vous devez ajuster manuellement l'option tabWidth Configuration incorrecte de useTabs : si l'équipe utilise l'indentation Tab mais vous avez configuré des espaces ou vice versa, vérifiez si l'option useTabs est correcte Le code lui-même a des erreurs syntaxiques : des erreurs syntaxiques causent une structure AST anormale, l'indentation formatée sera désordonnée, corrigez d'abord les erreurs syntaxiques indiquées par les lignes ondulées rouges Mélange de Tab et d'espaces : le code d'origine a une indentation Tab à certains endroits et des espaces à d'autres, le formatage uniformisera au style configuré, mais si le désordre d'origine est trop grave cela peut nécessiter plusieurs formatages printWidth configuré trop petit : si la largeur de ligne est très petite (comme 40), le code sautera de ligne fréquemment donnant l'impression d'une indentation désordonnée, configurer 80 ou 100 est plus adapté Des options de formatage comme bracketSameLine/arrowParens ne correspondent pas aux attentes : la position des accolades, les parenthèses des fonctions fléchées et autres styles sont déterminés par la configuration, ce n'est pas un problème d'indentation, ajustez les options correspondantes Conflit entre EditorConfig et la configuration de l'éditeur local : si votre éditeur local utilise .editorconfig pour configurer l'indentation automatiquement, cela diffère des options configurées sur le web, les résultats de formatage des deux côtés seront incohérents, uniformisez la configuration

Les raccourcis clavier ne fonctionnent pas, rien ne se passe quand on les presse

Le focus n'est pas sur l'éditeur : les raccourcis ne fonctionnent que quand l'éditeur a le focus, si le focus est sur des boutons, champs de saisie ou d'autres parties de la page les raccourcis ne se déclenchent pas, cliquez d'abord sur la zone de l'éditeur pour lui donner le focus Conflit avec les raccourcis du navigateur : certains raccourcis (comme Ctrl+Shift+B dans Chrome ouvre la barre de favoris, Ctrl+Shift+O dans Firefox ouvre l'historique) sont occupés par le navigateur, vous pouvez cliquer sur les boutons pour opérer, ou utiliser Cmd au lieu de Ctrl (Mac) pour essayer Problème de méthode de saisie : avec une méthode de saisie chinoise certains raccourcis peuvent être interceptés, passez en méthode de saisie anglaise et essayez les raccourcis D'autres extensions/plugins occupent les raccourcis : des extensions de raccourcis installées dans le navigateur, scripts Tampermonkey, plugins proxy peuvent occuper des raccourcis, essayez d'ouvrir la page en mode navigation privée Conflit avec les raccourcis système : le système d'exploitation ou d'autres logiciels en cours d'exécution (comme les logiciels de capture, méthodes de saisie, IDE) ont des raccourcis globaux qui occupent cette combinaison de touches, vous pouvez modifier les raccourcis d'autres logiciels ou utiliser les boutons de cet outil Différences de clavier Mac/Windows : notez que Mac utilise la touche Cmd (⌘), Windows/Linux utilisent la touche Ctrl, ne les mélangez pas ; Option sur Mac correspond à Alt sur Windows Restrictions de sécurité du navigateur : certains raccourcis liés à l'accès aux fichiers peuvent être limités par les politiques de sécurité du navigateur, ils ne peuvent pas être complètement simulés par JS, si nécessaire cliquez directement sur le bouton correspondant

Glossaire

Prettier: L'outil de formatage de code frontend le plus populaire actuellement, adopte une philosophie de design Opinionated, prend en charge plusieurs langages comme JS/TS/CSS/HTML/Markdown, uniformise obligatoirement le style de code et met fin aux discussions de style en équipe.
Terser: Outil moderne de compression JavaScript, c'est le fork compatible ES6+ d'UglifyJS, prend en charge la compression et l'obfuscation de syntaxe ES6+, c'est le compresseur par défaut des outils de build modernes comme Webpack, Rollup, Vite.
UglifyJS: Outil classique de compression JavaScript, prédécesseur de Terser, mais il ne prend en charge que la syntaxe ES5 et antérieure, ne prend pas en charge les nouvelles fonctionnalités ES6+, actuellement dans les nouveaux projets on utilise généralement Terser à la place.
AST (Abstract Syntax Tree): Arbre Syntaxique Abstrait, représentation sous forme d'arbre de la structure syntaxique du code source, chaque nœud représente une structure syntaxique dans le code. Babel, Prettier, Terser, ESLint et d'autres outils sont implémentés en se basant sur l'AST.
ESLint: L'outil de linting le plus populaire dans l'écosystème JavaScript/TypeScript, utilisé pour trouver les problèmes de qualité du code et uniformiser le style de code, peut être utilisé conjointement avec Prettier.
EditorConfig: Fichier de configuration multiplateforme pour uniformiser le style de code entre éditeurs, définit des configurations de base comme le style d'indentation, la taille d'indentation, les sauts de ligne, l'encodage, pour que différents éditeurs ouvrent le même projet avec un comportement cohérent.
CodeMirror: Composant d'éditeur de code dans le navigateur, fournit des fonctionnalités d'édition professionnelles comme la coloration syntaxique, les numéros de ligne, la correspondance des parenthèses, le pliage de code, les curseurs multiples, c'est l'un des choix principaux pour les éditeurs de code web.
minify (compression): Processus de minimisation de la taille du code sans modifier sa logique, via la suppression des espaces blancs, des commentaires, le raccourcissement des noms de variables, des optimisations de code, etc., utilisé en production pour améliorer la vitesse de chargement.
mangle (obfuscation): Étape pendant la compression qui raccourcit les noms de variables, fonctions et paramètres en caractères individuels, réduit considérablement la taille du code et le rend plus difficile à lire, aussi appelée obfuscation des noms de variables.
beautify (embellissement): C'est-à-dire formatage de code, réorganise le code compressé ou désorganisé avec indentation, sauts de ligne et espaces pour améliorer la lisibilité, à l'opposé de minify.
trailing comma (virgule finale): Virgule après le dernier élément dans les objets, tableaux et paramètres de fonction, facilite des diffs Git plus propres lors de l'ajout d'éléments, pris en charge dans les environnements ES5+.
arrow parens (parenthèses des fonctions fléchées): Si les paramètres des fonctions fléchées à un seul paramètre doivent être enveloppés dans des parenthèses, comme x => x (sans parenthèses) vs (x) => x (avec parenthèses).
printWidth (largeur de ligne): Nombre de caractères par ligne au-delà duquel il y a un saut de ligne automatique lors du formatage, Prettier par défaut 80 caractères, les équipes peuvent ajuster à 100 ou 120 selon la taille de l'écran.
semicolons (point-virgule): Si on ajoute un point-virgule à la fin des instructions JavaScript, JS a un mécanisme d'insertion automatique ASI, mais dans la plupart des scénarios il est toujours recommandé d'utiliser des points-virgules pour éviter les surprises.
single quote (guillemets simples): Si on utilise des guillemets simples ou doubles pour les chaînes, en JS ils sont fonctionnellement équivalents c'est juste une préférence de style, la spécification JSON impose les guillemets doubles.
double quote (guillemets doubles): Utiliser des guillemets doubles pour envelopper les chaînes, c'est le style par défaut de nombreux langages et aussi le format de chaîne requis par la spécification JSON.
tab width (largeur d'indentation): Nombre d'espaces par niveau d'indentation, la communauté frontend utilise couramment 2 espaces, les langages backend 4 espaces.
BOM (Byte Order Mark): Marque d'ordre d'octet, trois octets EF BB BF qui peuvent apparaître au début de fichiers encodés en UTF-8, utilisés pour marquer l'encodage, dans certains scénarios ils peuvent causer des erreurs d'analyse JS.
UTF-8: Format de transformation Unicode 8 bits, actuellement l'encodage de fichier standard pour le Web et les projets frontend, prend en charge tous les caractères Unicode, c'est l'encodage recommandé par défaut.
source map (carte de sources): Fichier qui mappe le code compressé/transpilé de retour aux positions originales du code source, utilisé pour le débogage en production, quand le code compressé signale des erreurs il permet de localiser le numéro de ligne dans le source.

Tableau de référence des options core de Prettier

Nom de l'option	Rôle	Valeurs disponibles	Valeur par défaut	Description
`tabWidth`	Largeur d'indentation (nombre d'espaces)	`2, 4, 8`	`2`	Prend effet quand useTabs est false, frontend utilise couramment 2 espaces
`useTabs`	Utiliser des tabulations Tab pour indenter	`true/false`	`false`	true utilise Tab, false utilise des espaces
`printWidth`	Limite de largeur de ligne (caractères)	`80, 100, 120`	`80`	Saut de ligne automatique au-delà de la largeur, pas une limite stricte
`semi`	Ajouter un point-virgule à la fin des instructions	`true/false`	`true`	false n'ajoute de point-virgule que là où ASI peut échouer
`singleQuote`	Utiliser des guillemets simples	`true/false`	`false`	true guillemets simples, false guillemets doubles, attributs JSX toujours doubles
`trailingComma`	Mode de virgule finale	`none, es5, all`	`all (v3+)`	none sans virgule finale, es5 ajoute dans objets/tableaux, all aussi dans paramètres de fonction
`arrowParens`	Parenthèses pour paramètre unique de fonctions fléchées	`avoid, always`	`always (v2+)`	avoid omet les parenthèses pour un seul paramètre, always toujours avec parenthèses
`bracketSpacing`	Espaces dans les accolades d'objets	`true/false`	`true`	true: { a: 1 }, false: {a: 1}
`bracketSameLine`	Position de la parenthèse fermante HTML/JSX	`true/false`	`false`	true parenthèse fermante en fin de dernière ligne, false sur une ligne séparée
`vueIndentScriptAndStyle`	Indentation de script/style dans les fichiers Vue	`true/false`	`false`	Si indenter le code dans les balises script et style des Vue SFC

Exemple comparatif avant et après compression de code JavaScript

Optimisation	Code formaté (version développement)	Code compressé (version production)	Pourcentage de réduction
Espaces et sauts de ligne	`function add(a, b) { return a + b; }`	`function add(n,d){return n+d}`	~60%
Suppression des commentaires	`// Calcule la somme de deux nombres function add(a,b){return a+b}`	`function add(n,d){return n+d}`	~20%
Mangle des variables locales	`function calculateTotal(price, quantity){const tax=0.1;return pricequantity(1+tax)}`	`function n(n,t){const e=0.1;return nt(1+e)}`	~40%
Pliage de constantes	`const x = 2 * 3 + 4; console.log(x);`	`console.log(10);`	~50%
Simplification booléenne	`if (x === true) { doThing(); }`	`if(x)doThing();`	~30%
Exemple complet (plusieurs optimisations)	`function getFullName(user) { const firstName = user.firstName; const lastName = user.lastName; return firstName + ' ' + lastName; }`	`function n(n){return n.firstName+' '+n.lastName}`	~70%

Tableau rapide des raccourcis clavier

Raccourci (Win/Linux)	Raccourci (Mac)	Description de la fonction	Fréquence d'utilisation
`Ctrl+Shift+B`	`Cmd+Shift+B`	Exécuter formatage/embellissement	★★★★★
`Ctrl+Shift+M`	`Cmd+Shift+M`	Basculer mode formatage/compression	★★★★
`Ctrl+Shift+O`	`Cmd+Shift+O`	Ouvrir un fichier local	★★★★
`Ctrl+Shift+D`	`Cmd+Shift+D`	Télécharger le fichier traité	★★★★★
`Ctrl+Shift+K`	`Cmd+Shift+K`	Effacer le contenu de l'éditeur	★★★
`Ctrl+S`	`Cmd+S`	Télécharger (sauvegarder) le fichier	★★★★
`Ctrl+F / Ctrl+H`	`Cmd+F / Cmd+H`	Rechercher / Rechercher et remplacer	★★★★
`Ctrl+Z / Ctrl+Y`	`Cmd+Z / Cmd+Shift+Z`	Annuler / Rétablir	★★★★★
`Ctrl+/`	`Cmd+/`	Basculer le commentaire de ligne	★★★
`Tab / Shift+Tab`	`Tab / Shift+Tab`	Augmenter l'indentation / Diminuer l'indentation (avec sélection)	★★★★
`Alt+clic`	`Option+clic`	Ajouter plusieurs curseurs	★★★
`Ctrl+D`	`Cmd+D`	Sélectionner le mot suivant identique	★★★
`Home / End`	`Cmd+← / Cmd+→`	Début / Fin de ligne	★★★★
`Ctrl+Home/End`	`Cmd+↑ / Cmd+↓`	Début / Fin du fichier	★★★