JavaScript Formatteren

Uploaden

0 tekens

Browser-gebaseerde JavaScript/TypeScript/JSX/TSX/CSS/HTML/JSON codeformatteringstool met Prettier-stijl fijnafstemming, Terser-compressie en obfuscatie, ingebouwde CodeMirror-editor, realtime preview, sneltoetsen en bestandsupload/download.

Gerelateerde aanbevelingen

JavaScript Minifier

CSS Formatter

JSX Formatteerder

QR Code & Streepjescode Generator

cURL naar Code Converter

JS Obfuscator

Toepassingsgevallen

Plakken van gecomprimeerde JS-code van derden tijdens frontend-ontwikkeling om de opmaak snel te verfraaien voor leesbaarheid en debugging
Uniformeren van JavaScript/TypeScript-codeformattering vóór teamcode reviews, waardoor stijlverschillen in inspringing, aanhalingstekens en puntkomma's worden geëlimineerd en je je kunt richten op logische review
Snel formatteren van chaotisch opgemaakte oude JS-code bij het overnemen van legacy-projecten, om snel de codestructuur en logische hiërarchie te begrijpen
Gebruik Terser-compressie om JavaScript-code te obfusceren vóór productie-implementatie, waardoor bestandsgrootte wordt verkleind en paginalading wordt versneld
Realtime formatteren tijdens het online schrijven van JS/JSX-demo's, houdt de code netjes voor delen met collega's of de community
Leer de effecten van verschillende Prettier-configuratieopties door direct het formatteringsresultaat te bekijken tijdens het aanpassen van opties, en begrijp de werking van parameters zoals tabWidth, trailingComma en andere
Verwerken van codefragmenten gekopieerd van platforms zoals Stack Overflow, GitHub, automatisch herstellen van inspring- en afbreekproblemen
Automatisch formatteren van inspringing en afbreking bij het schrijven van JSON-configuratiebestanden, om parseerfouten door komma's of haakjes te voorkomen
Alles-in-één formattering van JS+CSS+HTML-code in hetzelfde project tijdens CSS/HTML-pagina-ontwikkeling, voor een consistente stijl
Snel op orde brengen van JS-code voor algoritmevragen vóór sollicitatiegesprekken, verbeter de code-uitstraling door standaardopmaak

Hoe te gebruiken

Open de JavaScript-formatteringstoolpagina, plak code direct in het linkergedeelte of klik op de uploadknop om een lokaal bestand te kiezen (ondersteunde formaten .js/.ts/.jsx/.tsx/.css/.html/.json)
Selecteer het juiste taaltype: de tool herkent meestal automatisch, maar als de herkenning onnauwkeurig is, kies handmatig JavaScript/TypeScript/JSX/TSX/CSS/HTML/JSON in de taalkeuzelijst
Configureer formatteringsopties: je kunt een snelle stijlpreset kiezen (default/modern/classic) of handmatig Prettier-opties aanpassen (inspringbreedte, tabs/spaties, regellengte, puntkomma's, aanhalingstekens, eindkomma's, pijlfunctiehaakjes)
Als je code wilt comprimeren, schakel over naar compressiemodus en configureer Terser-compressieopties (of compress moet worden ingeschakeld, of variabelenamen moeten worden gemangle, of top-level variabelen moeten worden gecomprimeerd), CSS-optimalisatieniveau en HTML-compressieopties
De tool verwerkt code in realtime, het rechter bewerkingsgebied toont direct het geformatteerde of gecomprimeerde resultaat, en de statusbalk onderaan toont realtime statistieken van tekensaantal, bytes en compressieratio
Gebruik sneltoetsen voor meer efficiëntie: Ctrl+Shift+B activeert formattering, Ctrl+Shift+M schakelt compressiemodus, Ctrl+Shift+O opent bestand, Ctrl+Shift+D downloadt resultaat, Ctrl+Shift+K wist editor
Klik na tevredenheid op de kopieerknop om het resultaat naar het klembord te kopiëren, of op de downloadknop om op te slaan als lokaal bestand; je kunt ook op de deelknop klikken om een URL-link met code en configuratie te genereren om met anderen te delen

Functies

Meertalige ondersteuning: gelijktijdige formattering van 7 veelgebruikte frontend-talen — JavaScript, TypeScript, JSX, TSX, CSS, HTML, JSON — alles-in-één verwerking van frontend-code
Prettier-stijl fijnafstemming: volledige opties waaronder tabWidth inspringbreedte (2/4/8 spaties), useTabs tabs vs spaties, printWidth regellengte, semi puntkomma's, singleQuote enkele vs dubbele aanhalingstekens, trailingComma eindkomma's, arrowParens pijlfunctiehaakjes en meer
Codecompressiefunctie: geïntegreerde Terser-compressie-engine met productie-compressieopties — compress (codecompressie), mangle (vervorming van variabelenamen), toplevel (compressie van top-level variabelen)
CSS-specifieke optimalisatie: biedt CSS-optimalisatieniveau-configuratie met ondersteuning voor CSS-compressie, commentaarverwijdering en witruimteverwijdering
HTML-compressieopties: ondersteunt HTML minify-configuratie met witruimte-invouwing, commentaarverwijdering en verwijdering van attribuut-aanhalingstekens
Realtime verwerking: realtime formattering en preview na het plakken van code — opmaakresultaten direct zichtbaar zonder op knoppen te klikken
CodeMirror-editor: professionele CodeMirror-editor met syntax highlighting, regelnummers, haakjeskoppeling, codeinvouwing en andere professionele bewerkingsfuncties
Bestandsupload en -download: ondersteunt direct uploaden van lokale .js/.ts/.jsx/.tsx/.css/.html/.json-bestanden en downloaden van verwerkte bestanden met één klik
Deellinks: code en configuratie opslaan in URL-hash, deellinks genereren om naar collega's te sturen en de formatteringssituatie te reproduceren
Geschiedenis: automatisch formatteringsgeschiedenis opslaan in localStorage, zodat je altijd kunt terugkeren naar eerdere codeversies en configuraties
Sneltoetsen: ondersteunt sneltoetsen zoals Ctrl+Shift+B voor formatteren, Ctrl+Shift+M voor compressie, Ctrl+Shift+O voor bestand openen, Ctrl+Shift+D voor downloaden, Ctrl+Shift+K voor wissen en meer
Snelle presets: 3 snelle configuratiepresets — default (standaard), modern (modern), classic (klassiek) — schakel tussen populaire stijlen met één klik
Tekentelling: toont realtime het aantal tekens, bytes en compressieratievergelijking voor originele en verwerkte code
Voorbeeldcode: ingebouwde voorbeeldcode voor verschillende talen, aanklikbaar om te laden en snel functies uit te proberen

Veelgestelde vragen

Zal de logica van JavaScript-code veranderen na formattering?

Nee. Formattering past alleen zaken aan die met "opmaak" te maken hebben — witruimte, inspringing, afbreking, haakjesposities, aanhalingstekenstijl — en is gebaseerd op AST-transformatie. De AST-structuur van code vóór en na formattering is volledig identiek, en de uitvoeringslogica is 100% hetzelfde. Zolang de code syntactisch correct is en correct kan worden geparseerd, verandert formattering geen enkel uitvoeringsgedrag en kun je het met vertrouwen gebruiken. Hoewel compressie (mangle) ook de logica niet verandert, moet je wel letten op speciale scenario's zoals eval en exports van globale variabelen om onjuiste configuratie te voorkomen.

Wat te doen als formatteringsresultaten in de tool verschillen van lokale VS Code/Prettier-formattering?

De formatteringslogica van deze tool probeert overeen te komen met het officiële Prettier-gedrag. Als resultaten verschillen, controleer de configuratieopties: of deze kernopties — tabWidth, useTabs, semi, singleQuote, trailingComma, arrowParens — aan beide zijden volledig identiek zijn. Let bovendien op Prettier-versieverschillen — standaardconfiguraties van Prettier 2/3 hebben subtiele verschillen (v3 standaard trailingComma: all, v2 standaard es5; vanaf v2 arrowParens standaard always). Als je lokale project een .prettierrc-configuratiebestand heeft, pas de opties op de website daarmee overeen en de formatteringsresultaten zullen hetzelfde zijn.

Kan gecomprimeerde code worden hersteld? Kunnen variabelenamen na mangle worden hersteld?

Geformatteerde code is volledig omkeerbaar — omdat alleen de opmaak is veranderd, blijven alle identifiers en logica volledig behouden, en opnieuw formatteren herstelt ze. Maar voor gecomprimeerde code: alleen het deel met verwijderde witruimte en commentaren kan opnieuw worden geformatteerd om de lay-out te herstellen, maar mangle (variabelenaamobfuscatie) is onomkeerbaar — oorspronkelijke betekenisvolle variabelenamen zoals userName worden a, en dit proces is eenrichtingsverkeer, het kan niet automatisch de originele namen herstellen. Als je gecomprimeerde code in productieomgevingen moet debuggen, configureer je het genereren van Source Map-bestanden om via Source Map terug te koppelen naar broncodeposities. Bewaar daarom vóór compressie altijd de originele, niet-gecomprimeerde broncode!

Welke browsers worden ondersteund? Kan het op een telefoon worden gebruikt?

Deze tool ondersteunt alle moderne browsers: de nieuwste versies van Chrome, Firefox, Safari, Edge werken correct. De IE-browser wordt niet ondersteund (momenteel gebruikt niemand IE meer voor ontwikkeling). De responsieve lay-out is aangepast aan telefoonschermen, maar codebewerking op kleine schermen is geen optimale ervaring — het wordt aanbevolen om het in een desktopbrowser te gebruiken, een groot scherm biedt hogere efficiëntie. Alle formatterings- en compressieberekeningen draaien lokaal in de browser, code wordt naar geen enkele server verzonden, code verlaat je browser niet, wat het veilig en betrouwbaar maakt.

Waarom kan sommige code niet worden geformatteerd en verschijnt er een parserfout?

De formatteringstool moet eerst code naar AST parseren om te werken. Als code syntaxisfouten bevat (niet-overeenkomende haakjes, niet-gesloten strings, verkeerd gespelde sleutelwoorden, overbodige komma's, etc.), kan de parser de codestructuur niet begrijpen en rapporteert een fout. Controleer eerst syntaxisfouten in de code zelf: kijk of er foutberichten in de console zijn, of de editor rode golvende lijnen heeft die foutlocaties aangeven — na het herstellen van syntaxisfouten zal formattering correct werken. Controleer bovendien of de juiste taalmodus is geselecteerd, JSX/TSX-code moet niet als gewone JS zijn ingesteld.

Wordt mijn code naar de server geüpload? Is code veilig?

Nee. Alle formattering, compressie en syntax highlighting draaien lokaal in je browser via JavaScript, code wordt naar geen enkele server verzonden en wordt volledig op je apparaat verwerkt. Je kunt dit testen door het netwerk los te koppelen: na het loskoppelen van het netwerk werkt de tool nog steeds correct. De deellinkfunctie codeert code en configuratie in de URL-hash, het klikken op delen genereert alleen een URL, code wordt niet geüpload — maar als je de link naar iemand stuurt die hem opent, kan die persoon je code zien, dus deel geen links met gevoelige code.

Kunnen Vue single-file componenten (.vue-bestanden) worden geformatteerd? En Svelte?

Momenteel omvat de meertalige ondersteuning van deze tool JS/TS/JSX/TSX/CSS/HTML/JSON. Vue single-file componenten (SFC) met <template>/<script>/<style> en Svelte-componenten worden momenteel niet ondersteund voor directe algemene formattering, maar je kunt het script-gedeelte (JS/TS), style-gedeelte (CSS) en template-gedeelte (HTML) afzonderlijk kopiëren en de corresponderende taal selecteren om afzonderlijk te formatteren. In de toekomst wordt overwogen om Vue/Svelte SFC-formatteringsondersteuning toe te voegen.

Hoe stel ik een uniforme formatteringsconventie in het team in?

Een uniforme teamconventie beveelt drielaagse samenwerking aan: ① plaats .editorconfig in de hoofdmap van het project om basiseditorinstellingen te uniformeren (inspringing, nieuweregels, codering); ② gebruik Prettier en plaats een .prettierrc-configuratiebestand in het project, laat iedereen en CI deze configuratie gebruiken voor formattering, deze tool kan ook overeenkomstige opties selecteren om de configuratie aan te passen; ③ gebruik ESLint + eslint-config-prettier om ESLint-stijlregels uit te schakelen en alleen codekwaliteit te controleren. Configureer de editor op automatisch formatteren bij opslaan (VS Code — installeer de Prettier-extensie, stel editor.formatOnSave: true in), voeg een lint-stap toe in CI om formaat te controleren en zorg ervoor dat gecommitte code aan de conventie voldoet.

Wat zijn de voordelen van eindkomma's (trailingComma)? Moet ik ze inschakelen?

Het wordt sterk aanbevolen om eindkomma's in te schakelen (minimaal es5-niveau, all-niveau aanbevolen). Voordelen van eindkomma's: ① schonere Git diff: bij het toevoegen van een laatste element hoef je de vorige regel niet te wijzigen om een komma toe te voegen — alleen de diff van de nieuwe regel, zonder de diff van de vorige regel te vervuilen door een komma toe te voegen; ② handiger bij het herschikken van elementvolgorde, geen gedoe met eindkomma-problemen; ③ moderne browsers en Node.js ondersteunen eindkomma's volledig, oude IE ondersteunt dit niet maar we hoeven tegenwoordig geen rekening te houden met IE. Het enige nadeel is een extra komma, maar dit is het absoluut waard in vergelijking met het gemak dat het biedt. Prettier v3 staat standaard op all.

Moet ik mangle inschakelen tijdens compressie? Wat is het verschil tussen compress en mangle?

Voor productiecompressie wordt aanbevolen om zowel compress als mangle in te schakelen — dit zijn onafhankelijke compressieopties: compress is codeoptimalisatie (constante vouwing, verwijderen van dode code, expressievereenvoudiging, etc.), die de codestructuur alleen wijzigt wanneer dit kan vereenvoudigen, zonder variabelenamen te wijzigen; mangle is het verkorten van lokale variabelenamen, het veranderen van lange variabelenamen in enkele tekens — dit is een van de grootste bronnen van groottevermindering. Zolang je code niet bedoeld is als bibliotheek waarvan variabelenamen extern worden aangeroepen, of als je geen eval gebruikt om dynamisch variabelenamen te benaderen, is mangle veilig en kan het de grootte aanzienlijk verkleinen. Als het een open-sourcebibliotheek is waarvan API-namen moeten worden behouden, configureer mangle.reserved om geëxporteerde namen te behouden.

Waarom worden sommige tekens automatisch ge-escaped bij het formatteren van JSON?

De JSON-specificatie heeft strikte syntaxisvereisten: strings moeten in dubbele aanhalingstekens staan, er mogen geen eindkomma's zijn, speciale tekens moeten worden ge-escaped (nieuwe regel → \n, aanhalingsteken → \", backslash → \\, Tab → \t, etc.). Als je JSON-string niet-ge-escapete speciale tekens bevat, worden deze tijdens formattering automatisch ge-escaped volgens de JSON-specificatie, wat correct gedrag is. Let op: JSON is geen JavaScript, in JSON kun je geen commentaren schrijven, geen enkele aanhalingstekens gebruiken, geen undefined hebben — al deze dingen zullen het JSON-parseren doen falen.

Hoe zorg ik ervoor dat parameters van pijlfuncties altijd haakjes hebben? Of juist geen haakjes?

Pas de optie arrowParens aan: always betekent altijd haakjes toevoegen ((x) => x), dit is de standaard van Prettier v2+, met als voordeel dat je geen haakjes hoeft toe te voegen/verwijderen bij het toevoegen/verwijderen van parameters, wat schonere diffs oplevert; avoid betekent haakjes weglaten bij één parameter (x => x), code is beknopter. Kies volgens de teamstijl — beide stijlen zijn niet goed of fout, zorg alleen voor uniformiteit. Let op: parametertypeannotaties, standaardparameters en destructureringsparameters hebben altijd haakjes, ongeacht de configuratie.

Kan formattering automatisch stijlproblemen herstellen die door ESLint worden gerapporteerd?

Deze tool is Prettier-stijlformattering en kan alleen stijlproblemen herstellen die door Prettier worden afgehandeld (inspringing, aanhalingstekens, puntkomma's, eindkomma's, regellengte, spaties, etc.). Codekwaliteitsproblemen die door ESLint worden gerapporteerd (bijv. ongebruikte variabelen, ontbrekende return, ===-problemen) zijn logische problemen, die de formatteringstool niet automatisch kan herstellen — handmatige wijziging is vereist. Als je ESLint is geconfigureerd met eslint-config-prettier, zal ESLint na Prettier-formattering geen stijlgerelateerde fouten meer melden, en de resterende kwaliteitsproblemen hoef je alleen handmatig te herstellen.

Wat is de maximale ondersteunde codebestandsgrootte? Zal het formatteren van grote bestanden vastlopen?

Omdat formattering lokaal in de browser draait, hangt de ondersteunde bestandsgrootte af van de prestaties van je apparaat — meestal kunnen JS-bestanden van enkele tientallen KB tot enkele MB normaal worden verwerkt, wat meer dan voldoende is voor afzonderlijke JS-bestanden in gewone projecten. Als het een bijzonder groot gebundeld JS-bestand is (enkele tientallen MB), kan er vertraging of zelfs geheugengebrek optreden — zulke zeer grote bestanden worden aanbevolen lokaal te verwerken via Node.js+Prettier/Terser vanaf de opdrachtregel. De grootte van afzonderlijke bronbestanden bij dagelijkse ontwikkeling valt meestal binnen het ondersteunde bereik.

Waarom opent de sneltoets Ctrl+Shift+B in Chrome de bladwijzerbeheerder?

Dit is een standaard sneltoetsconflict in de Chrome-browser: Ctrl+Shift+B is de Chrome-sneltoets voor het tonen/verbergen van de bladwijzerbalk, en browsersneltoetsen hebben hogere prioriteit dan JS-sneltoetsen van webpagina's, waardoor ze door Chrome worden onderschept. Oplossing: ① gebruik de formatteringsknop; ② als je een Mac-gebruiker bent, heeft Cmd+Shift+B geen conflict met Chrome; ③ je kunt browsersneltoetsen wijzigen in Chrome-instellingen; ④ je kunt eerst de editor focus geven, in sommige gevallen kan editorfocus de sneltoets onderscheppen. Als er in andere browsers ook sneltoetsconflicten zijn, kun je altijd met knoppen werken.

Probleemoplossing

Syntaxparseerfout tijdens formattering, kan niet formatteren

Syntaxfouten in de code zelf: niet-overeenkomende haakjes, niet-gesloten strings, ontbrekende sleutelwoorden, overbodige komma's, etc. Syntaxfouten veroorzaken het falen van AST-parsing en maken formattering onmogelijk — herstel eerst syntaxisfouten Verkeerd geselecteerde taalmodus: bijvoorbeeld JSX/TSX-code geselecteerd als JavaScript, generieke syntaxis verkeerd herkend als JSX-tags of andersom — kies handmatig het juiste taaltype Bevat experimentele syntaxis: code gebruikt te nieuwe JavaScript-syntaxisvoorstellen die nog geen standaard zijn geworden (bijv. decorators, Pipeline-operator) die de parser niet ondersteunt Bestand heeft BOM-header: drie bytes UTF-8 BOM (EF BB BF) aan het begin, sommige parsers kunnen dit mogelijk niet verwerken — probeer op te slaan als UTF-8 zonder BOM Code vermengd met andere taalcode: bijvoorbeeld sjabloontalen ingebed in HTML (EJS, Handlebars, Vue-sjabloonrichtlijnen) zijn geen pure JS/HTML en worden door de parser niet herkend Code bevat niet-afgesloten blokcommentaren: /* zonder bijbehorende */, een niet-gesloten commentaar zorgt ervoor dat alle verdere code als commentaar wordt behandeld Dubbelzinnigheid van reguliere expressies: sommige plaatsen die eruitzien als deling/operator zijn in werkelijkheid regex-literalen, die verkeerd door de parser worden herkend — voeg een puntkomma toe vóór de regex om dubbelzinnigheid te verwijderen

Fout tijdens compressie (Minify), kan niet comprimeren

Code-syntaxisfouten: net als formattering is compressie ook gebaseerd op AST, code moet syntactisch correct zijn om te kunnen worden gecomprimeerd — herstel eerst syntaxisfouten ES Module import/export gebruikt zonder correcte markering van moduletype, of compressieconfiguratie komt niet overeen met moduletype Probleem bij mangle van eigenschapsnamen: als mangle van eigenschapsnamen is ingeschakeld (standaard uitgeschakeld), zal dynamische eigenschapstoegang obj['key'] ervoor zorgen dat de eigenschap niet wordt gevonden — schakel property mangle niet onnodig in Code bevat eval() of with-instructie: Terser kan mangle verkeerd verwerken bij het tegenkomen van eval/with, omdat eval dynamisch toegang heeft tot scopevariabelenamen — vermijd eval in productiecode Fout in configuratie van gereserveerde namen: als mangle.reserved is geconfigureerd maar met spelfouten of ontbrekende namen die moeten worden behouden (bijv. jQuery, $ en andere globale bibliotheken), kan dit uitvoeringsfouten veroorzaken Probleem met toplevel-compressieconfiguratie: als code in de globale scope draait in plaats van verpakt in een IIFE/module, kan het inschakelen van compress.toplevel: true verwijzingen naar globale variabelen breken Te oude versie van de doelbrowser: Terser kan tijdens compressie syntaxis gebruiken die niet door de doelbrowser wordt ondersteund — je kunt de ecma-versie configureren om de JS-syntaxisversie van de uitvoer te specificeren

Chinese tekens/Chinese commentaren worden weergegeven als onleesbare tekens na formattering

Bestandscodering is niet UTF-8: geüploade lokale bestand heeft Chinese codering zoals GBK/GB2312, de tool parseert standaard als UTF-8 wat onleesbare tekens veroorzaakt — converteer het bestand naar UTF-8-codering in de editor vóór upload Pagina-codering van de browser is per ongeluk gewijzigd: hoewel huidige browsers standaard UTF-8 gebruiken, kunnen sommige oude browsers of speciale instellingen onjuiste codering hebben — controleer in het browsermenu of de paginacodering is ingesteld op UTF-8 Bestand heeft UTF-8 BOM-header: hoewel BOM meestal geen onleesbare tekens veroorzaakt, verwerken sommige parsers BOM onjuist — gebruik een editor om BOM te verwijderen en op te slaan als UTF-8 zonder BOM Coderingconversieprobleem bij kopiëren en plakken: bij het kopiëren van code uit sommige oude programma's (zoals oude Kladblok, Word) kunnen speciale tekens (zoals Chinese aanhalingstekens, full-width spaties) verkeerd worden geconverteerd — probeer te kopiëren vanuit moderne editors zoals VS Code Lettertypeprobleem: sommige niet-proportionele lettertypen hebben slechte ondersteuning voor Chinese tekens, waardoor onjuiste weergave wordt veroorzaakt — dit is geen coderingsprobleem, alleen een lettertypeprobleem, verander naar een niet-proportioneel lettertype dat Chinees ondersteunt Speciale Unicode-tekens: code bevat emoji, zero-width spaties, besturingstekens en andere speciale onzichtbare tekens die onjuiste weergave of formatteringsfouten kunnen veroorzaken — schakel weergave van onzichtbare tekens in de editor in om dit te controleren gzip-compressie- of proxyprobleem: als onleesbare tekens optreden na implementatie, controleer of de server de Content-Type: application/javascript; charset=utf-8 antwoordheader correct instelt

Formattering van JSX/TSX-code mislukt of parserfout

Taalmodus geselecteerd als JavaScript in plaats van JSX/TSX: gewone JS-parser herkent de <tag>-syntaxis niet en zal JSX-tags verkeerd interpreteren als vergelijkingsoperatoren, wat fouten veroorzaakt — kies handmatig JSX of TSX als taal Dubbelzinnigheid van TSX-generieke syntaxis: generieke parameter <T> in TSX kan verkeerd worden herkend als JSX-tag, bijvoorbeeld const f = <T>(x: T) => x — voeg een komma toe na <T> in de vorm <T,> om dubbelzinnigheid te verwijderen (dit is een gangbaar gebruik in TSX) JSX-tags niet gesloten: JSX vereist dat alle tags correct worden gesloten, zelfsluitende tags moeten /> hebben, in tegenstelling tot HTML — <img> moet worden geschreven als <img/> Probleem met haakjes van JS-expressies in JSX: JS-expressies in {} moeten correct worden gesloten, {obj.prop} zonder afsluitende } zal verdere parsering verstoren Probleem met verkorte Fragment-syntaxis: lege tags <></> vereisen React 16+-ondersteuning en moeten correct worden gesloten; als je <Fragment> gebruikt, is correcte import vereist Probleem met aanhalingstekens van JSX-attribuutwaarden: als een JSX-attribuutwaarde een string is, moet deze in (dubbele) aanhalingstekens staan, als het een expressie is in {}, meng deze niet TSX-bestandsextensie is .ts in plaats van .tsx: de TypeScript-parser schakelt JSX-parsing alleen in voor de .tsx-extensie, het schrijven van JSX in een .ts-bestand zal fouten veroorzaken — gebruik de juiste extensie

Inspringing na formattering is onjuist, komt niet overeen met verwachting

Onjuiste tabWidth-configuratie: controleer of de inspringbreedte is ingesteld op 2 of 4 — teams gebruiken vaak 2 spaties, als je 4 spaties verwacht, moet je de optie tabWidth handmatig aanpassen Onjuiste useTabs-configuratie: als het team tabs gebruikt voor inspringing en je hebt spaties geconfigureerd of andersom, controleer of de optie useTabs correct is Syntaxfouten in de code zelf: syntaxfouten veroorzaken een onjuiste AST-structuur en inspringing na formattering is chaotisch — herstel eerst syntaxisfouten die door rode golvende lijnen worden aangegeven Tabs en spaties door elkaar gebruikt: in de originele code hebben sommige plaatsen tabs en andere spaties — formattering zal de stijl uniformeren naar de geconfigureerde stijl, maar als de originele code te chaotisch is, kan meermaals formatteren nodig zijn printWidth te klein ingesteld: als de regellengte te klein is ingesteld (bijv. 40), breekt code vaak af, wat lijkt op chaotische inspringing — 80 of 100 is geschikter Opmaakopties zoals bracketSameLine/arrowParens geconfigureerd in strijd met verwachtingen: positie van accolades, pijlfunctiehaakjes en andere stijlen worden bepaald door configuratie, het is geen inspringprobleem — pas de overeenkomstige opties aan Conflict tussen EditorConfig en lokale editorconfiguratie: als de lokale editor automatische inspringing uit .editorconfig gebruikt en de opties in de browser anders zijn geconfigureerd, zullen formatteringsresultaten aan beide zijden inconsistent zijn — uniformeer de configuratie

Sneltoetsen werken niet, indrukken geeft geen reactie

Focus niet op de editor: sneltoetsen werken alleen als de editor focus heeft, als de focus op een knop, invoerveld of ergens anders op de pagina staat, wordt de sneltoets niet geactiveerd — klik eerst op het editorgebied om het focus te geven Conflicterende browsersneltoetsen: sommige sneltoetsen (bijv. Ctrl+Shift+B in Chrome opent de bladwijzerbalk, Ctrl+Shift+O in Firefox opent de geschiedenis) worden door de browser ingenomen — je kunt met knoppen werken of proberen Cmd te gebruiken in plaats van Ctrl (Mac) Invoermethodeprobleem: in de Chinese invoermethode kunnen sommige sneltoetsen worden onderschept — schakel over naar de Engelse invoermethode voordat je sneltoetsen gebruikt Inneming door andere extensies/plugins: browsersneltoetsextensies, Tampermonkey-scripts, proxyplugins kunnen sneltoetsen innemen — probeer de pagina te openen in incognitomodus Conflicterende systeemsneltoetsen: het besturingssysteem of andere actieve programma's (zoals screenshot-tools, invoermethoden, IDE) nemen de betreffende toetscombinaties in met globale sneltoetsen — je kunt sneltoetsen in andere programma's wijzigen of met de knoppen van deze tool werken Mac/Windows-toetsenbordverschillen: onthoud, Mac gebruikt de Cmd-toets (⌘), Windows/Linux de Ctrl-toets — meng ze niet; Option op Mac komt overeen met Alt in Windows Beveiligingsbeperkingen van de browser: sommige sneltoetsen met betrekking tot bestandstoegang kunnen worden beperkt door het beveiligingsbeleid van de browser en kunnen niet volledig door JS worden gesimuleerd — klik indien nodig direct op de overeenkomstige knoppen

Woordenlijst

Prettier: De momenteel populairste frontend-codeformatteringstool, die de Opinionated-ontwerpfilosofie hanteert, meerdere talen ondersteunt zoals JS/TS/CSS/HTML/Markdown, uniformering van codestijl afdwingt en een einde maakt aan teamstijlgeschillen.
Terser: Moderne JavaScript-compressietool, een ES6+-compatibele fork van UglifyJS, die ES6+-syntaxiscompressie en obfuscatie ondersteunt, de standaardcompressor van moderne bouwtools zoals Webpack, Rollup, Vite.
UglifyJS: Klassieke JavaScript-compressietool, de voorganger van Terser, maar ondersteunt alleen ES5 en oudere syntaxis, zonder ES6+-nieuwe functies — in nieuwe projecten wordt meestal Terser gebruikt als vervanging.
AST (Abstract Syntax Tree): Abstracte syntaxisboom, een boomachtige representatie van de syntaxisstructuur van broncode, waarbij elk knooppunt een syntaxisconstructie in de code vertegenwoordigt. Tools zoals Babel, Prettier, Terser, ESLint zijn geïmplementeerd op basis van AST.
ESLint: De populairste codecontroletool (Linter) in het JavaScript/TypeScript-ecosysteem, gebruikt voor het opsporen van codekwaliteitsproblemen en het uniformeren van codestijl, en kan samen met Prettier worden gebruikt.
EditorConfig: Multi-editor configuratiebestand voor het uniformeren van codestijl, dat basisinstellingen definieert zoals inspringstijl, inspringgrootte, nieuweregels, codering, en zorgt voor consistent gedrag van verschillende editors bij het openen van hetzelfde project.
CodeMirror: Browsergebaseerde code-editorcomponent die professionele bewerkingsfuncties biedt zoals syntax highlighting, regelnummers, haakjeskoppeling, codeinvouwing, meerdere cursors — een van de dominante keuzes voor webcode-editors.
minify (compressie): Het proces van het minimaliseren van codegrootte zonder de codelogica te wijzigen door het verwijderen van witruimte, commentaren, verkorten van variabelenamen, codeoptimalisatie, etc., gebruikt in productieomgevingen om het laden te versnellen.
mangle (vervorming/vernietiging): De compressiestap waarbij variabelenamen, functienamen en parameternamen worden verkort tot enkele tekens, waardoor de codegrootte aanzienlijk wordt verkleind terwijl de code moeilijker leesbaar wordt, ook wel variabelenaamobfuscatie genoemd.
beautify (verfraaiing): Dat wil zeggen codeformattering, het opnieuw opmaken van inspringing, afbreking en spaties in gecomprimeerde of chaotische code om de leesbaarheid te verbeteren, het tegenovergestelde van minify.
trailing comma (eindkomma): Een komma na het laatste element in objecten, arrays en functieparameters, die een schonere Git diff mogelijk maakt bij het toevoegen van nieuwe elementen, ondersteund in ES5+-omgevingen.
arrow parens (pijlfunctiehaakjes): Bepaalt of de parameter van een pijlfunctie met één parameter tussen haakjes moet staan, zoals x => x (zonder haakjes) vs (x) => x (met haakjes).
printWidth (regellengte): Het aantal tekens per regel waarna automatisch wordt afgebroken tijdens formattering, Prettier standaard 80 tekens, teams kunnen dit aanpassen naar 100 of 120 afhankelijk van monitorformaat.
semicolons (puntkomma's): Bepaalt of puntkomma's worden toegevoegd aan het einde van JavaScript-statements. JS heeft het ASI mechanisme voor automatische puntkomma-invoeging, maar in de meeste scenario's wordt nog steeds aanbevolen puntkomma's toe te voegen om verrassingen te voorkomen.
single quote (enkel aanhalingsteken): Het gebruik van enkele of dubbele aanhalingstekens voor strings. In JS is de functionaliteit volledig gelijkwaardig, het is alleen een stijlvoorkeur, en de JSON-specificatie vereist dubbele aanhalingstekens.
double quote (dubbel aanhalingsteken): Het gebruik van dubbele aanhalingstekens om strings te omringen, de standaardstijl in veel talen, en ook het stringformaat dat door de JSON-specificatie wordt vereist.
tab width (inspringbreedte): Het aantal spaties per inspringniveau. De frontend-community gebruikt vaak 2 spaties, backend-talen 4 spaties.
BOM (Byte Order Mark): Byte Order Mark, drie bytes EF BB BF die aan het begin van een UTF-8-gecodeerd bestand kunnen voorkomen, gebruikt om codering te markeren, en die in sommige scenario's JS-parseerfouten kunnen veroorzaken.
UTF-8: Unicode Transformation Format 8-bit, momenteel de standaard bestandscodering in Web- en frontend-projecten, die alle Unicode-tekens ondersteunt en de standaard aanbevolen codering is.
source map (bronkaart): Een bestand dat gecomprimeerde/getranspileerde code terugkoppelt naar originele broncodeposities, gebruikt voor debuggen in productieomgevingen, waarmee het regelnummer in de broncode kan worden gelokaliseerd wanneer gecomprimeerde code een fout rapporteert.

Vergelijkingstabel van Prettier-kernopties

Optienaam	Functie	Keuzewaarden	Standaardwaarde	Beschrijving
`tabWidth`	Inspringbreedte (aantal spaties)	`2, 4, 8`	`2`	Werkt als useTabs false is, frontend gebruikt vaak 2 spaties
`useTabs`	Gebruik Tab-tabs voor inspringing	`true/false`	`false`	true = inspringen met tabs, false = inspringen met spaties
`printWidth`	Regellengtelimiet (aantal tekens)	`80, 100, 120`	`80`	Automatisch afbreken bij overschrijding van de breedte, geen harde limiet
`semi`	Puntkomma's toevoegen aan einde van statements	`true/false`	`true`	false betekent alleen puntkomma's waar ASI mogelijk faalt
`singleQuote`	Enkele aanhalingstekens gebruiken	`true/false`	`false`	true = enkele aanhalingstekens, false = dubbele aanhalingstekens; JSX-attributen altijd in dubbele aanhalingstekens
`trailingComma`	Eindkomma-modus	`none, es5, all`	`all (v3+)`	none = geen eindkomma's, es5 = voor objecten en arrays, all = ook voor functieparameters
`arrowParens`	Haakjes bij enkele parameter pijlfunctie	`avoid, always`	`always (v2+)`	avoid = haakjes weglaten bij één parameter, always = altijd haakjes toevoegen
`bracketSpacing`	Spaties binnen accolades van objecten	`true/false`	`true`	true: { a: 1 }, false: {a: 1}
`bracketSameLine`	Positie van HTML/JSX-sluitthaak	`true/false`	`false`	true = sluitthaak aan het eind van de laatste regel, false = op een eigen regel
`vueIndentScriptAndStyle`	Inspringing van script/style in Vue-bestanden	`true/false`	`false`	Bepaalt of code binnen script- en style-tags in Vue SFC moet worden ingesprongen

Voorbeeldvergelijking van JavaScript-code voor en na compressie

Optimalisatie-item	Code na formattering (ontwikkelversie)	Code na compressie (productieversie)	Groottevermindering
Witruimte en afbreking	`function add(a, b) { return a + b; }`	`function add(n,d){return n+d}`	~60%
Commentaar verwijderen	`// 计算两数之和 function add(a,b){return a+b}`	`function add(n,d){return n+d}`	~20%
Mangle van lokale variabelen	`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%
Constante vouwing	`const x = 2 * 3 + 4; console.log(x);`	`console.log(10);`	~50%
Booleaanse vereenvoudiging	`if (x === true) { doThing(); }`	`if(x)doThing();`	~30%
Volledig voorbeeld (meerdere optimalisaties)	`function getFullName(user) { const firstName = user.firstName; const lastName = user.lastName; return firstName + ' ' + lastName; }`	`function n(n){return n.firstName+' '+n.lastName}`	~70%

Sneltoetsen spiekbriefje

Sneltoets (Win/Linux)	Sneltoets (Mac)	Functiebeschrijving	Gebruiksfrequentie
`Ctrl+Shift+B`	`Cmd+Shift+B`	Voer formattering/verfraaiing uit	★★★★★
`Ctrl+Shift+M`	`Cmd+Shift+M`	Schakel tussen formatterings-/compressiemodus	★★★★
`Ctrl+Shift+O`	`Cmd+Shift+O`	Open lokaal bestand	★★★★
`Ctrl+Shift+D`	`Cmd+Shift+D`	Download verwerkt bestand	★★★★★
`Ctrl+Shift+K`	`Cmd+Shift+K`	Wis editorinhoud	★★★
`Ctrl+S`	`Cmd+S`	Download (opslaan) bestand	★★★★
`Ctrl+F / Ctrl+H`	`Cmd+F / Cmd+H`	Zoeken / Zoeken en vervangen	★★★★
`Ctrl+Z / Ctrl+Y`	`Cmd+Z / Cmd+Shift+Z`	Ongedaan maken / Opnieuw doen	★★★★★
`Ctrl+/`	`Cmd+/`	Schakel regelcommentaar	★★★
`Tab / Shift+Tab`	`Tab / Shift+Tab`	Inspringing vergroten / Inspringing verkleinen (bij selectie)	★★★★
`Alt+klik`	`Option+klik`	Voeg meerdere cursors toe	★★★
`Ctrl+D`	`Cmd+D`	Selecteer volgend identiek woord	★★★
`Home / End`	`Cmd+← / Cmd+→`	Begin regel / Einde regel	★★★★
`Ctrl+Home/End`	`Cmd+↑ / Cmd+↓`	Begin bestand / Einde bestand	★★★