JSLint and JSLint

Transcript

1. JSLint & JSHint JSLint & JSHint
2. Code quality is an issue ▪ Any code base eventually becomes huge at some point. ▪ Simple mistakes can become showstoppers and waste hours of debugging. ▪ JavaScript has been developed in a rush ▪ JavaScript is loosely typed, values are typed, variables are not. ▪ Browser incompatibility is another source of bugs.
3. Browser incompatibility var episodes = [ "Episode 1", "Episode 2", "Episode 3", ];
4. Browser incompatibility var episodes = [ "Episode 1", "Episode 2", "Episode 3", ];
5. Static code analysis tools ▪ Static code analysis tools help to identify code issues against set code conventions and chosen code style without actually executing or running it ▪ Also known as “lint” tools after a CLint code analysis tool for C language. ▪ Linter scan the code and reports about commonly made mistakes and potential bugs. ▪ The potential problem could be a syntax error, a bug due to implicit type conversion, a leaking variable or something else
6. JSLint ▪ Code quality tool ▪ Identifies real and potential issues in JavaScript and JSON ▪ Enforces established coding conventions ▪ Written in JavaScript by Douglas Crockford ▪ First released in 2002 and still in active development Usage: ▪ Online tool at jslint.com ▪ From command line, e.g. using Node.js ▪ Plugins for NetBeans, Notepad++, Sublime, TextMate
7. jslint.com
8. JSLint options
9. All JSLint options supported: JSLint for Node.js $ npm install jslint -g $ jslint myfile.js #1 Use spaces, not tabs. ? require('./lib-cov/express') // Line 2, Pos #2 Expected ':' at column 5, not column 2. : require('./lib/express'); // Line 3, Pos 2 $ jslint --white --vars --regexp lib/color.js
10. Configuring JSLint options No global configuration file available. Options have to be set directly in a script: For Node.js: Better way: /*global require, module, __dirname */ /*jslint node: true */ /*jslint nomen: true, debug: true, evil: false, vars: true */
11. WARNING JSLint will hurt your feelings
12. JSLint is not very friendly... var func = function (a, b) { for (var i = 0; i < a.length; i++) { if (a[i] === b) { return i; } } return -1; };
13. JSLint is not very friendly... var func = function (a, b) { for (var i = 0; i < a.length; i++) { if (a[i] === b) { return i; } } return -1; }; Error: Problem at line 2 character 10: Move 'var' declarations to the top of the function. for (var i = 0; i < a.length; i++) { Problem at line 2 character 10: Stopping. (25% scanned).
14. JSHint ▪ Forked from JSLint to be a more developer-friendly code linter. ▪ Provides a better default validation rules ▪ Is easier to adjust for a particular coding style. ▪ Online tool at jshint.com. ▪ Also available as command-line tool via Node.js and as a plugin for various code editors
15. jshint.com
16. JSHint via Node.js $ npm install jshint -g $ jshint myscript.js myscript.js: line 10, col 39, Octal literals are not allowed in strict mode. 1 error
17. Configuring JSHint ▪ add to files as inline configuration ▪ specify the configuration file via the --config flag ▪ use a special file .jshintrc ▪ put config into in package.json file under the jshintConfig property
18. .jshintrc { // Settings "passfail" : false, "maxerr" : 100, // Predefined globals whom JSHint will ignore. "browser" : true, "node" : false, "jquery" : true, "predef" : [ // Custom globals. //"exampleVar", //"anotherlobal" ], // Development "debug" : false, "devel" : true, "es5" : true, "strict" : false, "globalstrict" : false } https://github.com/jshint/jshint/
19. jshintConfig in package.json { "name": "TestApp", "version": "0.0.2", "description": "TestApp", "dependencies": { "http-proxy": "0.10", "follow": "0.10", "request-json": "0.4", "request": "2", "async": "0.2", "docstate": "0.0.2" }, "jshintConfig": { "strict": true, "node": true } }
20. Conclusion Code linters: ▪ Easy to use ▪ Reduce debugging time ▪ Improve code quality ▪ Enforce common code style ▪ Make code easier to read ▪ Don’t detect memory leaks or replace code review
22. JSLint errors explained: jslinterrors.com
23. Questions?