Eseguire la funzione Lint su file HTML, CSS 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.

Dreamweaver consente di eseguire questo comando sui file HTML (. htm e .html), CSS e JavaScript . Per applicare il linting sul codice di questi file, effettuate le seguenti operazioni:

  1. Specificate le regole di linting modificando i file di configurazione per HTML, CSS e JS. Per ulteriori informazioni, vedete Specificare regole per il linting.

  2. Attivate o disattivate il linting. Il linting può essere eseguito sui file in fase di caricamento o salvataggio. Per attivare/disattivare il linting, potete utilizzare 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 e specificatene le regole

Fate clic su Modifica > Preferenze (Win) o Dreamweaver > Preferenze (Mac). Selezionate Linting nell'elenco Categoria, quindi Attiva lint.

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:

  1. Fate clic su Modifica > Preferenze (Win) o Dreamweaver > Preferenze (Mac). 

  2. Selezionate Lint nell'elenco Categoria.

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

  4. Modificate o aggiungete le regole di linting nei file di configurazione. Per ulteriori informazioni sulle regole di linting, consultate la seguente documentazione :

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

  1. Fate clic su Sito > Gestisci siti.

    Finestra di dialogo Gestisci siti
    Selezionate il sito Web dalla finestra di dialogo Gestisci siti
  2. Selezionate Impostazioni avanzate dal riquadro a sinistra della finestra di dialogo Configurazione sito. 

  3. Selezionate JS Lint da Impostazioni avanzate nel riquadro a sinistra. 

    Potete fare clic sull’elenco a discesa accanto a Versione ECMAScript e selezionare 3, 5 o 6. Dreamweaver utilizza l’insieme di regole predefinite impostate per la versione selezionata. 

    Selezionate la versione di ECMAScript
    Selezionate la versione di ECMAScript
  4. Per personalizzare l’insieme di regole, potete selezionare File di configurazione dall’elenco a discesa, quindi fate clic su Modifica file di configurazione

    Modifica del file di configurazione di JS Lint
    Modifica del file di configurazione di JS Lint

    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

    File di configurazione .eslintrc.js
    File di configurazione .eslintrc.js

    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 il file .eslintrc.js non è utilizzato nelle impostazioni del sito, Dreamweaver cerca il file .eslintrc.js 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 di 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
Il pannello Output e l'icona del linting
Il pannello Output e l'icona del linting

L'icona del linting nella barra di stato indica i risultati dell'operazione:

  • Icona rossa: il documento corrente contiene errori e avvisi
  • Icona gialla: il documento corrente contiene solo avvisi
  • Icona verde: il documento corrente non contiene 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.

Questo prodotto è concesso in licenza in base alla licenza di Attribuzione-Non commerciale-Condividi allo stesso modo 3.0 Unported di Creative Commons.  I post su Twitter™ e Facebook non sono coperti dai termini di Creative Commons.

Note legali   |   Informativa sulla privacy online