Я.Субботник,  Киев,  5  мая  2012  года  

Разработчик  интерфейсов  Дмитрий  Щадей  

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

2  

Статический  анализатор  кода  JSLint  

—  Ищет  анти-­‐паттерны  в  вашем  коде  

—  Повышает  читаемость  кода  

—  Уменьшает  количество  багов  

—  Автор  Douglas  Crockford  ü  h_p://en.wikipedia.org/wiki/Douglas_Crockford  

3  

Наиболее  частые  кейсы  

4  

которую  мы  забыли  убрать  Отладочная  информация,  

function handler(e) { alert(‘clicked’); // clicked?!? if (e.keyCode === 13) { // Error: ‘console’ is

undefined в IE7 console.log(‘zzzzzzzzzzz’); }

}    

5  

в  конце  массивов  и  объектов  Лишние  запятые  

// 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  

которых  мы  не  ждали  Глобальные  переменные,    

var a b; // one more dead kitten for( i=0; len = items.length; i < len; i++ ) { /* killing spree */ }

7  

которые  мы  часто  делаем  Глупые  ошибки,  

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  

Проверка  Style  Guide-­‐ов  —  Обязательная  точка  с  запятой  

—  Все  переменные  объявляются  в  одном  операторе  var  

—  Обязательные  блоки  для  if,  while,  for    

—  Оператор  void  запрещен  

—  Конструкторы  пишутся  с  большой  буквы  

—  Табуляция  и  пробелы  

—   Strict  mode  

9  

Спорные  рекомендации  

10  

(function() { /* code */ }()  )

“Move  the  invocazon  into  the  parents  that  contain  the  

funczon”  

(function() { /* code */ }  )()

11  

if ( arg && arg.longMethodName ) { arg.doSomething();

}

“Expected  an  assignment  or  funczon  call  and  instead  saw  

an  expression”  

arg && arg.longMethodName && false && arg.longMethodName.doSomething();

12  

var i, items = {/* properties*/}; for (i in items) {

if (items.hasOwnProperty(i)){ /* code*/ }

}

“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*/ }

13  

Как  начать  использовать  JSLint?  

14  

консольный  клиент  Установить  JSLint  

$ sudo apt-get install nodejs $ sudo apt-get install npm $ npm install –g jslint

—  Используя  V8  

15  

—  Используя  SpiderMonkey  

$ sudo apt-get install jsl

Настроить  JSLint  —  Указать  допустимые  глобальные  переменные  

ü  jQuery,swfobject,BEM,  Modernizr  

ü  Шорткаты  :  -­‐-­‐browser,  -­‐-­‐node  

—  Отключить  не  нужные  вам  рекомендации  ü  Доступные  опции  :  h_p://www.jslint.com/lint.html  

16  

alias jslint=“jslint –predef=jQuery,swfobject,BEM, Modernizr –white –plusplus --passfail --browser --evil”

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

17  h_ps://github.com/metrofun/yasubbotnik  

Настроить  JSLint  

для  конкретного  файла  Настроить  JSLint  

/*global alert: false */ /*jslint evil: false */ alert(new Function("return 1;")());

Опции  можно  указывать  внутри  файлов.  

18  

на  pre-­‐commit  Сделать  git-­‐hook  

#!/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

19  

h_ps://github.com/metrofun/yasubbotnik  

еще  один  анализатор  JSHint  

—  Fork  JSLint-­‐а  ü  h_ps://github.com/jshint  

—  Community-­‐driven  

—  Больше  настроек  ü  h_p://www.jshint.com/opzons/  

 

20  

Питання,  пропозиції?  

21  

Разработчик  интерфейсов  

metrofun@yandex-­‐team.ru  

@metrofun  

vk.com/metrofun  

 

Дмитрий  Щадей