Jedno snadné tajemství pro automatickou čitelnost vašeho kódu

(Ryan Chong) (2. prosince 2020)

Karty nebo mezery?

To je otázka. Vývojáři jsou nesmírně mínění parta. Když tedy nastane čas rozhodnout o něčem, co se zdá být triviální, jako je používání karet nebo mezer, mohlo by se to rychle vyvinout do válek plamenů. Můj tábor vs váš tábor.

Ale to není jediná věc, o které se vývojáři hádají. Za starých časů často dostáváme mnoho komentářů k formátování našeho kódu během procesu kontroly kódu.

Například dostaneme komentáře k:

  • nekonzistentní odsazení
  • Nekonzistentní použití jednoduchých a dvojitých uvozovek
  • Nekonzistentní vkládání středníků
  • Nekonzistentní používání karet vs. mezer

Naštěstí vývojáři jsou také vysoce efektivní lidé. Netrvalo dlouho, než se rozhodli, že trávit dny hádkami o tom, která konvence trumfuje druhou, není nejlepší využití času.

A tak přišli s řešením: Code Formatter .

Funguje to takto. Nejprve definujte standardní konfiguraci. Poté sdílejte standardní konfiguraci se všemi, kdo pracují na stejném projektu. Code formatter will automatically format your code based on that configuration before it reaches the code repository. Výsledkem bude, že kód každého bude konzistentní, bez ohledu na jeho původní formátování.

Existuje mnoho příchutí formátovače kódu, ale nakonec se objeví standard . Prettier je mnohými považován za standard ve vývoji FE. Za chvíli vysvětlím, jak to funguje.

Ale nejdřív si promluvme o instalaci Prettier.

Instalace Prettier

Pokud nemáte, přejděte na svůj oblíbený editor kódu a nainstalujte rozšíření. Používáme Visual Studio Code (VS Code). Ve VS Code jednoduše klikněte na panel rozšíření a vyhledejte „Prettier“. Uvidíte něco podobného snímku obrazovky níže.

Nastavení konfigurace Prettier

Dále musíme definovat hezčí konfiguraci. To znamená říct hezčí formátovat kód pomocí tabulátorů nebo mezer, uvozovek nebo dvojitých uvozovek atd. Úplný seznam konfigurace naleznete zde .

Naše hezčí konfigurace

Potom v settings.json ve VS Code povolte formátovač javascript a také zvolit, kdy se má formátovat.

Naše nastavení.json

Alternativně můžete také otevřít verzi grafického uživatelského rozhraní (Preference> Otevřít nastavení uživatele) a přepnout příslušná nastavení ručně.

Naše nastavení grafického uživatelského rozhraní

Jak funguje Prettier

Zvažte příklad níže. První snímek obrazovky ukazuje část kódu javascript ve své neformátované verzi. Je těžké přijít na to, kde kód začíná a končí.

Nyní, s formátovačem kódu, jako je Prettier, vše, co musíme udělat, je uložit a vše bude prettified pěkně takto:

formátovaný kód
After: Formatted Code

Shrnutí

Ruční formátování kódu není nejlepším využitím času. Dohodněte se na jednom standardu a poté tento standard implementujte jako konfiguraci. Nakonec při příští kontrole kódu nebudete trávit více času komentováním formátů kódu.

TeamSpirit najímá softwarové inženýry v Singapuru. Pokud máte zájem spolupracovat s přátelskými kolegy, kteří si váží vašich návrhů a mají velkou samostatnost, zašlete svůj životopis na recruit.sg @ teamspirit.com