JSLint spazi misti e le schede di errore

Question

ho eseguire il seguente attraverso JSLint:

$(document).ready(function() { 

    /* 
     Add paragraph on page load 
    */ 

    // Get all header elements 
    var header = document.getElementsByTagName('h1'), 
     parent, 
     newP, 
     text; 

    // Loop through the elements 
    for (var i=0, m = header.length; i < m; i++) { 
     parent = header[i].parentNode; 
     newP = document.createElement("p"); 
     text = document.createTextNode('This paragraph was inserted with JavaScript!'); 
     newP.appendChild(text); 
     // Insert the new P element after the header element in its parent node 
     parent.insertBefore(newP, header[i].nextSibling); 
    } 

    // so much easier with jQuery! 
    //$('.section > h1').after('<p>I am a new paragraph &amp; I have been added to the page with javascript!</p>'); 

    /* 
     Toggle show/hide 
    */ 

    // display show/hide link - hidden by default if JS disabled as functionality is not available 
    $('#content > .section > h2 > a').removeClass('hide'); 

    // hide What's new on page load - all content will be available if JS disabled 
    $('#content > .section > ul').addClass('hide'); 

    // show/hide content on click event 
    $('#content > .section > h2 > a').live('click',function() { 

     $('#content > .section > ul').toggle(); 

     return false; 

    }); 

    /* 
     JSON 
    */ 

    var $jsonURL = 'scripts/response.json'; 

    $.ajax({ 
     type: 'GET', 
     url: $jsonURL, 
     dataType: "json", 
     success: function(data){ 

      $.each(data.data, function(i, data){ 

       var $html = ''; 

       var $string = ''; 

       if (data.type == 'comment') { 
        $string = 'file'; 
       } else { 
        $string = 'workspace'; 
       } 

       $html += '<li class="' + data.type + '">'; 

       $html += '<strong>New ' + data.type + '</strong> was added to the ' + $string + ' '; 

       $html += '<a href="' + data.target + '">' + data.target + '</a> '; 

       $html += '<a href="' + data.workspace + '">' + data.workspace + '</a>'; 

       $html += ' by <a href="#">' + data.user + '</a>'; 

       $html += '</li>'; 

       $('#content > .section > ul').append($html);  

      }); 

     }, 
     error:function (xhr, ajaxOptions, thrownError){ 
      alert(xhr.status); 
      alert(thrownError); 
     }   
    }); 

}); 

e sto ottenendo questo errore:

Error: 

Problem at line 89 character 4: Mixed spaces and tabs. 

} 

Implied global: $ 1,31,34,37,39,51,57,81, document 1,8,16,17, alert 87,88 

Non realmente sicuro come risolvere il problema?

Answer 1

Questo errore si verifica quando il rientro utilizza una combinazione di spazi e tabulazioni, ad esempio {SPACE}{SPACE}{TAB}{SPACE} o {TAB}{SPACE}{TAB}. Non sono proprio sicuro del motivo per cui si tratta di un errore e non di un avvertimento, ma la soluzione è di rivisitare la linea e assicurarsi di utilizzare solo spazi o schede.

Il problema con le schede e gli spazi di missaggio è che si possono verificare problemi di indentazione quando il file viene visualizzato in un'applicazione diversa. Ad esempio, un utente può avere schede configurate per uguagliare due spazi, un altro potrebbe aprire il primo file dell'utente e vedere un rientro irregolare perché due spazi più una scheda equivalgono a 6 spazi rispetto a 4 nella prima app. L'utilizzo di uno o l'altro garantisce una migliore leggibilità del codice.

È interessante notare che Stack Overflow normalizza le schede in 4 spazi, quindi copiare e incollare il codice da qui in JSLint risolve il problema.

Answer 2

Si potrebbe anche considerare l'utilizzo dell'opzione "smarttabs" disponibile in JSHint (JSHint è una sostituzione drop-in per JSLint, solo meglio).

questo articolo è davvero penetranti, spiega oggettivamente i compromessi coinvolti nelle schede v spazi (non mi ero reso conto che c'era anche molto si potrebbe dire sull'argomento), e dimostra come la logica scheda intelligente dovrebbe comportarsi:

http://www.emacswiki.org/emacs/SmartTabs

in sostanza, se si utilizzano le schede per 'indentazione' si è permesso di usare spazi per 'allineamento' finchè gli spazi vengono "utilizzati solo per allineamento", cioè vengono preceduti dal numero corretto di indentazione schede:

Ciò rende questo snippet di codice legale ("---- >" Rappresenta un TAB):

function foo() { 
---->var a = 4, 
----> b = 5, 
----> c = 6; 
} 

Si può fare questo con un file chiamato '.jshintrc':

{ 
    "smarttabs": true 
} 

Oppure si può impostare nel codice sorgente con un commento:

/*jslint smarttabs:true */ 

Oppure si potrebbe semplicemente abbandonare le schede interamente ... (segue la guerra religiosa).

Personalmente, io uso JSHint che è un progetto derivato di JSLint con probabilmente più configurabilità e così via. Per la maggior parte degli scopi, sono lo stesso strumento. http://jshint.com/docs/#options. Lo consiglierei. La maggior parte delle opzioni sono comuni tra i due strumenti.

Inoltre non uso le schede. Mai. Data la scelta, sono un ragazzo a due spazi.