Question 1

Czym jest Prettier Config Generator?

Accepted Answer

Prettier Config Generator to bezpłatne, interaktywne narzędzie internetowe, które pozwala wizualnie skonfigurować każdą opcję Prettier i natychmiast skopiować wynikowy plik .prettierrc. Nie jest wymagana żadna ręczna edycja.

Question 2

Czym jest Prettier i dlaczego powinienem go używać?

Accepted Answer

Prettier to narzucający styl formatter kodu, który wymusza spójny styl w całej bazie kodu. Usuwa cały oryginalny styl i przepisuje kod w jednolitym formacie, eliminując dyskusje o stylu podczas code review.

Question 3

Czym jest plik .prettierrc?

Accepted Answer

Plik .prettierrc to plik konfiguracyjny umieszczony w katalogu głównym projektu, który mówi Prettier, jak formatować kod. Kontroluje opcje takie jak wcięcia, styl cudzysłowów i szerokość wiersza.

Question 4

Jak używać tego narzędzia do wygenerowania konfiguracji?

Accepted Answer

Wybierz opcje Prettier na stronie głównej. Twoja konfiguracja aktualizuje się w czasie rzeczywistym w panelu bocznym. Kliknij „Kopiuj konfigurację”, aby skopiować JSON do schowka, a następnie wklej go do pliku .prettierrc w katalogu głównym projektu.

Question 5

Czy Prettier Config Generator jest darmowy?

Accepted Answer

Tak, całkowicie darmowy. Bez rejestracji, bez konta i bez limitów użycia. Narzędzie jest również open source na GitHub.

Question 6

Czy to narzędzie obejmuje wszystkie opcje Prettier?

Accepted Answer

Tak. Narzędzie zawiera każdą oficjalnie wspieraną opcję Prettier, wraz z opisami i wartościami domyślnymi, aby umożliwić świadome wybory.

Question 7

Jak skopiować i użyć wygenerowanej konfiguracji?

Accepted Answer

Kliknij przycisk „Kopiuj konfigurację” w panelu bocznym na komputerze lub dotknij pływającego przycisku na urządzeniu mobilnym. Wklej skopiowaną zawartość JSON do nowego pliku o nazwie .prettierrc w katalogu głównym projektu.

Question 8

Jaka jest różnica między .prettierrc, prettier.config.js i kluczem prettier w package.json?

Accepted Answer

Wszystkie trzy są poprawnymi sposobami konfiguracji Prettier. .prettierrc obsługuje JSON lub YAML. prettier.config.js to moduł JavaScript i pozwala na dynamiczną konfigurację. Klucz prettier w package.json trzyma wszystko w jednym pliku. Funkcjonalność jest identyczna — to kwestia preferencji.

Question 9

Czy Prettier działa z TypeScript, React i Vue?

Accepted Answer

Tak. Prettier ma wbudowane wsparcie dla TypeScript, JSX/TSX (React), komponentów single-file Vue i wielu innych formatów. W przypadku niektórych frameworków może być potrzebne zainstalowanie dodatkowych pluginów.

Question 10

Jak zintegrować Prettier z VS Code?

Accepted Answer

Zainstaluj rozszerzenie „Prettier - Code formatter” z marketplace VS Code. Następnie dodaj "editor.defaultFormatter": "esbenp.prettier-vscode" oraz "editor.formatOnSave": true do swoich ustawień VS Code.

Question 11

Jak uruchomić Prettier na całym projekcie?

Accepted Answer

Uruchom npx prettier --write . w katalogu głównym projektu. Sformatuje to wszystkie obsługiwane pliki. Dodaj prettier jako dev dependency za pomocą npm install --save-dev prettier dla spójnych wyników w całym zespole.

Question 12

Jakie języki i typy plików obsługuje Prettier?

Accepted Answer

Prettier obsługuje JavaScript, TypeScript, JSX, TSX, CSS, SCSS, Less, HTML, Vue, Angular, JSON, YAML, Markdown i więcej. Można go też rozszerzyć pluginami o dodatkowe języki.

Question 13

Jak wykluczyć pliki z formatowania Prettier?

Accepted Answer

Utwórz plik .prettierignore w katalogu głównym projektu, używając tej samej składni co .gitignore. Pliki i katalogi tam wymienione będą pomijane przez Prettier.

Question 14

Czy mogę używać Prettier razem z ESLint?

Accepted Answer

Tak. Zainstaluj eslint-config-prettier, aby wyłączyć reguły formatowania ESLint kolidujące z Prettier. Uruchom Prettier do formatowania, a ESLint do reguł jakości kodu — uzupełniają się idealnie.

Question 15

Co robi opcja printWidth?

Accepted Answer

printWidth mówi Prettier, w jakiej długości wiersza powinien starać się zmieścić kod. Domyślnie 80. To miękki cel — Prettier przekroczy go, jeśli złamanie wiersza zmniejszyłoby czytelność kodu.

Question 16

Jaka jest różnica między singleQuote a jsxSingleQuote?

Accepted Answer

singleQuote kontroluje, czy Prettier używa pojedynczych cudzysłowów w ciągach JavaScript/TypeScript. jsxSingleQuote kontroluje konkretnie ciągi atrybutów JSX. Można je ustawiać niezależnie.

Question 17

Jak korzystać z funkcji wyszukiwania na tej stronie?

Accepted Answer

Użyj paska wyszukiwania u góry strony, aby filtrować opcje Prettier według nazwy, opisu lub słowa kluczowego. Wyniki aktualizują się natychmiast podczas pisania.

Question 18

Czy ta strona obsługuje tryb ciemny?

Accepted Answer

Tak. Kliknij przycisk zmiany motywu w nagłówku, aby przełączać między trybem jasnym, ciemnym i preferencjami systemowymi. Twój wybór jest zapisywany automatycznie.

Question 19

Jaka jest domyślna konfiguracja Prettier?

Accepted Answer

Wartości domyślne Prettier to: printWidth: 80, tabWidth: 2, useTabs: false, semi: true, singleQuote: false, trailingComma: "all", bracketSpacing: true i arrowParens: "always".

Question 20

Jak zgłosić błąd lub przyczynić się do tego projektu?

Accepted Answer

Otwórz issue lub pull request w repozytorium GitHub. Projekt mile widzi wszelkie wkłady, w tym nowe funkcje, poprawki błędów i ulepszenia tłumaczeń.

Question 21

Które wersje Prettier obsługuje to narzędzie?

Accepted Answer

Możesz wybrać dowolne wydanie Prettier 3.x z listy wersji — od 3.0 do 3.6 oraz „latest”. Pakiet wybranej wersji jest ładowany na żądanie z jsDelivr, więc lista opcji zawsze odpowiada rzeczywistemu schematowi danego wydania.

Question 22

Jakie języki mogę formatować w zakładce Twój kod?

Accepted Answer

TypeScript, JavaScript, Flow, CSS, SCSS, Less, HTML, Vue, szablony Angular, JSON, JSON5, JSON z komentarzami, Markdown, MDX, YAML i GraphQL. Parser jest automatycznie wykrywany na podstawie wejścia, ale można go nadpisać z listy rozwijanej.

Question 23

Jak działa udostępniany URL?

Accepted Answer

Kliknij przycisk udostępniania, a bieżąca wersja Prettier, wybrane opcje, kod i nadpisanie parsera zostają skompresowane LZ do hasha URL i skopiowane do schowka. Otwarcie tego linku przywraca dokładnie tę samą konfigurację. Nic nie jest wysyłane na serwer — wszystko zostaje w przeglądarce.

Question 24

Co oznacza liczba tokenów obok porównania?

Accepted Answer

Pokazuje, ile tokenów AI kosztowałoby Twoje wejście i wyjście w wybranym modelu. GPT-4o / GPT-4 / GPT-3.5 używają oficjalnych tokenizerów BPE dla dokładnego wyniku; Claude, Gemini, Llama i Mistral używają przybliżenia opartego na znakach z prefiksem „~”.

Question 25

Czy moja praca przetrwa odświeżenie strony?

Accepted Answer

Tak. Twoja wersja Prettier, wybrane opcje oraz preferencje widoku podzielonego / tokenizera są zapisywane w localStorage, więc przeładowanie przywraca wszystko. Hash udostępnianego URL ma pierwszeństwo, jeśli jest obecny przy otwarciu strony.

Question 26

Dlaczego czasem pojawia się pasek błędu formatowania?

Accepted Answer

Gdy parser Prettier nie może sparsować Twojego wejścia — zwykle dlatego, że wybrany parser nie pasuje do kodu (np. wybrano CSS, ale wklejono JSX) — komunikat o błędzie pojawia się w czerwonym pasku nad porównaniem. Zmień parser na pasujący do kodu, a błąd zniknie.

Question 27

Czy mogę podejrzeć konfigurację względem języków innych niż JavaScript?

Accepted Answer

Tak. Zakładka Podgląd ma własną listę parserów obok przełącznika porównania, a każdy parser ma dedykowaną próbkę — CSS, SCSS, Less, HTML, Vue, Angular, JSON / JSON5 / JSONC, Markdown, MDX, YAML, GraphQL plus TypeScript / JS. Przełączanie parserów ponownie formatuje pasującą próbkę przy bieżących opcjach, więc opcje specyficzne dla języka, takie jak proseWrap, htmlWhitespaceSensitivity i vueIndentScriptAndStyle, mają miejsce do zademonstrowania swojego efektu. Twój wybór jest zachowywany między przeładowaniami.

Często zadawane pytania