JSLint espacios mixtos y las pestañas de error

Question

me han ejecute el siguiente través 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); 
     }   
    }); 

}); 

Y estoy consiguiendo este error:

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 

realidad, no seguro de cómo solucionarlo?

Answer 1

Este error ocurre cuando su sangría usa una combinación de espacios y pestañas, por ejemplo, {SPACE}{SPACE}{TAB}{SPACE} o {TAB}{SPACE}{TAB}. No estoy seguro de por qué es un error y no una advertencia, pero la solución es volver a visitar la línea y asegurarse de que solo utiliza espacios O pestañas.

El problema con la mezcla de pestañas y espacios es que podría encontrarse con problemas de indentación cuando el archivo se visualice en una aplicación diferente. Por ejemplo, un usuario puede tener pestañas configuradas para igualar dos espacios, otra podría abrir el primer archivo del usuario y ver una indentación desigual porque dos espacios más una pestaña equivalen a 6 espacios en lugar de 4 en la aplicación de la primera. Usar uno u otro asegura una mejor legibilidad de tu código.

Curiosamente, Stack Overflow normaliza las pestañas en 4 espacios, por lo que copiar y pegar el código desde aquí de nuevo en JSLint corrige el problema.

Answer 2

También podría considerar usar la opción "smarttabs" disponible en JSHint (JSHint es un reemplazo directo para JSLint, simplemente mejor).

este artículo es muy perspicaz, objetivamente explica las ventajas y desventajas involucradas en espacios pestañas V (no me di cuenta que era aún mucho que se puede decir sobre el tema), y demuestra cómo la lógica de pestañas inteligentes debe comportarse:

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

Básicamente, si utiliza pestañas para 'sangría' que está permitido el uso de los espacios de 'alineación', siempre y cuando los espacios son utilizados "por sólo la alineación", es decir, que están precedidos por el número correcto de la sangría pestañas:

Lo que hace que este fragmento de código sea legal ("---- >" Representa un TAB):

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

Usted puede hacer esto con un archivo llamado '.jshintrc':

{ 
    "smarttabs": true 
} 

O se puede establecer en el código fuente con un comentario:

/*jslint smarttabs:true */ 

O podría simplemente deshacerse de las pestañas por completo ... (se produce la guerra religiosa).

Personalmente, uso JSHint que es un proyecto derivado de JSLint con posiblemente más configurabilidad y tal. Para la mayoría de los propósitos, son la misma herramienta. http://jshint.com/docs/#options. Lo recomiendo. La mayoría de las opciones son comunes entre las dos herramientas.

Tampoco utilizo pestañas. Nunca. Dada la opción, soy un chico de dos espacios.