29
Яндекс

JSCS — архитектура, история и будущее — Олег Гайдаренко

  • Upload
    yandex

  • View
    129

  • Download
    4

Embed Size (px)

DESCRIPTION

Я расскажу о прошлом, настоящем и будущем JSCS. Что это за проект и зачем он нужен, как он дополняет стандартные инструменты, отчего стал популярен, какова его архитектура и особенности, чем он отличается от других статических анализаторов кода.

Citation preview

Page 1: JSCS — архитектура, история и будущее — Олег Гайдаренко

Яндекс

Page 2: JSCS — архитектура, история и будущее — Олег Гайдаренко

Я

JSCSархитектура, история и будущее

Гайдаренко Олег, Разработчик

Я.Субботник, Киев, 22.11.2014

ндекс

Page 3: JSCS — архитектура, история и будущее — Олег Гайдаренко

Что это и зачем это нужно?

3

JSCS

Page 4: JSCS — архитектура, история и будущее — Олег Гайдаренко

4

Page 5: JSCS — архитектура, история и будущее — Олег Гайдаренко

Например

a b a

5

function foo() var = 1;var = 2;return ;

Page 6: JSCS — архитектура, история и будущее — Олег Гайдаренко

JSHint

6

Page 7: JSCS — архитектура, история и будущее — Олег Гайдаренко

Тот же пример

a b a

7

function foo() var = 1;var = 2;return ;

Page 8: JSCS — архитектура, история и будущее — Олег Гайдаренко

JSCS

8

Page 9: JSCS — архитектура, история и будущее — Олег Гайдаренко

Правильно

a b a b

9

function foo() var = 1,

= 2;return + ;

Page 10: JSCS — архитектура, история и будущее — Олег Гайдаренко

Как надо “else statement” писать? Спробелами или без?

x

x

10

else ++;

// Или вот так?

else++;

Page 11: JSCS — архитектура, история и будущее — Олег Гайдаренко

А куда запятые ставить?

x one two

x one two

11

= : 1

, : 2;

// Или вот так

= : 1,: 2

;

Page 12: JSCS — архитектура, история и будущее — Олег Гайдаренко

А надо ли использовать «условиеЙоды»? Или запретить?

a

a

12

if (1 == ) return;

// Или вот так?

if ( == 1) return;

Page 13: JSCS — архитектура, история и будущее — Олег Гайдаренко

Марат (@mdevils) опубликовал пост во внутреннем блоге оинструменте для код-стайла

А в это время, в рассылке jQuery, велся довольно неинтересныйтред про соответствие код-стайлу

Мы хотели автоматизировать форматирование кода

но рабочих инструментов не существовало

и не существует до сих пор :-(

История

13

Page 14: JSCS — архитектура, история и будущее — Олег Гайдаренко

Angular, jQuery, Bootstrap, Grunt, etc;

Google, Яндекс, Wikimedia, Adobe, Twitter, etc;

Плагины для сборщиков – Grunt, Gulp, Broccoli, etc;

Плагины для редакторов кода – Atom, VIM, Sublime Text, WebStorm(из коробки), etc;

Используют

14

Page 15: JSCS — архитектура, история и будущее — Олег Гайдаренко

AST (Abstract Syntax Tree)

15

Архитектура

Page 16: JSCS — архитектура, история и будущее — Олег Гайдаренко

В JSHint

В JSCS

Код

“noempty”

“disallowEmptyBlocks”

16

if (true)

Page 17: JSCS — архитектура, история и будущее — Олег Гайдаренко

AST

17

"type": "IfStatement","test":

"type": "Literal","value": true,"raw": "true"

,"consequent":

"type": "BlockStatement","body": []

Page 18: JSCS — архитектура, история и будущее — Олег Гайдаренко

Проверка

file node node body length errors node loc end

18

.iterateNodesByType('BlockStatement', function( ) if ( . . === 0)

.add('Empty block found', . . );

);

Page 19: JSCS — архитектура, история и будущее — Олег Гайдаренко

Конфиг

19

Page 20: JSCS — архитектура, история и будущее — Олег Гайдаренко

Preset

20

"preset": "jquery"

Page 21: JSCS — архитектура, история и будущее — Олег Гайдаренко

Preset с вашими значениями

21

"preset": "jquery","maximumLineLength": 120

Page 22: JSCS — архитектура, история и будущее — Олег Гайдаренко

Preset с вашими значениями

22

"preset": "google","maximumLineLength": null

Page 23: JSCS — архитектура, история и будущее — Олег Гайдаренко

Новый конфиг, пресеты иавтофиксинг

23

Будущее

Page 24: JSCS — архитектура, история и будущее — Олег Гайдаренко

Конфиг

https://github.com/jscs-dev/node-jscs/issues/698

24

"blocks":

"curlyBraces": "require": "allExcept": [ "else" ]

,"newlineBefore":

"require": true

Page 25: JSCS — архитектура, история и будущее — Олег Гайдаренко

Пресеты

25

"preset": "jscs‑ваш‑конфиг"

Page 26: JSCS — архитектура, история и будущее — Олег Гайдаренко

Или

26

"plugin": "jscs‑ваш‑конфиг"

Page 27: JSCS — архитектура, история и будущее — Олег Гайдаренко

200 $27

Page 28: JSCS — архитектура, история и будущее — Олег Гайдаренко

Автоформаттер

https://github.com/jscs-dev/node-jscs/issues/516

28

Page 29: JSCS — архитектура, история и будущее — Олег Гайдаренко

Гайдаренко ОлегРазработчик

Контакты

@arkel @markelog