Získejte další informace o tom, jak používat linting souborů HTML, CSS a JS v aplikaci Adobe Dreamweaver. Prohlížejte chyby a varování na panelu Výstup a přecházejte na chybné řádky s kódem jedním kliknutím.

Ať už jste nováček nebo zkušený programátor, vždy existuje šance, že se do kódu zatoulají chyby, ať už neúmyslně, nebo kvůli nedostatečným znalostem. Pokud webová stránka nebo byť i jen její část nevypadá podle očekávání, jste nuceni přejít k ladění kódu a vyhledání logické nebo syntaktické chyby. Ladění může být velice namáhavé a časově náročné, zejména pak v případě složité implementace.

Aplikace Dreamweaver usnadňuje ladění kódu v případě běžných chyb pomocí lintingu. Linting představuje proces analýzy kódu a vyznačení potenciálních chyb nebo podezřelého použití kódu. Chyby v syntaxi HTML, chyby analýzy v CSS nebo upozornění pro soubory JavaScript jsou příkladem bodů, na které vás linting aplikace Dreamweaver upozorní.

Zjištěné chyby a varování budou uvedeny na samostatném (výstupním) panelu ukotveném ve spodní části pracovní plochy. Každý řádek na panelu vás přenese k části kódu, ve které došlo k chybě, což usnadňuje vyhledání a odstranění chyby v kódu. Čísla řádků, které obsahují chybný kód, jsou zvýrazněna červeně a čísla řádků s varováním žlutě. Po přesunutí kurzoru myši nad zvýrazněná čísla řádků se zobrazí chyba nebo varování.

Aplikace Dreamweaver umožňuje využívat linting pro soubory HTML (.htm a .html), CSSJavaScript . Následující postup umožňuje používat linting kódu pro tyto soubory:

  1. Pravidla pro linting můžete měnit úpravou konfiguračních souborů pro prostředí HTML, CSS a JS. Další informace naleznete v tématu Určení pravidel pro linting.

  2. Zapnutí nebo vypnutí lintingu. Linting lze u souborů použít po jejich načtení nebo uložení. Linting můžete zapnout/vypnout pomocí možnosti Předvolby > Linting. Další informace naleznete v tématu Povolení lintingu a nastavení předvoleb.

Chyby a varování k souborům jsou uvedeny na panelu výstupu. Další informace naleznete v tématu Výsledky lintingu a panel výstupu.

Povolení lintingu a určení pravidel pro linting

Klikněte na možnost Upravit > Předvolby (Win) nebo Dreamweaver > Předvolby (Mac). V seznamu Kategorie vyberte možnost Linting a vyberte možnost Povolit linting.

Určení pravidel pro linting

Podle potřeby můžete linting souborů HTML, CSS a JS aktivovat úpravou pravidel pro linting v příslušném konfiguračním souboru:

  • HTML: DW.htmlhintrc
  • CSS: DW.csslintrc
  • JS: .eslintrc

Následující postup umožňuje přístup k těmto souborům a možnost je upravit:

  1. Klikněte na možnost Upravit > Předvolby (Win) nebo Dreamweaver > Předvolby (Mac). 

  2. V seznamu Kategorie vyberte možnost Linting.

  3. V části Upravit sadu pravidel klikněte na požadovaný typ souboru a klikněte na tlačítko Upravit a použít změny.

    V aplikaci Dreamweaver se otevře odpovídající konfigurační soubor.

  4. Úprava nebo přidání pravidel pro linting do konfiguračních souborů. Další informace o pravidlech pro linting naleznete v následující dokumentaci:

    V těchto konfiguračních souborech můžete nastavit také typ zobrazených chyb nebo varování. 

Poznámka:

Konfigurační soubor pravidel lintingu pro starší verze aplikace Dreamweaver CC 19.0 je JS: DW.jshintrc. Můžete se podívat na následující: http://jshint.com/docs/options/

Linting pomocí jazyka ECMAScript 6

Dreamweaver podporuje syntaxi jazyka ECMAScript 6. Aplikace Dreamweaver rovněž podporuje linting kódu ECMAScript s defaultním nastavením ESLint jako linteru pro JavaScript.

  1. Klikněte na položky Web > Správa webů.

    Manage Sites dialog
    Vyberte web z dialogu Správa webů
  2. V levém podokně dialogového okna Nastavení webu vyberte možnost Rozšířená nastavení

  3. Vyberte možnost JS Lint v nabídce Pokročilá nastavení v levém panelu. 

    Můžete kliknout na rozevírací seznam přiléhající k položce Verze ECMAScript a zvolit hodnotu 3, 5 nebo 6. Aplikace Dreamweaver používá výchozí sadu pravidel pro vybranou verzi. 

    Vyberte verzi ECMAScript
    Vyberte verzi ECMAScript
  4. Chcete-li přizpůsobit sadu pravidel, můžete vybrat Soubor konfigurace z rozevíracího seznamu a kliknout na tlačítko Upravit soubor konfigurace

    Upravit soubor konfigurace JS Lint
    Upravit soubor konfigurace JS Lint

    Změny provedené v nastavení serveru jsou uloženy a nový soubor .eslintrc.js je vytvořen v kořenovém adresáři webu, pokud není přítomen.

    Soubor .eslintrc.js se otevře v kořenovém adresáři webu pro úpravy. Další informace naleznete v pravidlech ESLint.

    Konfigurační soubor .eslintrc.js
    Konfigurační soubor .eslintrc.js

    Poznámka:

    • Nastavení verze ECMAScript definované v dialogovém okně nastavení webu má přednost před souborem .eslintrc.js použitým v kořenovém adresáři webu. 
    • Pokud soubor .eslintrc.js v nastaveních webu nepoužijete, aplikace Dreamweaver hledá soubor .eslintrc.js ve všech umístěních vyšší úrovně až po kořenový adresář. 

    Další informace o kaskádovém řazení a hierarchii konfiguračních souborů naleznete na webu ESLint.

Výsledky lintingu a panel výstupu

Výsledky lintingu, tedy chyby a varování, jsou uvedeny na panelu výstupu. Panel výstupu je v režimu dokování k dispozici ve spodní části všech výchozích pracovních ploch. Pokud je panel výstupu zavřený, můžete jej otevřít provedením jedné z následujících akcí:

  • Kliknutím na tlačítko s ikonou stavu lintingu ve stavovém řádku okna Dokument
  • Pomocí klávesové zkratky Shift + F6
  • Pomocí nabídky Okno > Výsledky > Výstup
Panel výstupu a ikona lintingu
Panel výstupu a ikona lintingu

Ikona lintingu na stavovém řádku popisuje výsledky lintingu:

  • Červená – aktuální dokument obsahuje chyby a varování.
  • Žlutá – aktuální dokument obsahuje pouze varování.
  • Zelená ikona – aktuální dokument neobsahuje žádné chyby.

Poznámka:

Pomocí ikony lintingu na stavovém řádku lze také přepínat panel výstupu (otevřít/zavřít), pokud je ikona červená nebo žlutá (ne zelená).

Řádky, které obsahují chyby, jsou zvýrazněny červeně a řádky s varováním žlutě. Dvojitým kliknutím na zprávu na panelu výstupu můžete přejít na řádek, na kterém došlo k chybě. V Zobrazení kódu můžete také umístit kurzor nad čísla chybných řádků a zobrazit náhled chyby nebo varování.

V panelu výstupu je uvedeno 50 zpráv najednou, chyby jsou uvedeny před varováními. Po opravení chyb se seznam v panelu posune a zobrazí další chybu.

Tato práce podléhá licenci Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Na příspěvky ze služeb Twitter™ a Facebook se nevztahují podmínky licence Creative Commons.

Právní upozornění   |   Zásady ochrany osobních údajů online