Зачем и как мы используем JSlint

Все знают, что «JSLint — статический анализатор кода», но никто не спешит его использовать в собственных проектах. В докладе рассказывается о том, каким образом и какой ценой он упростит вам жизнь. И разумеется, поставлен вопрос «почему» перед каждой jslint-овой ошибкой, а также рассматривается, как можно интегрировать JSLint в ваш проект.

Transcript

1. Я.Субботник,  Киев,  5  апреля  2012  года   Разработчик  интерфейсов   Щадей  Дмитрий  Сергеевич   Зачем  и  как  мы  используем   JSLint  
3. Зачем  нам  JSLint?   3  
5. которую  мы  забыли  убрать   Отладочная  информация   5   function handler(e) { alert(‘clicked’); if (e.keyCode === 13) { // Error: ‘console’ us undefined console.log(‘zzzzzzzzzzz’); } }    
6. в  конце  массивов  и  объектов   Лишние  запятые   // Error: Expected identifier, string or number var foo = { a:'b', c:'d', e:'f’, }; // Bug in IE bar.length === 5 var bar = [1,2,3,4,]; 6  
7. которых  мы  не  создавали   Глобальные  переменные     if (false) { var result = 1; } else { result = 2 // dead kitten } var a b; // one more dead kitten for( i=0; len = items.length; i < len; i++ ) { /* killing spree */ } 7  
8. которые  все  постоянно  допускают   Глупые  ошибки   var a = 2, name = ‘Yandex’, misSpelledVar = 1, unusedVar; if ( a = ‘1’) { /* always fires */ } else { /* never fires */ } new RegExp(”^\s*" + name + “\s*$", "i"); //equals to /^s*Yandexs*$/I console.log(misSpeledVar); // undefined 8  
9. Проверка  Style  Guide-­‐ов   —  Обязательная  точка  с  запятой.   —  Все  переменные  объявляются  в  одном  операторе   var   —  Обязательные  блоки  для  if,  while,  for   —  Операторы  with,  void  запрещены   —  Конструкторы  пишутся  с  большой  буквы   —  Табуляция  и  пробелы   9  
10. Почему  JSLint    ругается?   10  
11. Combine  this  with  the  previous  'var'   statement.   Сообщения  JSLint-­‐а   11   var a = 1; console.log(a); var b; var a = 1, b;
12. Move  the  invoca`on  into  the  parens   that  contain  the  func`on.   Сообщения  JSLint-­‐а   12   (function() { /* code */ }  )() (function() { /* code */ }()  )
13. Expected  an  assignment  or  func`on   call  and  instead  saw  an  expression.   Сообщения  JSLint-­‐а   13   arg && arg.doSomething(); if ( arg ) { arg.doSomething(); }
14. Expected  a  condi`onal  expression  and   instead  saw  an  assignment.   Сообщения  JSLint-­‐а   14   var item,i, items = [/* values */]; for ( i = 0; item = items[i]; i++ ) { } var item,i, items = [/* values */]; for ( i = 0; i = items.length; i++ ) { item = items[i]; }
15. The  body  of  a  for  in  should  be   wrapped  in  an  if  statement  to  filter   unwanted  proper`es  from  the   prototype.   Сообщения  JSLint-­‐а   15   var i, items = {/* properties*/}; for (i in items) { /* code*/ } var i, items = {/* properties*/}; for (i in items) { if (items.hasOwnProperty(i){ /* code*/ } }
16. Как  начать  использовать   JSLint?   16  
17. консольный  клиент   Установить  JSLint   $ sudo apt-get install nodejs $ sudo apt-get install npm $ npm install –g jslint —  Используя  V8   17   —  Используя  SpiderMonkey   $ sudo apt-get install jsl
18. например  сделать  alias   Настроить  JSLint   18   alias jslint=“jslint –predef=jQuery,swfobject,BEM, Modernizr –white –plusplus --passfail --browser --evil”
19. для  конкретного  файла   Настроить  JSLint   Опции  можно  указывать  внутри  файлов.   19   /*global alert: false, confirm: false, console: false, Debug: false, opera: false, prompt: false, WSH: false */ /*jslint nomen: true, debug: true,evil: false, vars: true */ alert(new Function("return 1;")());
20. на  pre-­‐commit   Сделать  git-­‐hook   20   #!/bin/sh –e case "${1}” in --about ) echo "check *.js files using jshint";; * ) for FILE in $(git diff --cached --diff- filter=ACMTR --name-only HEAD | grep -e '\.js$'); do echo jshint $FILE jshint $FILE done;; esac
21. Питання,  пропозиції?   21  
22. Разработчик  интерфейсов   metrofun@yandex-­‐team.ru   @metrofun     Щадей  Дмитрий  Сергеевич