Дмитрий Щадей "Зачем и как мы используем jslint"
DESCRIPTION
Все знают, что «JSLint – статический анализатор кода», но никто не спешит его использовать в собственных проектах. В докладе рассказывается о том, каким образом и какой ценой он упростит вам жизнь. И разумеется, поставлен вопрос «почему» перед каждой jslint-овой ошибкой, а также рассматривается, как можно интегрировать JSLint в ваш проект.TRANSCRIPT
![Page 1: Дмитрий Щадей "Зачем и как мы используем jsLint"](https://reader030.vdocuments.site/reader030/viewer/2022012402/559ee98c1a28abd3618b4726/html5/thumbnails/1.jpg)
Я.Субботник, Киев, 5 мая 2012 года
Разработчик интерфейсов Дмитрий Щадей
Зачем и как мы используем JSLint
![Page 2: Дмитрий Щадей "Зачем и как мы используем jsLint"](https://reader030.vdocuments.site/reader030/viewer/2022012402/559ee98c1a28abd3618b4726/html5/thumbnails/2.jpg)
2
![Page 3: Дмитрий Щадей "Зачем и как мы используем jsLint"](https://reader030.vdocuments.site/reader030/viewer/2022012402/559ee98c1a28abd3618b4726/html5/thumbnails/3.jpg)
Статический анализатор кода JSLint
— Ищет анти-‐паттерны в вашем коде
— Повышает читаемость кода
— Уменьшает количество багов
— Автор Douglas Crockford ü h_p://en.wikipedia.org/wiki/Douglas_Crockford
3
![Page 4: Дмитрий Щадей "Зачем и как мы используем jsLint"](https://reader030.vdocuments.site/reader030/viewer/2022012402/559ee98c1a28abd3618b4726/html5/thumbnails/4.jpg)
Наиболее частые кейсы
4
![Page 5: Дмитрий Щадей "Зачем и как мы используем jsLint"](https://reader030.vdocuments.site/reader030/viewer/2022012402/559ee98c1a28abd3618b4726/html5/thumbnails/5.jpg)
которую мы забыли убрать Отладочная информация,
function handler(e) { alert(‘clicked’); // clicked?!? if (e.keyCode === 13) { // Error: ‘console’ is
undefined в IE7 console.log(‘zzzzzzzzzzz’); }
}
5
![Page 6: Дмитрий Щадей "Зачем и как мы используем jsLint"](https://reader030.vdocuments.site/reader030/viewer/2022012402/559ee98c1a28abd3618b4726/html5/thumbnails/6.jpg)
в конце массивов и объектов Лишние запятые
// 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
![Page 7: Дмитрий Щадей "Зачем и как мы используем jsLint"](https://reader030.vdocuments.site/reader030/viewer/2022012402/559ee98c1a28abd3618b4726/html5/thumbnails/7.jpg)
которых мы не ждали Глобальные переменные,
var a b; // one more dead kitten for( i=0; len = items.length; i < len; i++ ) { /* killing spree */ }
7
![Page 8: Дмитрий Щадей "Зачем и как мы используем jsLint"](https://reader030.vdocuments.site/reader030/viewer/2022012402/559ee98c1a28abd3618b4726/html5/thumbnails/8.jpg)
которые мы часто делаем Глупые ошибки,
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
![Page 9: Дмитрий Щадей "Зачем и как мы используем jsLint"](https://reader030.vdocuments.site/reader030/viewer/2022012402/559ee98c1a28abd3618b4726/html5/thumbnails/9.jpg)
Проверка Style Guide-‐ов — Обязательная точка с запятой
— Все переменные объявляются в одном операторе var
— Обязательные блоки для if, while, for
— Оператор void запрещен
— Конструкторы пишутся с большой буквы
— Табуляция и пробелы
— Strict mode
9
![Page 10: Дмитрий Щадей "Зачем и как мы используем jsLint"](https://reader030.vdocuments.site/reader030/viewer/2022012402/559ee98c1a28abd3618b4726/html5/thumbnails/10.jpg)
Спорные рекомендации
10
![Page 11: Дмитрий Щадей "Зачем и как мы используем jsLint"](https://reader030.vdocuments.site/reader030/viewer/2022012402/559ee98c1a28abd3618b4726/html5/thumbnails/11.jpg)
(function() { /* code */ }() )
“Move the invocazon into the parents that contain the
funczon”
(function() { /* code */ } )()
11
![Page 12: Дмитрий Щадей "Зачем и как мы используем jsLint"](https://reader030.vdocuments.site/reader030/viewer/2022012402/559ee98c1a28abd3618b4726/html5/thumbnails/12.jpg)
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
![Page 13: Дмитрий Щадей "Зачем и как мы используем jsLint"](https://reader030.vdocuments.site/reader030/viewer/2022012402/559ee98c1a28abd3618b4726/html5/thumbnails/13.jpg)
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
![Page 14: Дмитрий Щадей "Зачем и как мы используем jsLint"](https://reader030.vdocuments.site/reader030/viewer/2022012402/559ee98c1a28abd3618b4726/html5/thumbnails/14.jpg)
Как начать использовать JSLint?
14
![Page 15: Дмитрий Щадей "Зачем и как мы используем jsLint"](https://reader030.vdocuments.site/reader030/viewer/2022012402/559ee98c1a28abd3618b4726/html5/thumbnails/15.jpg)
консольный клиент Установить JSLint
$ sudo apt-get install nodejs $ sudo apt-get install npm $ npm install –g jslint
— Используя V8
15
— Используя SpiderMonkey
$ sudo apt-get install jsl
![Page 16: Дмитрий Щадей "Зачем и как мы используем jsLint"](https://reader030.vdocuments.site/reader030/viewer/2022012402/559ee98c1a28abd3618b4726/html5/thumbnails/16.jpg)
Настроить 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”
![Page 17: Дмитрий Щадей "Зачем и как мы используем jsLint"](https://reader030.vdocuments.site/reader030/viewer/2022012402/559ee98c1a28abd3618b4726/html5/thumbnails/17.jpg)
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
![Page 18: Дмитрий Щадей "Зачем и как мы используем jsLint"](https://reader030.vdocuments.site/reader030/viewer/2022012402/559ee98c1a28abd3618b4726/html5/thumbnails/18.jpg)
для конкретного файла Настроить JSLint
/*global alert: false */ /*jslint evil: false */ alert(new Function("return 1;")());
Опции можно указывать внутри файлов.
18
![Page 19: Дмитрий Щадей "Зачем и как мы используем jsLint"](https://reader030.vdocuments.site/reader030/viewer/2022012402/559ee98c1a28abd3618b4726/html5/thumbnails/19.jpg)
на 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
![Page 20: Дмитрий Щадей "Зачем и как мы используем jsLint"](https://reader030.vdocuments.site/reader030/viewer/2022012402/559ee98c1a28abd3618b4726/html5/thumbnails/20.jpg)
еще один анализатор JSHint
— Fork JSLint-‐а ü h_ps://github.com/jshint
— Community-‐driven
— Больше настроек ü h_p://www.jshint.com/opzons/
20
![Page 21: Дмитрий Щадей "Зачем и как мы используем jsLint"](https://reader030.vdocuments.site/reader030/viewer/2022012402/559ee98c1a28abd3618b4726/html5/thumbnails/21.jpg)
Питання, пропозиції?
21
![Page 22: Дмитрий Щадей "Зачем и как мы используем jsLint"](https://reader030.vdocuments.site/reader030/viewer/2022012402/559ee98c1a28abd3618b4726/html5/thumbnails/22.jpg)
Разработчик интерфейсов
metrofun@yandex-‐team.ru
@metrofun
vk.com/metrofun
Дмитрий Щадей