View
1.991
Download
5
Category
Preview:
DESCRIPTION
Все знают, что «JSLint – статический анализатор кода», но никто не спешит его использовать в собственных проектах. В докладе рассказывается о том, каким образом и какой ценой он упростит вам жизнь. И разумеется, поставлен вопрос «почему» перед каждой jslint-овой ошибкой, а также рассматривается, как можно интегрировать JSLint в ваш проект.
Citation preview
Я.Субботник, Киев, 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
Дмитрий Щадей
Recommended