[Tutorial] How to add JSHint code analisys to Cocos Code IDE with 'JSHint Eclipse' Extension

Editors and Tools Code IDE
#1

The default JavaScript validator included in Cocos Code IDE (Eclipse’s default) is somewhat lacking and rigid, so here I describe a way to add a very good plugin for static code analysis: JSHint

Installing and configuring

  1. Open Cocos Code IDE with a Cocos2d-JS project already created.
  2. Go to Help -> Eclipse Marketplace
  3. Search for “JSHint Eclipse”, install it (current version is 9.9.0) and restart the IDE
  4. Right click on your project and click on “Properties”
  5. Go to JSHint and under “Enable JSHint for these files and folders:” add entries:
    5.1. Files matching *.js in all folders
    5.2. Files matching *.json in all folders
    Example:
  6. Under “But exclude these files and folders from validation:” add entries:
    6.1. All files in folder docs including all subfolders (if yo do hve this folder of course)
    6.2. All files in folder frameworks including all subfolders
    6.3. All files in folder publish including all subfolders
    6.4. All files in folder runtime including all subfolders
    6.5. All files in folder tools including all subfolders
    Example:

The end result should look something like this:

bccaff842360468f.png638×556

You should now see a pretty list of Errors and Warnings in the “Problems” tab of Cocos Code IDE (as well as inline feedback as you type your code).

Using globals

You will notice that many of the warinings are 'x' is not defined. To avoid these errors include the line /*global x*/ at the top of the file where you are trying to access you global variable x.
I actually find this comftible, since I’m used to programming languages where you need to “include” other source files in order to be able to use the code in them without errors. The most common case will be cc.

Ignoring arbitrary code

If you have any code that you wish not to have analized by JSHint in your files, then simply surround it with /*jshint ignore:start*/ and /*jshint ignore:end*/.

More Configurations

In Windows/Preferences->JSHint you can place configurations in JSON format. And there’s plenty more inline configs (like the use of globals) that can be made. Further information about them can be found in JSHint’s official site.

I hope you like it :smiley:

PS: if you are including minified code from some other JS library, be sure yo exclude that file, since minified files don’t do well with JSHint validation!

Miscellaneous feedback on Cocos Code IDE
#2

Cool!Thanks for sharing!