Granska kod

Lär dig kodgranska HTML-, CSS- och DW-mallar samt 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 pekaren över de markerade radnumren visas en förhandsgranskning av felet eller en varning.

Med hjälp av funktionen Linting vid redigering visas fel och varningar på utdatapanelen samtidigt som du redigerar koderna.

I Dreamweaver kan du kodgranska HTML-filer (.htm och .html), CSS-filer, DW-mallar och JavaScript-filer. 

Så här granskar du koden i filerna:

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

  2. Aktivera eller inaktivera linting. Du kan kodgranska filer när de redigeras, läses in eller sparas.

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

Aktivera linting, linting vid redigering och ange lintingregler

Klicka på Redigera > Inställningar (Win) eller Dreamweaver > Inställningar (Mac). I listan Kategori klickar du på Linting, väljer Aktivera linting och klickar på Tillämpa.

Linting vid redigering

I Dreamweaver är funktionen för linting vid redigering aktiverad som standard. Om du vill inaktivera den klickar du på Redigera > Inställningar (Win) eller Dreamweaver > Inställningar (Mac). I listan Kategori klickar du på Linting, väljer Linting vid redigering och klickar på Tillämpa.

Linting vid redigering

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 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-granskning.

  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 ESLint-konfigurationsfiler i platsinställningarna söker Dreamweaver efter konfigurationsfiler 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
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 – det finns inga 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 pekaren ö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.

Adobes logotyp

Logga in på ditt konto