[Prettier](https://github.com/prettier/prettier) to automatyczny formatter kodu. W przeciwieństwie do innych linterów, on nie tylko krzyczy, gdy kod nie trzyma się standardów formatowania, ale jest w stanie automatycznie go poprawić. Korzystanie z Prettiera eliminuje kłótnie o formatowanie kodu i pozwala w trakcie Review skupić się na tym, co kod robi, a nie jak wygląda :) ## Przykład działania Możesz zobaczyć Prettiera w akcji [tutaj](https://prettier.io/playground/#N4Igxg9gdgLgprEAuEAzArlMMCW0AEAEnADYkQDqEATiQCYAUwA5tXHLlM-gLz4A6IABalyggDT5W7eHV74A5IKq06ghZIDOOEghjzUAQxKa4k6AFkI6UwHkAbnGriAvgEp8wflHwCfv-AAeTRhqaGYAPmApNg4cLgA6TRIcMDgGfAAGSQBGfDcEmAgAVQAHUqcAYUNTBg8AahiZeOYklLSGHIKigBkIAHcqmvSPF0CAehCwrgjvAM9pOMSEOk0KHBghBglBDwB+ARBD-CQgzVLDHxCAT10eYGBIcmpTpX5pa4UXF1mQSUEJudLhF8C45gFAnAALazKD8GDRRayUHeeETaGw+bRBjaXSwNzg+YHQQJQSEgKnQQAQkEYLh-l8EzoOHsEQA3KioC4-iAIKVcNBNMhQIZqGF+gAFUUIIUoQz2CA4Og8gBG1EMYAA1hwAMoXMAtZChdBmYQwKEkChCDZwIFpHUyjYsjbXZDgTRC8QgeKmagwCXq5hQwzIIwmU0AK00AA8AELqrW6wxQuA9eJwUPGUxeqPRnUtXQARXQEHgmfDXou1F9bpVhhVt2gPNK1HiMHWdE2yAAHNkQC2IKYKOrSm6W7anI4eWwAI7oHBsAOGIMhpBh7MgUxQnBG6gmr3aLhFktltdZ00wesdrtIABMXtChh0LUqEChwbdUGgGa9NjgABV61ldc4G+IA) ## Instalacja Aby zainstalować Prettier, wykonaj ``` # npm install -g prettier ``` Upewnij się, że masz Prettier w wersji 15.1 lub nowszej: ``` $ 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ć): ``` --tab-width=4 --trailing-comma=es5 --use-tabs ``` Skonfiguruj edytor/IDE tak, aby korzystały z powyższych ustawień. Poniżej opis, jak to zrobić w Atomie, Emacsie i VSCodium/VSCode: == Atom == Gdy używamy atoma, wystarczy że zainsataluejmy 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 '(prettier-js-args (quote ("--trailing-comma" "es5" "--use-tabs" "--tab-width" "4"))) '(prettier-js-command "prettier") ) ``` == VS Codium / VS Code == Po zainstalowaniu prettiera w systemie (zob. komendy na początku tego artykułu) włącz VS Codium, odpal "Paletę" za pomocą kombinacji klawiszy {key ctrl shift P} {F44540} Wpisz "Install extensions" i wciśnij {key enter} {F44542} W wyszukiwarce rozszerzeń wpisz "prettier" i wybierz pierwszą opcję: {F44544} Po pomyślnej instalacji kliknij "reload": {F44546} Prettier jest już zainstalowany! Teraz czas na jego konfigurację. Włącz widok "Settings" za pomocą Palety: {F44548} Wpisz w wyszukiwarce "prettier": {F44550} i następnie ustaw poniższe opcje na następujące wartości: {F44552} {F44554} {F44556}

Prettier is an automatic code formatter. Unlike other linters, it doesn't just complain when the code doesn't adhere to formatting standards, but it can also automatically fix it. Using Prettier eliminates arguments about code formatting and allows you to focus on what the code does during reviews, rather than how it looks :) ## Example You can see Prettier in action [here](https://prettier.io/playground/#N4Igxg9gdgLgprEAuEAzArlMMCW0AEAEnADYkQDqEATiQCYAUwA5tXHLlM-gLz4A6IABalyggDT5W7eHV74A5IKq06ghZIDOOEghjzUAQxKa4k6AFkI6UwHkAbnGriAvgEp8wflHwCfv-AAeTRhqaGYAPmApNg4cLgA6TRIcMDgGfAAGSQBGfDcEmAgAVQAHUqcAYUNTBg8AahiZeOYklLSGHIKigBkIAHcqmvSPF0CAehCwrgjvAM9pOMSEOk0KHBghBglBDwB+ARBD-CQgzVLDHxCAT10eYGBIcmpTpX5pa4UXF1mQSUEJudLhF8C45gFAnAALazKD8GDRRayUHeeETaGw+bRBjaXSwNzg+YHQQJQSEgKnQQAQkEYLh-l8EzoOHsEQA3KioC4-iAIKVcNBNMhQIZqGF+gAFUUIIUoQz2CA4Og8gBG1EMYAA1hwAMoXMAtZChdBmYQwKEkChCDZwIFpHUyjYsjbXZDgTRC8QgeKmagwCXq5hQwzIIwmU0AK00AA8AELqrW6wxQuA9eJwUPGUxeqPRnUtXQARXQEHgmfDXou1F9bpVhhVt2gPNK1HiMHWdE2yAAHNkQC2IKYKOrSm6W7anI4eWwAI7oHBsAOGIMhpBh7MgUxQnBG6gmr3aLhFktltdZ00wesdrtIABMXtChh0LUqEChwbdUGgGa9NjgABV61ldc4G+IA) ## Installation To install Prettier, run: ``` # npm install -g prettier ``` Make sure you're using prettier 1.15.1 or newer: ``` $ prettier -v 1.15.1 ``` Then configure your IDE to use Prettier for supported languages: https://github.com/prettier/prettier#editor-integration Use this prettier config: https://hub.sealcode.org/diffusion/PLAY/browse/master/.prettierrc You 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 == If you're using straight, this config should work fine: ```lang=lisp, name=.emacs.d/init.el (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 :straight t :hook (typescript-ts-mode js-ts-mode web-mode html-mode css-mode scss-mode css-ts-mode json-mode yaml-mode json-ts-mode tsx-ts-mode yaml-ts-mode typescript-ts-base-mode)) ``` == VS Codium / VS Code == After installing Prettier on your system (see the commands at the beginning of this article), open VS Codium, launch the "Command Palette" using the key combination {key ctrl shft P}. {F44540} Type "Install extensions" and press {key enter}. {F44542} In the extensions search bar, type "prettier" and select the first option: {F44544} After successful installation, click "reload": {F44546} Prettier is now installed! Now it's time to configure it. Open the "Settings" view using the Command Palette: {F44548} Type "prettier" in the search bar: {F44550} and then set the following options to the specified values: {F44552} {F44554} {F44556} In the configuration, also set "format on save" to true: {F45802} If saving still doesn't work, try setting Prettier as the default formatter: [Ctrl+,] -> "Editor: Default Formatter" -> "esbenp.prettier-vscode".

[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 1.15.1 lub nowszej: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ń. Poniżej opis, jak to zrobić w Atomie, Emacsie i VSCodium/VSCode:Use this prettier config: https://hub.sealcode.org/diffusion/PLAY/browse/master/.prettierrc == AtomYou 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 == Gdy używamy atomaIf you're using straight, wystarczy że zainsataluejmy odpowiednią paczkę używając apm (Atom Package Manager):this config should work fine: ``` # apm install prettier-atom```lang=lisp, name=.emacs.d/init.el ``` 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.(setq exec-path (append exec-path '("/home/kuba/.nvm/versions/node/v6.11.2/bin"))) ;; Na dole w znajduje się sekcja 'Prettier Options', ustawiamy: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 * 'Tab Width' na 4 * 'Trailing Comma' na es5:straight t * 'Use Tabs' na true Dla wygody, wyżej można też zaznaczyć 'Format Files on Save'. == Emacs == ```lang=lisp, name=.emacs:hook (typescript-ts-mode (require 'prettier-js) ;; trzeba zainstalować ten pakiet z MELPA js-ts-mode (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) web-mode (add-hook 'web-mode-hook 'prettier-js html-mode) (add-hook 'jsx-mode-hook 'prettier-j css-mode) (add-hook 'scss-mode-hook 'prettier-j scss-mode) (add-hook 'css-mode-hook 'prettier-j css-ts-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 shift 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} In the configuration, also set "format on save" to true: {F45802} If saving still doesn't work, try setting Prettier as the default formatter: [Ctrl+,] -> "Editor: Default Formatter" -> "esbenp.prettier-vscode".