JSLint gemischte Leerzeichen und Tabulatoren Fehler

Question

Ich haben folgende durch JSLint laufen:

$(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); 
     }   
    }); 

}); 

Und sind immer diese Fehlermeldung:

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 

Nicht wirklich sicher, wie sie zu beheben?

Answer 1

Dieser Fehler tritt auf, wenn der Einzug eine Kombination aus Leerzeichen und Tabulatoren verwendet, z. B. {SPACE}{SPACE}{TAB}{SPACE} oder {TAB}{SPACE}{TAB}. Ich bin nicht wirklich sicher, warum es ein Fehler und keine Warnung ist, aber die Lösung besteht darin, die Zeile erneut zu besuchen und sicherzustellen, dass Sie nur Leerzeichen ODER Tabs verwenden.

Das Problem mit dem Mischen von Tabulatoren und Leerzeichen ist, dass Sie Probleme beim Einrücken haben könnten, wenn die Datei in einer anderen Anwendung angezeigt wird. Zum Beispiel kann ein Benutzer Registerkarten haben, die so konfiguriert sind, dass sie zwei Leerzeichen entsprechen, ein anderes kann die Datei des ersten Benutzers öffnen und ungleichmäßige Einrückung anzeigen, da zwei Leerzeichen plus eine Registerkarte 6 Leerzeichen im Gegensatz zu 4 in der ersten App entspricht. Die Verwendung des einen oder anderen gewährleistet eine bessere Lesbarkeit Ihres Codes.

Interessanterweise normalisiert Stack Overflow Registerkarten in 4 Leerzeichen, so dass das Kopieren und Einfügen Ihres Codes von hier zurück in JSLint das Problem behebt.

Answer 2

Sie können auch die in JSHint verfügbare Option "smarttabs" in Betracht ziehen (JSHint ist ein Ersatz für JSInt, einfach besser).

Dieser Artikel wirklich einsichtig ist, erklärt objektiv die in Registerkarten v Räume beteiligt Kompromissen (ich nicht erkennen, es war sogar so viel man zu dem Thema sagen könnte), und zeigt, wie Smart Tab Logik verhalten soll:

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

Grundsätzlich, wenn Sie Registerkarten für ‚Einbuchtung‘ verwenden Sie erlaubt Räume zu verwenden, um ‚Ausrichtung‘, solange alle Leerzeichen „nur für eine Ausrichtung verwendet“ werden, dh, dass sie durch die korrekte Zahl der Einbuchtung vorangestellt sind, tabs:

Welche macht dieses Code-Snippet legal ("---- >“Steht für eine TAB):

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

Sie können mit einer Datei '.jshintrc' nennt dies tun:

{ 
    "smarttabs": true 
} 

Oder Sie es im Quellcode mit einem Kommentar einstellen:

/*jslint smarttabs:true */ 

Oder Sie könnten gerade Tabs komplett ablegen ... (Religionskriege folgt).

Persönlich verwende ich JSHint, die ein abgeleitetes Projekt von JSLint mit wohl mehr Konfigurierbarkeit und dergleichen ist. Für die meisten Zwecke sind sie das gleiche Werkzeug. http://jshint.com/docs/#options. Ich würde es empfehlen. Die meisten Optionen sind den beiden Tools gemeinsam.

Ich verwende auch keine Tabs. Je. Angesichts der Wahl bin ich ein Zwei-Raum-Typ.