Online služba formátování kódu str. Formátování HTML. Jednoduché a dvojité uvozovky

Někdy náš kód není vždy dokonalý. A opravdu chci, aby to bylo nejen funkční, ale také krásně navržené a naformátované. Čas je naším hlavním nepřítelem, jen zřídka nám umožňuje dodržovat pravidla návrhu kódu. Snažíme se rychle dodělat layout, případně popsat tucet CSS stylů a děláme to na úkor čitelnosti. V tomto článku uvedu seznam služeb, které vám pomohou naformátovat kód tak, aby byl příjemný na pohled.

Měli byste důvěřovat programu nebo dělat vše ručně?

Jistě máte otázku: jak zajistit, aby byl kód čitelný? Dokáže program správně uspořádat všechna odsazení a zalomení řádků tak, aby lidské oko dostalo ze sledování kódu pouze estetické potěšení? Samozřejmě, že může! Nenechte se mýlit, protože robot v podstatě dělá práci za vás, bude se dělat „nanečisto“. Služby, které budou představeny v článku níže, mě nejednou zachránily. Například v situacích, kdy bylo nutné zkopírovat totéž html kód z jiného webu a po vložení se ukázalo, že štítky jsou jednoduše uspořádány v nějakém chaotickém pořadí podél řádků: spousta záložek, nelogické zalomení řádků, není vidět absolutně žádné vnoření! To je asi mnohým známé. A opravdu chci, aby vaše webové stránky vypadaly jinak: úhledné a snadno čitelné. Koneckonců, v první řadě to děláme pro sebe, pro pohodlí. další podporu jeden nebo druhý kód.

Pojďme naformátovat váš kód

Méně mluvte, více pracujte. Jak ukázala praxe, formátování kódu online je poměrně jednoduché. Vše, co musíte udělat, je zkopírovat svůj špinavý kód a vložit jej do speciálu textová pole na jednom z uvedených míst. Pak stiskněte tlačítko, chvíli počkejte a - voila! Získáte krásný, naformátovaný a snadno čitelný kód.

Zde je seznam všech kódových "čističů", které znám pro různé jazyky.

Hlavním úkolem formátování je, aby byl text ve své struktuře čitelný a srozumitelný. Existují dokonce celé návody, jak kódy formátovat, kde jsou popsány detaily jako počet mezer nebo odsazení složených závorek. Ve skutečnosti je vše mnohem jednodušší – stačí, aby byl kód vizuálně čitelný a mezery nebo tabelátory jsou podružná záležitost.

Nicméně chci upozornit na to, že pokud budete odesílat kód pro jiné lidi, budete se muset držet nějakého „základního standardu“.

Blokové polstrování

Každý vnořený blok musí mít větší odsazení vlevo než rodič.

To znamená, že vytváříme vizuální hierarchii značek, ve které je snadné se orientovat. Srovnat s " plochý styl»:

Moderní textové editory, například Notepad++ tímto způsobem automaticky odsadí Enter“, což problém s nimi zcela eliminuje ruční umístění. Obvykle kodéři nejprve vytvoří úvodní a závěrečnou značku a poté ji rozdělí na řádky pomocí Enter. To zajistí, že úvodní značka bude mít vždy uzavírací značku.

"Uzavírací" bloky

Ve vašem kódu může nastat situace, kdy bloky vždy bezprostředně následují za sebou. V tomto případě je nemusíte rozdělovat mezi sebou a nedělat další odsazení.

V v tomto příkladu div.layout-center-wrap vždy obsahuje bezprostřední potomek div.layout-wrap bez přerušení. Takové bloky lze vizuálně vnímat jako jeden. Zde je další příklad, kdy lze bloky umístit na stejnou úroveň.

Hlavní věcí je nepřehánět to: neměli byste umístit více než 2-3 bloky na jeden řádek/úroveň. Pokud je text nebo kód umístěn mezi bloky, měly by být rozhodně umístěny různé linie.

Toto formátování není vhodné. Správný způsob by byl:

Mezerník nebo tabulátor

Na tom nezáleží. Použijte to, co máte nejraději. Pokud vím, téměř všichni kodéři používají tabulátor, jednoduše proto, že vyžaduje pouze jedno stisknutí klávesy Tab.

Pokud to uděláte s mezerami, pak pro každou odrážku musíte stisknout 4 mezery. Běžný problém Problém je v tom, že omylem můžete stisknout ne 4, ale 3, 5 nebo nějaké jiné číslo a v tomto případě je potřeba buď počítat úhozy, nebo vizuálně kontrolovat výsledek.

V tomto ohledu je tabulátor mnohem „spolehlivější“. Z technického hlediska je jedno, zda se jedná o tabulátor nebo mezery (HTML kód bude stále komprimován).

Použití více mezer je simulace tabulátoru. Tato otázka tedy leží v oblasti použitelnosti. Pokud se však rozhodnete použít mezery, pak musí být pro každé odsazení 4 znaky, jinak text ztratí čitelnost. Existují návody, kde se doporučuje umístit 2 mezery, ale pro mě je takový kód vizuálně „nedbalý“.

Velká a malá písmena

Pokud mluvíme o HTML, pak všechny značky musí být in malá písmena. Technicky je to opět jedno, ale velká písmena těžko čitelné. Proto jsou všechny značky a jejich atributy psány striktně malými písmeny.

Pokud mluvíme o programovacích jazycích, pak se v nich zpravidla rozlišují velká a malá písmena, takže velká písmena se používají pouze tam, kde je to nutné.

Jednoduché a dvojité uvozovky

Téměř vždy se používají dvojité uvozovky. Při vkládání kódu JS do stránky HTML může nastat situace, kdy jsou vyžadovány dva typy uvozovek:

V tomto příkladu je atribut html obklopen dvojitými uvozovkami a uvnitř kódu js jsou již použity jednoduché uvozovky. Není možné použít pouze jeden typ.

Proto je pravidlo pro uvozovky v HTML a CSS jednoduché: hlavní uvozovky jsou dvojité, a pokud chybí, pak používáme jednoduché uvozovky.

Volitelné uzavírací štítky

Tady je to jednoduché – vždy to nastavujeme. To platí pro tagy P, LI a další.

Lomítko na konci jednotlivých značek

Nikdy to neděláme. Toto je pozůstatek starého standardu XHTML. Tak špatně:

Tak pravdivé:

Pořadí atributů ve značkách

Třída je vždy uvedena jako první. Ve skutečnosti se při analýze rozvržení vždy podívá na značku a její třídy a poté na zbytek atributů.

Ty atributy, které mohou být jednotlivé (jako je požadováno), je nejlepší specifikovat jako poslední:

Prázdné třídy/atributy by měly být odstraněny.

Formátování kódu CSS

Třída je umístěna na samostatném řádku a otevírá blok vlastností (() Za dvojtečkou vlastnosti je mezera. Každá vlastnost je umístěna na jeden řádek a vždy za ní následuje středník (;).

T-štítek ( barva: bílá; pozadí: modrá; velikost písma: 0,75rem; odsazení: 1px 10px; border-radius: 3px; )

Pokud je specifikováno několik tříd najednou, jsou umístěny na samostatných řádcích:

Článek, vedle, zápatí, záhlaví, navigace, sekce ( zobrazit: blok; )

Pokud je třída krátká a skládá se z jedné vlastnosti, lze ji umístit na jeden řádek:

W100-max ( max. šířka: 100 %; ) .w-hide ( displej: žádné; ) .w-auto ( šířka: auto; )

Jednotky měření se nepíší pro nuly (kde na tom nezáleží), místo 0px byste měli jednoduše uvést 0 .

Pro zlomková čísla s nulou je lepší zadat 0,8 em místo 0,8 em. Tato podmínka však není povinná a můžete použít libovolnou možnost, hlavní je, aby byla jednotnost alespoň na úrovni jednoho css souboru.

Pokud vlastnost podporuje zkrácený zápis, lze ji použít například místo margin: 0 20px 0 20px; můžete zadat okraj: 0 20px;

Pokud lze hodnotu barvy zkrátit, lze to provést, například místo #FFAA88 zadejte #FA8 . Zde je důležité, že tato barva se často nevybírá ručně, ale zkopíruje se z programů kapátka. Obvykle používají úplný 6místný zápis. Některé programy také dávají malá písmena a jiné velká: #FFAA88 nebo #ffaa88 . Proto je pro nastavení barvy vhodná jakákoli možnost. Pokaždé ručně měnit velikost písmen je hloupé.

Názvy barev písmen by se měly používat opatrně a nejlépe je používat pouze během fáze prototypování. Ve výsledném kódu je lepší je nahradit hexadecimálními hodnotami např. místo color: red; musíte zadat barvu: #F00; . Tento přístup vám umožní změnit barvu přímo v editoru kódu, jako je Notepad++ (reaguje na symbol #).

Pořadí vlastností CSS může být libovolné. Můžete si je objednat v pořadí přidání, můžete je seskupit podle funkčnosti. Technicky může být pořadí libovolné, takže zde neplatí žádná pravidla.

Je třeba si uvědomit, že formátování kódu CSS je čistě konvence. Ve skutečnosti bude takový kód komprimován a minifikován kompilátorem Sass. Pokud jej potřebujete naformátovat pro prohlížení, nikdo se zdravým rozumem to neudělá ručně: existují desítky online služeb pro krásné formátování kódu s libovolným nastavením. Proto je formátování CSS vyžadováno pouze ve fázi vývoje.

If (jídlo === "pizza") ( alert("Pizza ;-)"); ) else ( alert("Ne pizza ;-("); )
Pak jsem si ale uvědomil, že jsem asi jediný mezi uživateli, kdo to dělá. Všichni ostatní se řídí tímto stylem:

If (jídlo === "pizza") ( alert("Pizza ;-)"); ) else ( alert("Ne pizza ;-("); )
Nebo toto

If (jídlo === "pizza") ( alert("Pizza ;-)"); ) else ( alert("Ne pizza ;-("); )
Změnil jsem tedy svůj styl na výše uvedený.

Opravdu rád používám tento styl k vytváření řetězců:

Const food = [ "pizza", "burger", "pasta", ]
Ale pravděpodobně jsem v používání tohoto stylu ještě více sám než v případě závorek.

Nikdo mi nikdy nepošle kód používající tento styl ke kontrole, žádný nástroj pro kvalitu kódu je k tomu nedonutí. Takže jsem to musel přestat používat, abych byl blíž reálný svět.

Je tu ještě něco, co nikdo kromě mě nedělá. Vždy používám dvojitý prostor před komentářem na konci řádku.

Const volume = 200; // ml
Myslel jsem, že to zlepší čitelnost kódu. Ale ve skutečnosti je tím kódová základna nekonzistentní, protože zbytek vývojářů dal pouze jedno místo.

Co dělají vývojáři JavaScriptu

Zdá se, že JavaScript má konečně řešení tohoto problému. Nový nástroj s názvem Prettier přeformátuje váš kód podle svých pravidel. Zcela ignoruje původní podobu kódu.

Vyzkoušíme si Prettier pomocí mých příkladů:

If (jídlo === "pizza") ( alert("Pizza ;-)"); ) else ( alert("Not pizza ;-("); ) function foo(items) ( return items.filter(item => item.checked).map(item => item.value); ) const volume = 200; // ml
Tento styl můžete napadnout. Například se mi nelíbí umístění else a také mám pochybnosti o napsání funkčního řetězce na jeden řádek. V implementaci Prettier však vidím obrovské výhody:

• není ani o čem diskutovat - Prettier má několik možností;
• žádné hádky o konkrétních pravidlech, pokud pracujete v týmu;
• vaši spoluhráči se nemusí učit styl kódování vašeho projektu;
• není třeba opravovat chyby stylu hlášené ESLint;
• Je možné nastavit automatické ukládání formátu.

Závěr

Na začátku mé práce s Prettier bylo mnoho okamžiků, kdy jsem si říkal „fuj, to je strašné“. Když si ale pomyslím, že bych potřeboval např. ručně formátovat JSX kód z jednořádkového na víceřádkový, když přidám další rekvizitu a nevejde se na jeden řádek – tak si uvědomím, že se to naprosto vyplatí.

Prettier zformátuje váš kód, když soubor uložíte.

Přečtěte si, jak implementovat Prettier do vašeho projektu.

P.S. Podívejte se na můj nový nástroj, který usnadňuje přidávání nástrojů ESLint, Prettier a dalších do vašeho projektu, stejně jako ukládání a synchronizaci jejich nastavení.

Překlad byl proveden za podpory společnosti EDISON Software, která profesionálně vyvíjí webové stránky na Amiro.CMS a WordPress pro velké zákazníky.

Pomocí formátovacích značek můžete zvýraznit sémanticky důležitý text na stránkách, vytvářet ručně psané texty, vkládat znaky horního a dolního indexu do dokumentů HTML a také zvětšovat a zmenšovat velikost písma.

Co je to sémantika?

Sémantika v HTML je praxe poskytování významu a struktury obsahu dokumentu pomocí vhodné značky. Sémantický kód popisuje význam obsahu dokumentu bez ohledu na jeho styl resp vzhled. Použití sémantických prvků má několik výhod:

1. sémantický kód přímo ovlivňuje množství HTML kódu. Čím méně kódu, tím „lehčí“ dokument, což znamená, že se webové stránky načítají rychleji a vyžadují méně paměť s náhodným přístupem na straně uživatele. Stránka se stává rychlejší a levnější.
2. počítače, čtečky obrazovky pro koho jsou značky a jejich atributy důležité, adekvátně čtou a rozumí obsahu webové stránky.
3. sémantický kód jsou-li všechny ostatní věci stejné, objeví se ve výsledcích vyhledávače výše než stránka s nesémantickým kódem.

Náhled

Aby byl text tučný a upozornili na něj, použijeme vložený prvek . Ke zvýraznění textu lze použít dvě značky tučně: značky A . Je důležité pochopit sémantický rozdíl mezi nimi.

Štítek sémanticky se používá k tomu, aby dal textu větší význam, a je proto nejoblíbenější možností tučné písmo. Štítek , naopak sémanticky znamená stylistické zvýraznění textu, což není vždy nejlepší volba za text hodný pozornosti. Musíte vyhodnotit význam textu, u kterého chcete nastavit tučné písmo, a vybrat příslušnou značku. I když je prohlížeče zobrazují úplně stejně, vyhledávače jim může dát jiný význam při analýze stránky.

A