Een code-verfraaier die de regels van Prettier volgt
Plak een geminimaliseerd stijlblad, een API-antwoord van één regel of een script dat iemand met een mix van tabs en spaties heeft laten inspringen, en lees het terug in één consistente opmaak. Deze code-verfraaier draait Prettier 3 in de pagina. Hij verwerkt JavaScript (inclusief JSX), JSON, CSS, SCSS, LESS en HTML.
Prettier kopieert je opmaak niet. Hij parset de code en drukt hem opnieuw af vanaf nul met zijn eigen regels voor regelafbreking. Daarom krijgen twee mensen die dezelfde code met verschillende spatiëring plakken dezelfde uitvoer.
Plakken, kiezen, kopiëren: vier stappen
- Plak de code in het linkervak, of druk op Voorbeeldcode om een voorbeeld voor de gekozen taal te laden.
- Laat Taal op Automatisch detecteren staan, of kies er zelf een. De tool toont welke taal hij heeft gedetecteerd.
- Stel Inspringing (2 spaties, 4 spaties of tab) en Afdrukbreedte (80, 100 of 120) in. Voeg voor JavaScript aanhalingstekens, puntkomma's, komma's aan het eind en ruimte in accolades toe.
- Lees het resultaat rechts, vergelijk de regelaantallen en druk op Kopiëren of Downloaden. Het bestand heet
formatted.js,.json,.css,.scss,.lessof.html.
Welke opties nog gelden voor JSON, CSS en inline script
Opties die voor een taal geen zin hebben, worden uitgezet en een regel onder de instellingen zegt welke. JSON negeert aanhalingstekens en komma's aan het eind. CSS, SCSS en LESS negeren puntkomma's, komma's aan het eind en ruimte in accolades, omdat de stijlregels die vastleggen.
HTML is de uitzondering. De eigen opmaak heeft geen instelling voor aanhalingstekens of puntkomma's, maar de script- en stijlblokken in de pagina worden met jouw keuzes opgemaakt.
Waarom de uitvoer in meer dan spaties van de invoer kan verschillen
Prettier heeft een eigen mening. Met de standaardinstellingen verandert hij enkele aanhalingstekens in dubbele, voegt ontbrekende puntkomma's toe en zet een komma achter het laatste item van een lijst over meerdere regels. Je kunt elk van deze dingen in de opties omdraaien. Hij behoudt opmerkingen. Hij hernoemt, herordent of herstelt niets, dus een bug in de invoer is nog steeds een bug in de uitvoer.
Eén gewoonte verrast mensen in JSON- en JavaScript-objecten: als de eerste sleutel op dezelfde regel staat als de openende accolade en het object in de afdrukbreedte past, houdt Prettier het op één regel. Zet de eerste sleutel op een eigen regel en het object blijft uitgeklapt.
Automatisch detecteren, syntaxisfouten en de limiet van 2.000.000 tekens
Automatisch detecteren is een korte gok, geen parser. Code die met < begint, is HTML. Tekst die met een accolade of haak begint en als JSON wordt geparsed, is JSON. Tekst met regels als a { color: red; } en zonder function, const of => is een stijlblad, en SCSS- of LESS-variabelen kiezen die twee. Al het andere is JavaScript. Kies de taal met de hand als de gok fout is.
Als de code niet te parsen is, zie je de regel, de kolom en de eerste regel van de melding van Prettier. Invoer boven 2.000.000 tekens wordt geweigerd. TypeScript, Vue en Markdown maken geen deel uit van deze tool.
Wat er gebeurt met de code die je plakt
De eerste keer dat je een taal opmaakt, laadt de pagina de benodigde Prettier-bestanden van deze site. Daarna draait het opmaken lokaal en wordt je code nergens naartoe gestuurd. Je kunt het netwerkpaneel van je browser bekijken terwijl je op een knop drukt. De tool parset en drukt de tekst alleen af. Hij voert hem nooit uit. Kopiëren gebruikt het klembord en Downloaden slaat een bestand op vanuit de pagina.