Specificate le regole di linting modificando i file di configurazione per HTML, CSS, modelli DW e JS. Per ulteriori informazioni, vedete Specificare regole per il linting.
Ultimo aggiornamento il
27 apr 2021
Eseguire la funzione Lint su file HTML, CSS, modelli DW e JS in Adobe Dreamweaver. Visualizzare errori e avvisi nel pannello Output del pannello e passare direttamente alle righe di codice errate con un singolo clic.
Che voi siate sviluppatori esperti o alle prime armi, possono sempre sfuggire degli errori nel codice, magari a causa della poca esperienza oppure per distrazione. Quando una pagina Web o anche solo una parte di una pagina non risulta esattamente come credevate, siete poi costretti a eseguire il debug del codice in cerca di errori di sintassi o errori logici. Il debug può essere un’attività impegnativa e richiedere molto tempo, soprattutto in presenza di implementazioni complesse.
Dreamweaver rende il debug del codice per gli errori più comuni un’attività semplice grazie al linting. Il linting è il processo di analisi del codice per trovare potenziali errori o utilizzi sospetti del codice. Tra gli elementi che la funzione lint in Dreamweaver aiuta a individuare vi sono errori di sintassi HTML, errori di analisi in CSS e avvisi nei file JavaScript.
Errori e avvisi vengono elencati in un pannello separato, il pannello Output, agganciato alla parte inferiore dell’area di lavoro. Ogni riga del pannello consente di passare alla parte del codice in cui si è verificato l’errore, rendendo più semplice individuare e correggere i problemi del codice. I numeri di riga del codice errato sono inoltre evidenziati in rosso per gli errori e in giallo per gli avvisi. Quando si passa con il mouse sul numero di riga evidenziato, viene visualizzata un’anteprima dell’errore o dell’avviso.
Con la funzione su modifica linting, gli errori e gli avvisi sono visualizzati contemporaneamente nel pannello di output durante la modifica dei codici.
Dreamweaver consente di eseguire questo comando sui file HTML (.htm e .html), CSS, modelli DW e JavaScript.
Per applicare il linting sul codice di questi file, effettuate le seguenti operazioni:
Attivate o disattivate il linting. È possibile procedere alla pulitura dei file durante la modifica, il caricamento o il salvataggio.
- Attivate o disattivate il linting utilizzando l’opzione Preferenze > Linting. Per ulteriori informazioni, vedete Abilitare il linting e impostare le preferenze.
Errori e avvisi rilevati nei file vengono visualizzati nel pannello Output. Per ulteriori informazioni, vedete Risultati del linting e pannello Output.
Abilitate il linting, su modifica linting e specificatene le regole
Fate clic su Modifica > Preferenze (Win) o Dreamweaver > Preferenze (Mac). Nell’elenco Categoria, fate clic su Linting, selezionate Attiva lint, quindi fate clic su Applica.
Su modifica Linting
In Dreamweaver, la funzione su modifica linting è attivata per impostazione predefinita. Per disattivarla, fate clic su Modifica > Preferenze (Win) o Dreamweaver > Preferenze (Mac). Nell'elenco delle categorie, fai clic su Linting, seleziona Linting durante la modifica e fai clic su Applica.
Specificare regole per il linting
Per applicare il linting a file HTML, CSS e JS, modificate le relative regole nei file di configurazione corrispondenti:
- HTML: DW.htmlhintrc
- CSS: DW.csslintrc
- JS: .eslintrc
Per accedere a questi file e modificarli, effettuate le seguenti operazioni:
Fate clic su Modifica > Preferenze (Win) o Dreamweaver > Preferenze (Mac).
Selezionate Lint nell’elenco Categoria.
Nella sezione Modifica set di regole, fate clic sul tipo di file desiderato, quindi su Applica modifiche immediatamente.
Il file di configurazione corrispondente verrà aperto in Dreamweaver.
Modificate o aggiungete le regole di linting nei file di configurazione. Per ulteriori informazioni sulle regole di linting, consultate la seguente documentazione :
- Lint HTML: https://github.com/yaniswang/HTMLHint/wiki/Rules
- Lint CSS: https://github.com/CSSLint/csslint/wiki/Rules
- JS Lint: https://eslint.org/docs/rules
In questi file di configurazione, potete anche impostare il tipo di errori o avvisi da visualizzare.
Nota
Il file di configurazione per le regole di linting per le versioni precedenti di Dreamweaver 19.0 è JS: DW.jshintrc. Potete consultare http://jshint.com/docs/options/
Linting di ECMAScript 6
Dreamweaver supporta la sintassi ECMAScript 6. Dreamweaver supporta anche il linting del codice ECMAScript, con ESLint definito come linter per JavaScript predefinito.
Fate clic su Sito > Gestisci siti.
Selezionate Impostazioni avanzate dal riquadro a sinistra della finestra di dialogo Configurazione sito.
Selezionate JS Lint da Impostazioni avanzate nel riquadro a sinistra.
Fai clic sull'elenco a discesa accanto a ECMAScript Version e scegli 3, 5 o 6. Dreamweaver utilizza il set di regole predefinito per la versione selezionata.
Per personalizzare l’insieme di regole, potete selezionare File di configurazione dall’elenco a discesa, quindi fate clic su Modifica file di configurazione.
Le modifiche apportate in Configurazione sito sono salvate e, se non disponibile, un nuovo .eslintrc.js è creato nella cartella principale.
Il file .eslintrc.js è aperto dalla cartella principale per essere modificato. Per ulteriori informazioni, consultate ESLint rules.
Nota
- L’impostazione Versione ECMAScript definita nella finestra di dialogo Configurazione sito ha la precedenza rispetto al file .eslintrc.js utilizzato nella cartella principale del sito.
- Se i file di configurazione ESLint non sono disponibili nel sito, Dreamweaver li cerca in tutti i percorsi che portano fino alla directory principale.
Per ulteriori informazioni sulla sequenza e sulla gerarchia dei file di configurazione, consultate il sito ESLint.
Risultati del linting e pannello Output
I risultati del linting, ovvero gli avvisi e gli errori, sono elencati nel pannello Output. Il pannello Output è agganciato alla parte inferiore di tutte le aree di lavoro predefinite. Se il pannello Output è chiuso, potete aprirlo effettuando una delle seguenti operazioni:
- Facendo clic sull’icona di stato del linting nella barra di stato della finestra del documento
- Utilizzando la scelta rapida da tastiera Maiusc + F6
- Tramite Finestra > Risultati > Output
L’icona del linting nella barra di stato indica i risultati dell’operazione:
Rosso - Il documento corrente presenta errori e avvertenze
Giallo - Il documento corrente presenta solo avvertenze
Verde - Il documento corrente non presenta errori
Nota
Potete inoltre utilizzare l’icona del linting nella barra di stato per attivare o disattivare il pannello Output (apertura/chiusura) se l’icona è rossa o gialla ma non quando è verde.
Le righe che contengono errori o avvisi vengono evidenziate rispettivamente in rosso e in giallo. Per passare direttamente a una riga contenente un errore, fate doppio clic sul relativo messaggio nel pannello Output. Nella vista Codice, potete anche far passare il mouse sui numeri di riga delle righe con errori per vedere un’anteprima dell’errore o dell’avviso.
Nel pannello Output sono elencati 50 messaggi alla volta con gli errori elencati prima degli avvisi. Dopo aver corretto gli errori, l’elenco nel pannello scorre per mostrare l’errore successivo.
Crea splendidi siti web con Dreamweaver
Progetta, codifica e gestisci siti web dinamici con un potente strumento completo.
