web-dev-qa-db-fra.com

Erreur d'espaces mélangés et d'onglets Jslint

J'ai exécuté ce qui suit via 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);
        }           
    }); 

});

Et je reçois cette erreur:

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

Pas vraiment sûr comment réparer?

javascriptjqueryjslint
23
RyanP13

Cette erreur se produit lorsque votre indentation utilise une combinaison des espaces et des onglets, par exemple, {SPACE}{SPACE}{TAB}{SPACE} ou {TAB}{SPACE}{TAB}. Je ne sais pas vraiment pourquoi c'est une erreur et non un avertissement, mais la solution consiste à revoir la ligne et à vous assurer que vous utilisez uniquement des espaces OR onglets.

Le problème avec les onglets et les espaces de mélange est que vous pourriez rencontrer des problèmes d'indentation lorsque le fichier est visualisé dans une application différente. Par exemple, un utilisateur peut avoir des onglets configurés pour égaler deux espaces, un autre pourrait ouvrir le premier fichier de l'utilisateur et voir une indentation inégale car deux espaces plus une onglet sont égaux à 6 espaces par opposition à 4 dans la première application. L'utilisation d'un ou de l'autre garantit une meilleure lisibilité de votre code.

Il est intéressant de noter que le débordement de la pile normalise les onglets dans 4 espaces, de la copie et de la collage de votre code à partir de ici Jslint fixe le problème.

34
Andy E

Vous pouvez également envisager d'utiliser l'option "SmartThabs" disponible dans JSHINT (JSHINT est un remplacement de chute de JSLINT, tout simplement mieux).

Cet article est vraiment perspicace, explique objectivement les compromis impliqués dans les espaces d'onglets V (je ne me suis pas réalisé qu'il y avait même que beaucoup pourraient dire sur le sujet) et démontre comment la logique de tabulation intelligente devrait se comporter:

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

Fondamentalement, si vous utilisez des onglets pour "indentation", vous êtes autorisé à utiliser des espaces pour "alignement" tant que tous les espaces sont "utilisés pour l'alignement uniquement", c'est-à-dire qu'ils sont précédés par le bon nombre d'onglets d'indentation:

Ce qui rend ce code cippet légal ("---->" représente une onglet):

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

Vous pouvez le faire avec un fichier appelé '.jshintrc':

{
    "smarttabs": true
}

Ou vous pouvez le définir dans le code source avec un commentaire:

/*jslint smarttabs:true */

Ou vous pouvez simplement faire des tabulations entièrement ... (La guerre de religion s'ensuit).

Personnellement, j'utilise JSHINT qui est un projet dérivé de JSlint avec sans doute plus de configurabilité et de tels. Pour la plupart des fins, ils sont le même outil. http://jshint.com/docs/#OPTIONS . Je le recommencerais. La plupart des options sont courantes entre les deux outils.

Je n'utilise pas non plus d'onglets. Déjà. Compte tenu du choix, je suis un gars à deux espaces.

11
Dave Dopson