JSLint mixed spaces and tabs error

Question

I have run the following through 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);
        }           
    }); 

});

And am getting this 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

Not really sure how to fix?

Answer 1

This error occurs when your indentation uses a combination of both spaces and tabs, for example, {SPACE}{SPACE}{TAB}{SPACE} or {TAB}{SPACE}{TAB}. I'm not really sure why it's an error and not a warning, but the solution is to revisit the line and make sure you only use spaces OR tabs.

The problem with mixing tabs and spaces is you could run into indentation issues when the file is viewed in a different application. For instance, one user may have tabs configured to equal two spaces, another could open the first user's file and see uneven indentation because two spaces plus one tab equals 6 spaces as opposed to 4 in the first's app. Using one or the other ensures better readability of your code.

Interestingly enough, Stack Overflow normalizes tabs into 4 spaces, so copying and pasting your code from here back into JSLint fixes the problem.

Answer 2

You might also consider using the "smarttabs" option available in JSHint (JSHint is a drop-in replacement for JSLint, just better).

This article is really insightful, objectively explains the tradeoffs involved in tabs v spaces (I didn't realize there was even that much one could say on the subject), and demonstrates how smart tab logic should behave:

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

Basically, if you use tabs for 'indentation' you are allowed to use spaces for 'alignment' as long as any spaces are "used for alignment only", ie that they are preceeded by the correct number of indentation tabs:

Which makes this code snippet legal ("---->" represents a TAB):

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

You can do this with a file called '.jshintrc':

{
    "smarttabs": true
}

Or you can set it in the source code with a comment:

/*jslint smarttabs:true */

Or you could just ditch tabs entirely ... (religious war ensues).

Personally, I use JSHint which is a derivative project of JSLint with arguably more configurability and such. For most purposes, they are the same tool. http://jshint.com/docs/#options. I'd reccomend it. Most options are common between the two tools.

I also don't use tabs. Ever. Given the choice, I'm a two-spaces guy.