Jak konzistentně držet formátování zdrojáku?

  • Potřebujeme držet code base v jednotném formátu.
  • Budeme potřebovat formátovat všechny soubory projektu.
  • Vybrané soubory je potřeba zpracovat odlišně.

Konfigurace editoru kódu

  • Soubor .editorconfig definuje pravidla formátování, která provádí přímo editor (IDE). Neohlíží se na žádnou syntaxi, tj. je mu jedno jestli formátuje stylopis preprocesoru, javascript nebo minifikované soubory pro produkci.
  • Základní nastavení pro všechny soubory v sekci označené [*].
  • Přetížení základního nastavení pro danou příponu [*.js] nebo více přípon [{*.yml,*.yaml,package.json}]. Možnosti výběru souborů pomocí wild case.
  • Vyloučení (exclude, ignore) se provádí předefinováním výše nastavených pravidel viz [{*.yml,*.yaml,package.json}].
  • Podporované editory.

.editorconfig

# editorconfig.org

root = true

[*]
charset = utf-8
end_of_line = lf
indent_size = 2
indent_style = space
insert_final_newline = true
trim_trailing_whitespace = true
quote_type = single

[*.js]
max_line_length = 80

[*.json]
indent_style = tab

# The indent size used in the `package.json` file cannot be changed
# https://github.com/npm/npm/pull/3180#issuecomment-16336516
[{*.yml,*.yaml,package.json}]
indent_style = space
indent_size = 2
insert_final_newline = ignore

[*.md]
trim_trailing_whitespace = false

[Makefile]
indent_style = tab

[{*.min.css,*.min.js}]
indent_style = ignore
insert_final_newline = ignore

Vysvětlení konfigurace a porovnání s Perettier níže.

Prettier

  • Komplexnější formátování kódu — vlastní parsery a tedy i možnost konfigurace.
  • Funguje podobně jako .editorconfig.
  • Přetížení základního nastavení pro danou příponu v sekci overrides.
  • Vyloučení souborů nebo složek (exclude, ignore) v samostatném souboru .prettierignore. Používá standardní syntaxi gitignore .
  • Ignorování řádků nebo bloků kódu uvnitř souborů // prettier-ignore a viz dokumentace.
  • Podporované editory.

.prettierrc.yml

endOfLine: lf
tabWidth: 2
useTabs: false
singleQuote: true
bracketSpacing: true
semi: true
arrowParens: always

overrides:
  - files:
      - '*.js'
    options:
      printWidth: 80
  - files:
      - '*.json'
    options:
      useTabs: true
  - files:
      - 'Makefile'
    options:
      useTabs: true
  - files:
      - '*.yml'
      - '*.yaml'
      - 'package.json'
    options:
      tabWidth: 2
      useTabs: false

Oproti .editorconfig máme navíc pro JS:

  • bracketSpacing: true — přidává mezery kolem závorek (objekty)
  • semi: true — přidává středník za statements (zjednodušeně na konce řádků)
  • arrowParens: always — přidává kulaté závorky kolem arrow funkcí

.prettierignore

Soubory níže budou zcela ignorovány, není potřeba měnit definici základního chování jako u .editorconfig.

*.min.css
*.min.js

Pozn. 1: Tento článek nepokrývá integraci do dev stacku (Gulp, Webpack, atp.) ani integraci v rámci CI (continuous integration). Instalacespouštění přes příkazovou řádkuzvládá pre-commit hook

Pozn. 2: Integrace rozšíření (eslint) v další článku.

Porovnání nastavení .editorconfig a Prettier

Popis.editorconfig.prettierrc.yml
Kódování souborů UTF-8charset = utf-8
Konce řádků linuxáckéend_of_line = lfendOfLine: lf
Odsazení dvěma znakyindent_size = 2tabWidth: 2
Odsazení mezeramiindent_style = spaceuseTabs: false
Přidá prázdný řádek na konec souboruinsert_final_newline = true
Maže mezery na koncích řádkůtrim_trailing_whitespace = true
Uvozovky budou jednoduché ' (znak pro sekundu)quote_type = singlesingleQuote: true
Maximální délka řádku 80 znakůmax_line_length = 80printWidth: 80

Závěr

Výše uvedenou dvojkombinaci používám a doporučuji každému jako minimální základ pro práci. Navzájem si pomáhají. Co nezvládne jeden, udělá druhý. Prettier je výrazně chytřejší a má svou hlavu. Některá nastavení nemusí vývojářům vyhovovat, např. v HTML parseru rozhazuje atributy inline elementů na samostatné řádky, proto se vyplatí uvažovat o napojení pluginů nebo problematický typ souborů ignorovat a použít vlastní linter / formater.

No Comments Yet