3.39M

Category:

programming

Качество кода

1.

Торшин Роман – Старший FE
разработчик
КАЧЕСТВО
КОДА
ESLINT
Ярмарка Мастеров - Практикум 2022
1

2.

Качество кода – что это?
Ярмарка Мастеров - Практикум 2022
2

3.

Основные принципы
KISS. KISS расшифровывается как «чем проще — тем лучше»
DRY. DRY означает «не повторяйся»
Для самостоятельного изучения: SOLID
Ярмарка Мастеров - Практикум 2022
3

4.

Способы контроля качества
■ Style Guide (стайл гайд), стандарт (ES6 / ECMAScript 2015)
■ Автоматическая проверка – ESLINT
■ Code Review
Ярмарка Мастеров - Практикум 2022
4

Style Guide (стайл гайд)
■ Описание принципов оформления и написания кода, синтаксиса. В компании
есть такие для разных языков программирования
■ HTML / Twig
■ SCSS
■ JS
■ …
Ярмарка Мастеров - Практикум 2022
5

6.

HTML/Twig
Ярмарка Мастеров - Практикум 2022
6

7.

Ярмарка Мастеров - Практикум 2022
7

8.

Ярмарка Мастеров - Практикум 2022
8

9.

Ярмарка Мастеров - Практикум 2022
9

10.

TWIG v.1.X
Ярмарка Мастеров - Практикум 2022
10

11.

Ярмарка Мастеров - Практикум 2022
11

12.

Ярмарка Мастеров - Практикум 2022
12

13.

Ярмарка Мастеров - Практикум 2022
13

14.

Ярмарка Мастеров - Практикум 2022
14

15.

Ярмарка Мастеров - Практикум 2022
15

16.

SCSS
Ярмарка Мастеров - Практикум 2022
16

17.

Ярмарка Мастеров - Практикум 2022
17

18.

Ярмарка Мастеров - Практикум 2022
18

19.

Ярмарка Мастеров - Практикум 2022
19

20.

Ярмарка Мастеров - Практикум 2022
20

21.

MIXIN
Ярмарка Мастеров - Практикум 2022
21

22.

Ярмарка Мастеров - Практикум 2022
22

23.

Ярмарка Мастеров - Практикум 2022
23

24.

Методология SCSS
■ https://ru.bem.info/methodology/css/
■ Также в компании есть сниппеты для переменных
цветов, размеров и т.п. для разных редакторов
Ярмарка Мастеров - Практикум 2022
24

25.

JS
Ярмарка Мастеров - Практикум 2022
25

26.

Ярмарка Мастеров - Практикум 2022
26

27.

Есть не адаптивная часть сайта, например, админ-панель. Она находится вне
видимости import общей сборки и придерживается старых стандартов.
Ярмарка Мастеров - Практикум 2022
27

28.

Ярмарка Мастеров - Практикум 2022
28

29.

Ярмарка Мастеров - Практикум 2022
29

30.

Ярмарка Мастеров - Практикум 2022
30

31.

Ярмарка Мастеров - Практикум 2022
31

32.

Ярмарка Мастеров - Практикум 2022
32

33.

Ярмарка Мастеров - Практикум 2022
33

34.

Ярмарка Мастеров - Практикум 2022
34

35.

Ярмарка Мастеров - Практикум 2022
35

36.

Ярмарка Мастеров - Практикум 2022
36

37.

Ярмарка Мастеров - Практикум 2022
37

38.

Ярмарка Мастеров - Практикум 2022
38

39.

ПОЛНЫЕ ГАЙДЫ БУДУТ
ВЫДАНЫ ДЛЯ
ИЗУЧЕНИЯ ПРИ
ТРУДОУСТРОЙСТВЕ
Ярмарка Мастеров - Практикум 2022
39

40.

Стандарт (ES6 / ECMAScript 2015)
■ Современные синтаксические возможности для упрощения решений и
повышения читаемости кода
JS ES6: https://habr.com/ru/post/460741/
■ Другие используемые стандарты:
HTML5, CSS3, Twig 1.X
Ярмарка Мастеров - Практикум 2022
40

41.

ESLINT – Автоматическая проверка
■ Инструмент статического анализа кода для выявления проблемных шаблонов,
обнаруженных в коде JavaScript
■ Строгое равенство (===, а не ==)
■ Неиспользуемые переменные
■ Магические числа
■ Константы в условиях
■ Сложные функции
И множество других правил:
https://eslint.org/docs/latest/rules/
Ярмарка Мастеров - Практикум 2022
41

42.

ESLINT – Запуск проверки
■ Для работы нужен Node JS (открываем консоль)
■ Команда:
node [ путь до ESLINT ][ пробел ][ путь до JS файла ]
■ Пример:
node ./node_modules/eslint ./js/template.js
Ярмарка Мастеров - Практикум 2022
42

43.

Code Review (Кодревью)
■ Проверка кода выполнения задачи перед тестированием, которую проводит
другой разработчик уровня «старший» и выше.
■ Комментарии – вопросы и замечания по коду или решению
■ Approve (Апрув) – подтверждение качества кода, которое позволяет перевести
задачу в тестирование
Ярмарка Мастеров - Практикум 2022
43