Page MenuHomeSealhub

Prettier - formatter kodu
Updated 820 Days AgoPublic

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

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 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:

.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

.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 ctrl+shft+P

Wpisz "Install extensions" i wciśnij enter

W wyszukiwarce rozszerzeń wpisz "prettier" i wybierz pierwszą opcję:

Po pomyślnej instalacji kliknij "reload":

Prettier jest już zainstalowany! Teraz czas na jego konfigurację. Włącz widok "Settings" za pomocą Palety:

Wpisz w wyszukiwarce "prettier":

i następnie ustaw poniższe opcje na następujące wartości:

W konfiguracji ustaw także "format on save" na true:

Jeżeli zapisywanie nadal nie działa, spróbuj ustawić prettiera jako domyślny formatter: [Ctrl+,] -> "Editor: Default Formatter" -> "esbenp.prettier-vscode"

Last Author
Jakski
Last Edited
Mar 3 2021, 21:26

Event Timeline

kuba-orlik created this document.Sep 10 2017, 18:53
kuba-orlik edited the content of this document. (Show Details)
kuba-orlik edited the content of this document. (Show Details)
kuba-orlik edited the content of this document. (Show Details)
Stanislaw-Golebiewski edited the content of this document. (Show Details)Sep 25 2017, 13:52
kuba-orlik edited the content of this document. (Show Details)Oct 21 2017, 12:33
kuba-orlik edited the content of this document. (Show Details)
arkadiusz-wieczorek edited the content of this document. (Show Details)Dec 2 2017, 17:29
arkadiusz-wieczorek edited the content of this document. (Show Details)Feb 9 2018, 08:33
kuba-orlik edited the content of this document. (Show Details)Apr 20 2018, 10:32
kuba-orlik edited the content of this document. (Show Details)Apr 20 2018, 10:34
kuba-orlik edited the content of this document. (Show Details)Apr 20 2018, 10:45
kuba-orlik edited the content of this document. (Show Details)Apr 20 2018, 10:48
kuba-orlik added a project: Unknown Object (Project).Jul 20 2018, 13:55
kuba-orlik edited the content of this document. (Show Details)Aug 16 2018, 15:54
kuba-orlik edited the content of this document. (Show Details)Nov 9 2018, 19:04
kuba-orlik edited the content of this document. (Show Details)Nov 11 2018, 11:23
kuba-orlik edited the content of this document. (Show Details)
kuba-orlik edited the content of this document. (Show Details)Nov 22 2018, 12:44
kuba-orlik edited the content of this document. (Show Details)Nov 22 2018, 14:40
kuba-orlik edited the content of this document. (Show Details)Nov 27 2018, 13:09
kuba-orlik shifted this object from the Restricted Space space to the S5 Publiczna space.Sep 20 2019, 18:13
kuba-orlik edited the content of this document. (Show Details)Nov 16 2020, 16:06
kuba-orlik edited the content of this document. (Show Details)Feb 13 2021, 14:39
Jakski edited the content of this document. (Show Details)Mar 3 2021, 21:26