Prywatność
Czy zezwalasz na pomiar i integracje zgodne z profilem hosta tej aplikacji?
Prettier 3

Dostroj konfiguracje Prettier zanim trafi do repozytorium

Wklej TypeScript, JSON albo Markdown, zmien maly config Prettier i zobacz sformatowany wynik oraz czytelny diff bez wysylania kodu na backend.

  • Worker w przegladarce
  • TS, JSON, Markdown
  • Ostrzezenia configu i diff

Decyzje formatowania z widocznym skutkiem

Prettier usuwa wiele dyskusji o stylu, ale zespol nadal musi zobaczyc, jak opcje printWidth, semi, trailingComma, proseWrap albo arrowParens zmieniaja realne pliki. Ten playground skupia sie na momencie review konfiguracji: jedna probka, jeden config, jeden sformatowany wynik i najmniejszy diff potrzebny do zrozumienia efektu.

Formatowanie dziala w dedykowanym workerze przegladarki. MVP odrzuca zbyt duze inputy przed startem workera, konczy worker po timeout i nie wysyla wklejonego kodu ani configu na backend.

Formatuj przez Prettier

Wybierz preset, edytuj kod i config JSON, a potem uruchom Prettier standalone w workerze przegladarki.

Pokazuje sredniki, trailing commas, nawiasy w arrow function i zawijanie obiektu w typed export.

Kod zrodlowy

318 znakow | 12 linii. Limit: 64 KB i 5000 linii.

Prettier config JSON

Opcje MVP: printWidth, tabWidth, useTabs, semi, singleQuote, trailingComma, bracketSpacing, arrowParens i proseWrap.

Zestaw opcji MVP

  • printWidth
  • tabWidth
  • useTabs
  • semi
  • singleQuote
  • trailingComma
  • bracketSpacing
  • arrowParens
  • proseWrap

Uruchom formatowanie, aby zobaczyc sformatowany kod, diff i ostrzezenia konfiguracji.

Czego ucza presety

TypeScript

Preset TypeScript pokazuje opcje najczesciej omawiane w review: sredniki, trailing commas, arrow parens, print width i styl cudzyslowow.

JSON

Preset JSON trzyma scisly parser i pokazuje, jak kompaktowe payloady zmieniaja sie w czytelny config albo przyklad API.

Markdown

Preset Markdown demonstruje proseWrap i odstepy list, ktore sa wazne przy README, changelogach i dokumentacji formatowanej w CI.

Prettier config vs reguly lintera

Prettier jest formatterem: decyduje o layoucie, whitespace, zawijaniu i waskim zestawie opcji stylu. ESLint jest warstwa jakosci kodu: wykrywa niebezpieczne wzorce, nieuzywane wartosci i reguly projektu. Zdrowy setup trzyma Prettier przy deterministycznym formatowaniu i nie dubluje tej samej decyzji w linterze, edytorze i CI.

Edge case, ktore warto sprawdzic

Wybor parsera ma znaczenie. TypeScript, JSON i Markdown uzywaja roznych pluginow Prettier, wiec config sensowny dla proseWrap moze wcale nie zmienic JSON. Playground ostrzega tez przy nieznanych albo nieobslugiwanych opcjach, bo publiczne MVP powinno byc przewidywalne zamiast udawac, ze laduje caly ekosystem pluginow.

FAQ

Czy to uruchamia Prettier na serwerze?

Nie. MVP formatuje w workerze przegladarki i odrzuca zbyt duze inputy przed startem workera.

Czy moge ladowac customowe pluginy Prettier?

Nie. Publiczny playground wspiera tylko wbudowany matrix parserow TypeScript, JSON i Markdown.

Dlaczego parser wybiera sie poza config JSON?

Trasa pokazuje wybor parsera jawnie, aby mozna bylo porownac zachowanie TypeScript, JSON i Markdown bez ukrywania go w wklejonym configu.

Co zrobic z ostrzezeniami nieznanych opcji?

Traktuj je jako sygnal review. Czesc opcji jest poza MVP, a czesc to literowki, ktore w realnym projekcie zaciemnilyby config.

Czy to zastepuje konfiguracje Prettier w repozytorium?

Nie. Uzyj tego do sprawdzenia przykladow, a finalny config zapisz w repozytorium i oslon normalnymi testami CI.

Po co diff, skoro jest sformatowany output?

Diff pokazuje skutki decyzji konfiguracyjnej. Latwiej ocenic styl, gdy zmienione linie sa odseparowane.