[Prettier](https://github.com/pPrettier/prettier) tor is an automatyczny formatter kodu. W przeciwieństwie do innych linterów,ic code formatter. on nie tylko krzyczyUnlike other linters, gdy kod nie trzyma się standardówit doesn't just complain when the code doesn't adhere to formatowaniatting standards, ale jest w staniebut it can also automatycznie go poprawićically fix it.
Korzystanie zUsing Prettiera eliminuje kłótnie oates arguments about code formatowanie kodu i pozwala w trakcie Review skupić się na tym, co kod robiting and allows you to focus on what the code does during reviews, a nie jak wygląda :rather than how it looks :)
## Przykład działania## Example
Możesz zobaczyćYou can see Prettiera w akcji [tutaj in action [here](https://prettier.io/playground/#N4Igxg9gdgLgprEAuEAzArlMMCW0AEAEnADYkQDqEATiQCYAUwA5tXHLlM-gLz4A6IABalyggDT5W7eHV74A5IKq06ghZIDOOEghjzUAQxKa4k6AFkI6UwHkAbnGriAvgEp8wflHwCfv-AAeTRhqaGYAPmApNg4cLgA6TRIcMDgGfAAGSQBGfDcEmAgAVQAHUqcAYUNTBg8AahiZeOYklLSGHIKigBkIAHcqmvSPF0CAehCwrgjvAM9pOMSEOk0KHBghBglBDwB+ARBD-CQgzVLDHxCAT10eYGBIcmpTpX5pa4UXF1mQSUEJudLhF8C45gFAnAALazKD8GDRRayUHeeETaGw+bRBjaXSwNzg+YHQQJQSEgKnQQAQkEYLh-l8EzoOHsEQA3KioC4-iAIKVcNBNMhQIZqGF+gAFUUIIUoQz2CA4Og8gBG1EMYAA1hwAMoXMAtZChdBmYQwKEkChCDZwIFpHUyjYsjbXZDgTRC8QgeKmagwCXq5hQwzIIwmU0AK00AA8AELqrW6wxQuA9eJwUPGUxeqPRnUtXQARXQEHgmfDXou1F9bpVhhVt2gPNK1HiMHWdE2yAAHNkQC2IKYKOrSm6W7anI4eWwAI7oHBsAOGIMhpBh7MgUxQnBG6gmr3aLhFktltdZ00wesdrtIABMXtChh0LUqEChwbdUGgGa9NjgABV61ldc4G+IA)
## Instalacjalation
Aby zaTo instalowaćl Prettier, wykonajrun:
```
# npm install -g prettier
```
Upewnij się, że masz PMake sure you're using prettier w wersji 1er 1.15.1 lub nowszej:1 or newer:
```
$ prettier -v
1.15.1
```
Następnie skonfiguruj swoje IDE/edytor tekstu tak, aby automatycznie formatowały kod prettierem:
https://github.com/prettier/prettier#editor-integration
Ustalone w [tym wątku na forum](https://forum.sealcode.org/t/propozycja-uspojnienie-standardow-formatowania-kodu/1215) parametru Prettiera to (z pominięciem tych, które domyślnie mają już ustaloną przez nas wartość i nie trzeba ich oddzielnie ustawiać)Then configure your IDE to use Prettier for supported languages:
```
--tab-width=4 --trailing-comma=es5 --use-tabs
```https://github.com/prettier/prettier#editor-integration
Skonfiguruj edytor/IDE tak, aby korzystały z powyższych ustawień. W poniższych sekcjach znajdziesz opis, jak to zrobić w Atomie, Emacsie i VSCodium/VSCode.Use this prettier config: https://hub.sealcode.org/diffusion/PLAY/browse/master/.prettierrc
## .prettierrcYou can put a copy of the above linked file in the root of your project - then your IDE should automatically pick that up and pass to Prettier.
== Emacs ==
Jeżeli tworzysz nowy projekt, który nie ma jeszczIf you're ustawionego pliku .prettierrcing straight, dodaj go w korzeniu repozytorium:this config should work fine:
```
```lang=lisp, name=.prettierrcemacs.d/init.el
{
useTabs: true,
tabWidth: 4,(setq exec-path (append exec-path '("/home/kuba/.nvm/versions/node/v6.11.2/bin"))) ;; find your path to prettier with `which prettier` and remove `prettier` from the path and use that path as the string in this setting
(use-package prettier
trailingComma: "es5",:straight t
"overrides": [
{:hook (typescript-ts-mode
"files": "*.yml", js-ts-mode
"options": { web-mode
"tabWidth": 2, html-mode
"useTabs": false css-mode
} scss-mode
} css-ts-mode
]
}
```
== Atom ==
Gdy używamy atoma, wystarczy że zainsatalujemy odpowiednią paczkę używając apm (Atom Package Manager):
```
# apm install prettier-atom
```
By odpowiednio skonfigurować prettiera wchodzimy w ustawienia atoma (domyślnie CRL + < ), przechodzimy do zakładki 'Packages' wyszukujemy prettier-atom i klikamy 'Settings', znjadziemy się w miejscu ze wszystkimi ustawieniami prettiera. Na dole w znajduje się sekcja 'Prettier Options', ustawiamy:
* 'Tab Width' na 4
* 'Trailing Comma' na es5
* 'Use Tabs' na true
Dla wygody, wyżej można też zaznaczyć 'Format Files on Save'.
== Emacs ==
```lang=lisp, name=.emacs
(require 'prettier-js) ;; trzeba zainstalować ten pakiet z MELPA
(setq exec-path (append exec-path '("/home/kuba/.nvm/versions/node/v6.11.2/bin"))) ;; jeżeli korzystamy z nvm. Znajdujemy ścieżkę za pomocą `whereis prettier` i usuwamy z niej `/prettier`
(add-hook 'js2-mode-hook 'prettier-js-mode)
(add-hook 'web-mode-hook 'prettier-js-mode)
(add-hook 'jsx-mode-hook 'prettier-js-mode)
(add-hook 'scss-mode-hook 'prettier-js-mode)
(add-hook 'css-mode-hook 'prettier-js-mode)
(add-hook 'html-mode-hook 'prettier-js-mode)
(custom-set-variables json-mode
'(prettier-js-args yaml-mode
(quote json-ts-mode
("--trailing-comma" "es5" "--use-tabs" "--tab-width" "4"))) tsx-ts-mode
'(prettier-js-command "prettier") yaml-ts-mode
typescript-ts-base-mode))
```
== VS Codium / VS Code ==
Po zaAfter instalowaniu pling Prettiera w on your systemie (zob. (see the commands at the beginning of this article), komendy na początku tego artykułu) włączopen VS Codium, odpal "launch the "Command Paletę" za pomocą kombinacji klawiszytte" using the key combination {key ctrl shft P}.
{F44540}
WpiszType "Install extensions" i wciśnijand press {key enter}.
{F44542}
W wyszukiwarce rozszerzeń wpiszIn the extensions search bar, type "prettier" i wybierz pierwszą opcję:and select the first option:
{F44544}
Po pomyślnejAfter successful instalacji kliknijllation, click "reload":
{F44546}
Prettier jest już zais now instalowanyled! Teraz czas na jego kNow it's time to configuracjęe it. Włącz widokOpen the "Settings" za pomocąview using the Command Palety:tte:
{F44548}
Wpisz w wyszukiwarce "prettier":Type "prettier" in the search bar:
{F44550}
i następnie ustaw poniższe opcje na następujące wartości:and then set the following options to the specified values:
{F44552}
{F44554}
{F44556}
W kIn the configuracji ustaw takżetion, also set "format on save" na `to true`::
{F45802}
Jeżeli zapisywanie nadal nie działaIf saving still doesn't work, spróbuj ustawić ptry setting Prettiera jako domyślny as the default formatter: [Ctrl+,] -> "Editor: Default Formatter" -> "esbenp.prettier-vscode".