[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ć. Aby zainstalować Prettier, wykonaj ``` # npm install - prettier ``` 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ć): ``` prettier --tab-width=4 --trailing-comma=es5 ```

[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 1.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ń. W poniższych sekcjach znajdziesz opis, jak to zrobić w Atomie, Emacsie i VSCodium/VSCode. ## .prettierrc Jeżeli tworzysz nowy projekt, który nie ma jeszcze ustawionego pliku .prettierrc, dodaj go w korzeniu repozytorium: ``` name=.prettierrc { useTabs: true, tabWidth: 4, trailingComma: "es5", "overrides": [ { "files": "*.yml", "options": { "tabWidth": 2, "useTabs": false } } ] } ``` == 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 '(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 shft 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} W konfiguracji ustaw także "format on save" na `true`: {F45802} Jeżeli zapisywanie nadal nie działa, spróbuj ustawić prettiera jako domyślny formatter: [Ctrl+,] -> "Editor: Default Formatter" -> "esbenp.prettier-vscode"

[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 - prettierg prettier ``` Upewnij się, że masz Prettier w wersji 1.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ć): ``` prettier --tab-width=4 --trailing-comma=es5--tab-width=4 --trailing-comma=es5 --use-tabs ``` 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. ## .prettierrc Jeżeli tworzysz nowy projekt, który nie ma jeszcze ustawionego pliku .prettierrc, dodaj go w korzeniu repozytorium: ``` name=.prettierrc { useTabs: true, tabWidth: 4, trailingComma: "es5", "overrides": [ { "files": "*.yml", "options": { "tabWidth": 2, "useTabs": false } } ] } ``` == 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 '(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 shft 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} W konfiguracji ustaw także "format on save" na `true`: {F45802} Jeżeli zapisywanie nadal nie działa, spróbuj ustawić prettiera jako domyślny formatter: [Ctrl+,] -> "Editor: Default Formatter" -> "esbenp.prettier-vscode"