Guida utente Annulla

Comando Lint

 

 

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:

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

  2. Attivate o disattivate il linting. È possibile procedere alla pulitura dei file durante la modifica, il caricamento o il salvataggio.

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 Categoria, fate clic su Linting, selezionate Su modifica Linting e fate clic su Applica.

Su modifica Linting

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

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.

Ottieni supporto in modo più facile e veloce

Nuovo utente?