JSLint mixed spaces and tabs

Question

I ran 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 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 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 sure how to fix this?

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 sure why this is a mistake, not a warning, but the solution is to review the line and make sure that you only use spaces or tabs.

The problem with mixing tabs and spaces is that you can trigger indentation problems when the file is viewed in another application. For example, one user may have tabs set to equal two spaces, the other may open the first user file and see an uneven indent, because two spaces plus one tab is 6 spaces, not 4 in the first application. Using one or the other provides better readability of your code.

Interestingly, Qaru normalizes tabs to 4 spaces, so copying and pasting the code here back into JSLint fixes the problem.

Answer 2

You may also consider using the "smarttabs" option available in JSHint (JSHint is a replacement for JSLint, only better).

This article is really insightful, objectively explains the trade-offs associated with gaps v (I did not understand that there was even so much that could be said on this issue), and demonstrates how the intelligent logic of tabs should behave:

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

Basically, if you use tabs for "indentation", you are allowed to use spaces for "alignment", if any spaces "are used only for alignment", i.e. that they are preceded by the correct number of indent tabs:

What makes this piece of code legal ("---->" represents TAB):

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

You can do this with a file called .jshintrc:

 { "smarttabs": true } 

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

 /*jslint smarttabs:true */ 

Or you could just completely drop the tabs ... (a religious war sets in).

Personally, I use JSHint, which is a JSLint derivative project with possibly more configuration, etc. For most purposes, they are one and the same tool. http://jshint.com/docs/#options . I would recommend this. Most parameters are shared between two tools.

I also do not use tabs. Ever. Given the choice, I'm a guy with two spaces.