Lär dig hur du kodgranskar HTML-, CSS- och JS-filer i Adobe Dreamweaver. Visa fel och varningar i utdatapanelen och gå till de felaktiga kodraderna med ett enda klick.

Oavsett om du är en nybörjare eller en erfaren programmerare finns alltid en risk att det smyger in fel i koden. När det uppstår fel på en webbsida eller en del av en sida måste du felsöka koden och kontrollera om det finns syntaxfel eller logiska fel. Felsökning kan vara en mycket jobbig och tidskrävande process, särskilt i komplexa projekt.

I Dreamweaver kan du enkelt felsöka vanliga kodfel med hjälp av linting. Linting innebär att kod analyseras för att flagga potentiella fel eller misstänkt kodanvändning. HTML-syntaxfel, parsningsfel i CSS eller varningar i JavaScript-filer är några exempel på saker som flaggas vid linting i Dreamweaver.

Felen och varningarna visas på en separat panel, utdatapanelen, längst ned på arbetsytan. Du kan gå direkt till det ställe i koden där felet inträffade via respektive rad. På så sätt kan du snabbt och enkelt hitta och åtgärda koden. Den felaktiga kodens radnummer är markerade i rött (för fel) och gult (för varningar). Om du håller muspekaren över de markerade radnumren visas en förhandsgranskning av felet eller en varning.

I Dreamweaver kan du kodgranska HTML-filer (.htm och .html), CSS-filer och JavaScript-filer. Så här granskar du koden i filerna:

  1. Ange lintingregler genom att redigera HTML-, CSS- och JS-konfigurationsfilerna. Se Ange lintingregler om du vill ha mer information.

  2. Aktivera eller inaktivera linting. Du kan kodgranska (linta) filer när de läses in eller sparas. Aktivera/inaktivera linting genom att välja Inställningar > Linting. Se Aktivera linting och ange inställningar om du vill ha mer information.

Fel och varningar som påträffas i filerna visas på utdatapanelen. Se Lintingresultat och utdatapanelen om du vill ha mer information.

Aktivera linting och ange lintingregler

Klicka på Redigera > Inställningar (Win) eller Dreamweaver > Inställningar (Mac). Välj Linting i kategorilistan och välj sedan Aktivera linting.

Ange lintingregler

Du kan kodgranska HTML-, CSS- och JS-filer genom att redigera lintingreglerna i motsvarande konfigurationsfiler:

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

Så här öppnar och redigerar du de här filerna:

  1. Klicka på Redigera > Inställningar (Windows) eller Dreamweaver > Inställningar (Mac). 

  2. Välj Linting i listan Kategori.

  3. Klicka på önskad filtyp i avsnittet Redigera regeluppsättning och klicka sedan på Redigera och använd ändringar.

    Motsvarande konfigurationsfil öppnas i Dreamweaver.

  4. Redigera eller lägg till lintingregler i konfigurationsfilerna. Mer information om lintingregler finns i följande dokumentation:

    I de här konfigurationsfilerna kan du också ange vilken typ av fel eller varningar som ska visas. 

Obs!

Konfigurationsfilen för lintingregler i tidigare versioner av Dreamweaver CC 19.0 är JS: DW.jshintrc. Mer information finns i http://jshint.com/docs/options/

ECMAScript 6-linting

Dreamweaver har stöd för ECMAScript 6-syntax. Dreamweaver stöder även linting av ECMAScript-kod med ESLint som standard för JavaScript-linting.

  1. Klicka på Plats > Hantera platser.

    Dialogrutan Hantera platser
    Välj webbplats i dialogrutan Hantera platser
  2. Välj Avancerade inställningar på den vänstra sidan i dialogrutan Platskonfiguration. 

  3. Välj JS-lint i Avancerade inställningar i det vänstra fönstret. 

    Du kan klicka på listrutan bredvid ECMAScript-version och välja 3, 5 eller 6. Dreamweaver använder standardregeluppsättningen för den version du väljer. 

    Välj ECMAScript-version
    Välj ECMAScript-version
  4. Om du vill anpassa regeluppsättningen kan du välja Konfigurationsfil i listrutan och klicka på Redigera konfigurationsfil

    Redigera konfigurationsfil för JS-lint
    Redigera konfigurationsfil för JS-lint

    De ändringar du gör i Platskonfiguration sparas och en ny .eslintrc.js-fil skapas i platsens rotmapp om den inte redan finns.

    .Filen eslintrc.js öppnas för redigering i platsens rotmapp. Mer information finns i ESLint-regler

    .eslintrc.js-konfigurationsfil
    .eslintrc.js-konfigurationsfil

    Obs!

    • De ECMAScript-versionsinställningar som anges i dialogrutan för platskonfiguration åsidosätter .eslintrc.js-filen som används i platsens rotmapp. 
    • Om du inte använder .eslintrc.js-filen i platsinställningarna söker Dreamweaver efter .eslintrc.js-filen på alla platser som leder upp till rotkatalogen. 

    Mer information om struktur och hierarki för konfigurationsfiler finns på ESLint-webbplatsen.

Lintingresultat och utdatapanelen

Lintingresultaten (fel och varningar) visas på utdatapanelen. Utdatapanelen är tillgänglig i dockat läge längst ned på alla standardarbetsytor. Om utdatapanelen är stängd kan du öppna den på något av följande sätt:

  • Genom att klicka på ikonen för lintingstatus i statusfältet i dokumentfönstret
  • Med kortkommandot Skift+F6
  • Via Fönster > Resultat > Utdata
Utdatapanel och lintingikon
Utdatapanelen och lintingikonen

Lintingikonen i statusfältet anger lintingresultaten:

  • Röd – det finns fel och varningar i det aktuella dokumentet
  • Gul – det finns endast varningar i det aktuella dokumentet
  • Grön ikon anger att det inte finns några fel i dokumentet

Obs!

Du kan också öppna/stänga utdatapanelen via lintingikonen i statusfältet om ikonen är röd eller gul (inte grön).

Rader som innehåller fel eller varningar är markerade i rött respektive gult. Du kan dubbelklicka på ett meddelande på utdatapanelen om du vill gå till den rad där felet finns. I kodvyn kan du också hålla muspekaren över radnumren för de felaktiga raderna och se en förhandsgranskning av felet eller varningen.

I utdatapanelen visas 50 meddelanden åt gången och felen visas före varningarna. När du åtgärdar felen ändras listan i panelen och nästa fel visas.

Denna produkt är licensierad enligt en Creative Commons Erkännande-Ickekommersiell-Dela Lika 3.0 Unported-licens  Twitter™- och Facebook-inlägg omfattas inte av villkoren i Creative Commons-licensen.

Juridiska meddelanden   |   Onlinesekretesspolicy