Często zadawane pytania

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.

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.

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.

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.

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

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

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ń.

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.

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.

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.

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 „~”.

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.

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.

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.