javascript - script - sintaxis js online

JSLint error de espacios y pestañas mixtas

Question

He ejecutado lo siguiente a través de 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 recibiendo 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

No estoy seguro de cómo solucionarlo?

Answer 1

Este error ocurre cuando su sangría utiliza una combinación de espacios y tabulaciones, por ejemplo, {SPACE}{SPACE}{TAB}{SPACE} o {TAB}{SPACE}{TAB} . No estoy realmente 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 use espacios O tabulaciones.

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

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

Answer 2

También puede considerar el uso de la opción "smarttabs" disponible en JSHint (JSHint es un reemplazo directo para JSLint, simplemente mejor).

Este artículo es realmente perspicaz, explica de manera objetiva las ventajas y desventajas involucradas en las pestañas y los espacios (no me di cuenta de que hubiera algo que se pudiera decir sobre el tema), y demuestra cómo debe comportarse la lógica inteligente de las pestañas:

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

Básicamente, si usa las pestañas para la "sangría", se le permite usar espacios para la "alineación" siempre que los espacios se "utilicen solo para la alineación", es decir, que estén precedidos por el número correcto de pestañas de sangría:

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

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

Puedes hacer esto con un archivo llamado ''.jshintrc'':

{
    "smarttabs": true
}

O puedes configurarlo en el código fuente con un comentario:

/*jslint smarttabs:true */

O puedes simplemente deshacerte de las pestañas ... (se produce una 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 . Yo lo recomendaría. La mayoría de las opciones son comunes entre las dos herramientas.

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