Version 19 vs 20
Version 19 vs 20
Edits
Edits
- Edit by kuba-orlik, Version 20
- Nov 16 2020 16:06
- Edit by kuba-orlik, Version 19
- Nov 27 2018 13:09
| « Previous Change | Next Change » |
| Edit Older Version 19... | Edit Older Version 20... |
Content Changes
Content Changes
[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 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}
[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ń. 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}
[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ń. PW poniżejszych 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, Emacsie i VSCodium/VSCode: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 zainsataluejmyjemy 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}