Ange lintingregler genom att redigera HTML-, CSS- och JS-konfigurationsfilerna och DW-mallarna. Se Ange lintingregler om du vill ha mer information.
Senast uppdaterad den
27 apr. 2021
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:
Aktivera eller inaktivera linting. Du kan kodgranska filer när de redigeras, läses in eller sparas.
- Aktivera eller inaktivera linting vid redigering 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, 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 kategorilistan klickar du på Linting, välja Vid redigering av linting och klicka på Använd.
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:
Klicka på Redigera > Inställningar (Windows) eller Dreamweaver > Inställningar (Mac).
Välj Linting i listan Kategori.
Klicka på önskad filtyp i avsnittet Redigera regeluppsättning och klicka sedan på Redigera och använd ändringar.
Motsvarande konfigurationsfil öppnas i Dreamweaver.
Redigera eller lägg till lintingregler i konfigurationsfilerna. Mer information om lintingregler finns i följande dokumentation:
- HTML-granskning: https://github.com/yaniswang/HTMLHint/wiki/Rules
- CSS-granskning: https://github.com/CSSLint/csslint/wiki/Rules
- JS-granskning: https://eslint.org/docs/rules
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.
Klicka på Plats > Hantera platser.
Välj Avancerade inställningar på den vänstra sidan i dialogrutan Platskonfiguration.
Välj JS Lint i Avancerade inställningar i det vänstra fönstret.
Du kan klicka på rullgardinsmenyn bredvid ECMAScript Version och välja 3, 5 eller 6. Dreamweaver använder standardregeluppsättningen för den version du väljer.
Om du vill anpassa regeluppsättningen kan du välja Konfigurationsfil i listrutan och klicka på Redigera konfigurationsfil.
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.
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.
Linting-resultat och Output panel
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
Lintingikonen i statusfältet anger lintingresultaten:
Röd - Det aktuella dokumentet har fel och varningar
Gul - Det aktuella dokumentet har endast varningar
Grön - Det aktuella dokumentet har inga fel
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.
Skapa snygga webbplatser i Dreamweaver
Designa, koda och hantera dynamiska webbplatser med ett kraftfullt allt-i-ett-verktyg.
