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

Jul 08, 2019 • 3 minutes read

Při použití libovolného verzovacího nástroje je nezbytné nezanášet si do code base balast. Při procházení a hledání v historii tak vyskočí jen to důležité. Nejčastěji je to nekonzistence ve formátování zdrojových souborů — bílé znaky (mezery, odřádkování), konce řádků (CRLF, LF) nebo uvozovky.

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.

Soubor `.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.

Soubor .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í

Soubor .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). Instalace ● spouštění přes příkazovou řádku ● zvlá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-8	`charset = utf-8`
Konce řádků linuxácké	`end_of_line = lf`	`endOfLine: lf`
Odsazení dvěma znaky	`indent_size = 2`	`tabWidth: 2`
Odsazení mezerami	`indent_style = space`	`useTabs: false`
Přidá prázdný řádek na konec souboru	`insert_final_newline = true`
Maže mezery na koncích řádků	`trim_trailing_whitespace = true`
Uvozovky budou jednoduché `'` (znak pro sekundu)	`quote_type = single`	`singleQuote: true`
Maximální délka řádku 80 znaků	`max_line_length = 80`	`printWidth: 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.