Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Дмитрий Щадей "Зачем и как мы используем jsLint"

2,399 views

Published on

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

Published in: Technology
  • Be the first to comment

Дмитрий Щадей "Зачем и как мы используем jsLint"

  1. 1. Зачем  и  как  мы  используем  JSLint  Дмитрий  Щадей  Разработчик  интерфейсов  Я.Субботник,  Киев,  5  мая  2012  года  
  2. 2. 2  
  3. 3. JSLint  Статический  анализатор  кода  —  Ищет  анти-­‐паттерны  в  вашем  коде  —  Повышает  читаемость  кода  —  Уменьшает  количество  багов  —  Автор  Douglas  Crockford   ü  h_p://en.wikipedia.org/wiki/Douglas_Crockford  3  
  4. 4. Наиболее  частые  кейсы  4  
  5. 5. Отладочная  информация,  которую  мы  забыли  убрать   function handler(e) { alert(‘clicked’); // clicked?!? if (e.keyCode === 13) { // Error: ‘console’ is undefined в IE7 console.log(‘zzzzzzzzzzz’); } }    5  
  6. 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. 7. Глобальные  переменные,    которых  мы  не  ждали   var a b; // one more dead kitten for( i=0; len = items.length; i < len; i++ ) { /* killing spree */ }7  
  8. 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); // undefined8  
  9. 9. Проверка  Style  Guide-­‐ов  —  Обязательная  точка  с  запятой  —  Все  переменные  объявляются  в  одном  операторе   var  —  Обязательные  блоки  для  if,  while,  for    —  Оператор  void  запрещен  —  Конструкторы  пишутся  с  большой  буквы  —  Табуляция  и  пробелы  —   Strict  mode  9  
  10. 10. Спорные  рекомендации  10  
  11. 11. “Move  the  invocazon  into  the  parents  that  contain  the  funczon”   (function() { /* code */ }  )() (function() { /* code */ }()  )11  
  12. 12. “Expected  an  assignment  or  funczon  call  and  instead  saw  an  expression”  arg && arg.longMethodName && false &&arg.longMethodName.doSomething();if ( arg && arg.longMethodName ) { arg.doSomething();}12  
  13. 13. “The  body  of  a  for  in  should  be  wrapped  in  an  if  statement  to  filter  unwanted  properzes  from  the  prototype”   var i, items = {/* properties*/}; for (i in items) { /* code*/ } var i, items = {/* properties*/}; for (i in items) { if (items.hasOwnProperty(i)){ /* code*/ } }13  
  14. 14. Как  начать  использовать  JSLint?  14  
  15. 15. Установить  JSLint  консольный  клиент  —  Используя  V8   $ sudo apt-get install nodejs $ sudo apt-get install npm $ npm install –g jslint—  Используя  SpiderMonkey   $ sudo apt-get install jsl15  
  16. 16. Настроить  JSLint  —  Указать  допустимые  глобальные  переменные   ü  jQuery,swfobject,BEM,  Modernizr   ü  Шорткаты  :  -­‐-­‐browser,  -­‐-­‐node  —  Отключить  не  нужные  вам  рекомендации   ü  Доступные  опции  :  h_p://www.jslint.com/lint.html   alias jslint=“jslint – predef=jQuery,swfobject,BEM, Modernizr – white –plusplus --passfail --browser -- evil”16  
  17. 17. Настроить  JSLint   JSLINT_DIRS ?= trunk vkfox-52 jslint: $(shell find $(JSLINT_DIRS) -name *.js) %.js : @echo "$*.js" @jslint --predef=jQuery,swfobject --bitwise --browser --confusion --evil --nomen --passfail --plusplus --regexp --sloppy --sub --white $*.js h_ps://github.com/metrofun/yasubbotnik  17  
  18. 18. Настроить  JSLint  для  конкретного  файла  Опции  можно  указывать  внутри  файлов.   /*global alert: false */ /*jslint evil: false */ alert(new Function("return 1;")());18  
  19. 19. Сделать  git-­‐hook  на  pre-­‐commit   #!/bin/sh –e case "${1}” in --about ) echo "check *.js files using jslint";; * ) for FILE in $(git diff --cached --diff- filter=ACMTR --name-only HEAD | grep -e .js$); do echo jslint $FILE jslint $FILE done;; esac h_ps://github.com/metrofun/yasubbotnik  19  
  20. 20. JSHint  еще  один  анализатор  —  Fork  JSLint-­‐а   ü  h_ps://github.com/jshint  —  Community-­‐driven  —  Больше  настроек   ü  h_p://www.jshint.com/opzons/    20  
  21. 21. Питання,  пропозиції?  21  
  22. 22. Дмитрий  Щадей  Разработчик  интерфейсов    metrofun@yandex-­‐team.ru  @metrofun  vk.com/metrofun    

×