Зачем	  и	  как	  мы	  используем	  JSLint	  Дмитрий	  Щадей	  Разработчик	  интерфейсов	  Я.Субботник,	  Киев,	  5	  мая	...
2	  
JSLint	  Статический	  анализатор	  кода	  —  Ищет	  анти-­‐паттерны	  в	  вашем	  коде	  —  Повышает	  читаемость	  кода	...
Наиболее	  частые	  кейсы	  4	  
Отладочная	  информация,	  которую	  мы	  забыли	  убрать	      function handler(e) {          alert(‘clicked’); // clicke...
Лишние	  запятые	  в	  конце	  массивов	  и	  объектов	      // Error: Expected identifier, string or    number    var foo...
Глобальные	  переменные, 	  	  которых	  мы	  не	  ждали	      var a        b; // one more dead kitten    for( i=0; len = ...
Глупые	  ошибки,	  которые	  мы	  часто	  делаем	      var a = 2, name = ‘Yandex’, misSpelledVar = 1, unusedVar;    if ( a...
Проверка	  Style	  Guide-­‐ов	  —  Обязательная	  точка	  с	  запятой	  —  Все	  переменные	  объявляются	  в	  одном	  оп...
Спорные	  рекомендации	  10	  
“Move	  the	  invocazon	  into	  the	  parents	  that	  contain	  the	  funczon”	    (function() { /* code */ }	  )()  (fu...
“Expected	  an	  assignment	  or	  funczon	  call	  and	  instead	  saw	  an	  expression”	  arg && arg.longMethodName && ...
“The	  body	  of	  a	  for	  in	  should	  be	  wrapped	  in	  an	  if	  statement	  to	  filter	  unwanted	  properzes	  f...
Как	  начать	  использовать	  JSLint?	  14	  
Установить	  JSLint	  консольный	  клиент	  —  Используя	  V8	     $ sudo apt-get install nodejs   $ sudo apt-get install ...
Настроить	  JSLint	  —  Указать	  допустимые	  глобальные	  переменные	           ü  jQuery,swfobject,BEM,	  Modernizr	  ...
Настроить	  JSLint	     JSLINT_DIRS ?= trunk vkfox-52   jslint: $(shell find $(JSLINT_DIRS) -name *.js)   %.js :          ...
Настроить	  JSLint	  для	  конкретного	  файла	  Опции	  можно	  указывать	  внутри	  файлов.	     /*global alert: false *...
Сделать	  git-­‐hook	  на	  pre-­‐commit	     #!/bin/sh –e   case "${1}” in          --about )                 echo "check...
JSHint	  еще	  один	  анализатор	  —  Fork	  JSLint-­‐а	           ü  h_ps://github.com/jshint	  —  Community-­‐driven	  ...
Питання,	  пропозиції?	  21	  
Дмитрий	  Щадей	  Разработчик	  интерфейсов	  	  metrofun@yandex-­‐team.ru	  @metrofun	  vk.com/metrofun	  	  
Upcoming SlideShare
Loading in …5
×

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

2,250 views
2,076 views

Published on

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

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,250
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
3
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Дмитрий Щадей "Зачем и как мы используем 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    

×