jscs — архитектура, история и будущее — Олег Гайдаренко
DESCRIPTION
Я расскажу о прошлом, настоящем и будущем JSCS. Что это за проект и зачем он нужен, как он дополняет стандартные инструменты, отчего стал популярен, какова его архитектура и особенности, чем он отличается от других статических анализаторов кода.TRANSCRIPT
![Page 1: JSCS — архитектура, история и будущее — Олег Гайдаренко](https://reader030.vdocuments.pub/reader030/viewer/2022020116/5594a4a51a28abd1158b45ad/html5/thumbnails/1.jpg)
Яндекс
![Page 2: JSCS — архитектура, история и будущее — Олег Гайдаренко](https://reader030.vdocuments.pub/reader030/viewer/2022020116/5594a4a51a28abd1158b45ad/html5/thumbnails/2.jpg)
Я
JSCSархитектура, история и будущее
Гайдаренко Олег, Разработчик
Я.Субботник, Киев, 22.11.2014
ндекс
![Page 3: JSCS — архитектура, история и будущее — Олег Гайдаренко](https://reader030.vdocuments.pub/reader030/viewer/2022020116/5594a4a51a28abd1158b45ad/html5/thumbnails/3.jpg)
Что это и зачем это нужно?
3
JSCS
![Page 4: JSCS — архитектура, история и будущее — Олег Гайдаренко](https://reader030.vdocuments.pub/reader030/viewer/2022020116/5594a4a51a28abd1158b45ad/html5/thumbnails/4.jpg)
4
![Page 5: JSCS — архитектура, история и будущее — Олег Гайдаренко](https://reader030.vdocuments.pub/reader030/viewer/2022020116/5594a4a51a28abd1158b45ad/html5/thumbnails/5.jpg)
Например
a b a
5
function foo() var = 1;var = 2;return ;
![Page 6: JSCS — архитектура, история и будущее — Олег Гайдаренко](https://reader030.vdocuments.pub/reader030/viewer/2022020116/5594a4a51a28abd1158b45ad/html5/thumbnails/6.jpg)
JSHint
6
![Page 7: JSCS — архитектура, история и будущее — Олег Гайдаренко](https://reader030.vdocuments.pub/reader030/viewer/2022020116/5594a4a51a28abd1158b45ad/html5/thumbnails/7.jpg)
Тот же пример
a b a
7
function foo() var = 1;var = 2;return ;
![Page 8: JSCS — архитектура, история и будущее — Олег Гайдаренко](https://reader030.vdocuments.pub/reader030/viewer/2022020116/5594a4a51a28abd1158b45ad/html5/thumbnails/8.jpg)
JSCS
8
![Page 9: JSCS — архитектура, история и будущее — Олег Гайдаренко](https://reader030.vdocuments.pub/reader030/viewer/2022020116/5594a4a51a28abd1158b45ad/html5/thumbnails/9.jpg)
Правильно
a b a b
9
function foo() var = 1,
= 2;return + ;
![Page 10: JSCS — архитектура, история и будущее — Олег Гайдаренко](https://reader030.vdocuments.pub/reader030/viewer/2022020116/5594a4a51a28abd1158b45ad/html5/thumbnails/10.jpg)
Как надо “else statement” писать? Спробелами или без?
x
x
10
else ++;
// Или вот так?
else++;
![Page 11: JSCS — архитектура, история и будущее — Олег Гайдаренко](https://reader030.vdocuments.pub/reader030/viewer/2022020116/5594a4a51a28abd1158b45ad/html5/thumbnails/11.jpg)
А куда запятые ставить?
x one two
x one two
11
= : 1
, : 2;
// Или вот так
= : 1,: 2
;
![Page 12: JSCS — архитектура, история и будущее — Олег Гайдаренко](https://reader030.vdocuments.pub/reader030/viewer/2022020116/5594a4a51a28abd1158b45ad/html5/thumbnails/12.jpg)
А надо ли использовать «условиеЙоды»? Или запретить?
a
a
12
if (1 == ) return;
// Или вот так?
if ( == 1) return;
![Page 13: JSCS — архитектура, история и будущее — Олег Гайдаренко](https://reader030.vdocuments.pub/reader030/viewer/2022020116/5594a4a51a28abd1158b45ad/html5/thumbnails/13.jpg)
Марат (@mdevils) опубликовал пост во внутреннем блоге оинструменте для код-стайла
А в это время, в рассылке jQuery, велся довольно неинтересныйтред про соответствие код-стайлу
Мы хотели автоматизировать форматирование кода
но рабочих инструментов не существовало
и не существует до сих пор :-(
История
13
![Page 14: JSCS — архитектура, история и будущее — Олег Гайдаренко](https://reader030.vdocuments.pub/reader030/viewer/2022020116/5594a4a51a28abd1158b45ad/html5/thumbnails/14.jpg)
Angular, jQuery, Bootstrap, Grunt, etc;
Google, Яндекс, Wikimedia, Adobe, Twitter, etc;
Плагины для сборщиков – Grunt, Gulp, Broccoli, etc;
Плагины для редакторов кода – Atom, VIM, Sublime Text, WebStorm(из коробки), etc;
Используют
14
![Page 15: JSCS — архитектура, история и будущее — Олег Гайдаренко](https://reader030.vdocuments.pub/reader030/viewer/2022020116/5594a4a51a28abd1158b45ad/html5/thumbnails/15.jpg)
AST (Abstract Syntax Tree)
15
Архитектура
![Page 16: JSCS — архитектура, история и будущее — Олег Гайдаренко](https://reader030.vdocuments.pub/reader030/viewer/2022020116/5594a4a51a28abd1158b45ad/html5/thumbnails/16.jpg)
В JSHint
В JSCS
Код
“noempty”
“disallowEmptyBlocks”
16
if (true)
![Page 17: JSCS — архитектура, история и будущее — Олег Гайдаренко](https://reader030.vdocuments.pub/reader030/viewer/2022020116/5594a4a51a28abd1158b45ad/html5/thumbnails/17.jpg)
AST
17
"type": "IfStatement","test":
"type": "Literal","value": true,"raw": "true"
,"consequent":
"type": "BlockStatement","body": []
![Page 18: JSCS — архитектура, история и будущее — Олег Гайдаренко](https://reader030.vdocuments.pub/reader030/viewer/2022020116/5594a4a51a28abd1158b45ad/html5/thumbnails/18.jpg)
Проверка
file node node body length errors node loc end
18
.iterateNodesByType('BlockStatement', function( ) if ( . . === 0)
.add('Empty block found', . . );
);
![Page 19: JSCS — архитектура, история и будущее — Олег Гайдаренко](https://reader030.vdocuments.pub/reader030/viewer/2022020116/5594a4a51a28abd1158b45ad/html5/thumbnails/19.jpg)
Конфиг
19
![Page 20: JSCS — архитектура, история и будущее — Олег Гайдаренко](https://reader030.vdocuments.pub/reader030/viewer/2022020116/5594a4a51a28abd1158b45ad/html5/thumbnails/20.jpg)
Preset
20
"preset": "jquery"
![Page 21: JSCS — архитектура, история и будущее — Олег Гайдаренко](https://reader030.vdocuments.pub/reader030/viewer/2022020116/5594a4a51a28abd1158b45ad/html5/thumbnails/21.jpg)
Preset с вашими значениями
21
"preset": "jquery","maximumLineLength": 120
![Page 22: JSCS — архитектура, история и будущее — Олег Гайдаренко](https://reader030.vdocuments.pub/reader030/viewer/2022020116/5594a4a51a28abd1158b45ad/html5/thumbnails/22.jpg)
Preset с вашими значениями
22
"preset": "google","maximumLineLength": null
![Page 23: JSCS — архитектура, история и будущее — Олег Гайдаренко](https://reader030.vdocuments.pub/reader030/viewer/2022020116/5594a4a51a28abd1158b45ad/html5/thumbnails/23.jpg)
Новый конфиг, пресеты иавтофиксинг
23
Будущее
![Page 24: JSCS — архитектура, история и будущее — Олег Гайдаренко](https://reader030.vdocuments.pub/reader030/viewer/2022020116/5594a4a51a28abd1158b45ad/html5/thumbnails/24.jpg)
Конфиг
https://github.com/jscs-dev/node-jscs/issues/698
24
"blocks":
"curlyBraces": "require": "allExcept": [ "else" ]
,"newlineBefore":
"require": true
![Page 25: JSCS — архитектура, история и будущее — Олег Гайдаренко](https://reader030.vdocuments.pub/reader030/viewer/2022020116/5594a4a51a28abd1158b45ad/html5/thumbnails/25.jpg)
Пресеты
25
"preset": "jscs‑ваш‑конфиг"
![Page 26: JSCS — архитектура, история и будущее — Олег Гайдаренко](https://reader030.vdocuments.pub/reader030/viewer/2022020116/5594a4a51a28abd1158b45ad/html5/thumbnails/26.jpg)
Или
26
"plugin": "jscs‑ваш‑конфиг"
![Page 27: JSCS — архитектура, история и будущее — Олег Гайдаренко](https://reader030.vdocuments.pub/reader030/viewer/2022020116/5594a4a51a28abd1158b45ad/html5/thumbnails/27.jpg)
200 $27
![Page 28: JSCS — архитектура, история и будущее — Олег Гайдаренко](https://reader030.vdocuments.pub/reader030/viewer/2022020116/5594a4a51a28abd1158b45ad/html5/thumbnails/28.jpg)
Автоформаттер
https://github.com/jscs-dev/node-jscs/issues/516
28
![Page 29: JSCS — архитектура, история и будущее — Олег Гайдаренко](https://reader030.vdocuments.pub/reader030/viewer/2022020116/5594a4a51a28abd1158b45ad/html5/thumbnails/29.jpg)
Гайдаренко ОлегРазработчик
Контакты
@arkel @markelog