Пишем свои ESLint-правила

О себе

• Разработчик интерфейсов в Яндекс.Маркет 1,5 года
• Занимаюсь экспериментальными проектами
• 😍 ESLint

Цель доклада

• Зачем и как писать правила
• Поделиться опытом

План

1. Введение
2. Теория
3. Практика
4. Альтернативы
5. Выводы

План

1. Введение
2. Теория
3. Практика
4. Альтернативы
5. Выводы

ESLint

• Статический анализатор для линтинга кода
• Стандарт в разработке
• Гибкая конфигурация
• Возможность писать собственные правила

Популярные руководства

1. Airbnb JavaScript Style Guide (eslint-config-airbnb)
2. JavaScript Standard Style Guide (eslint-config-standard)
3. Google JavaScript Style Guide (eslint-config-google)
4. Idiomatic JavaScript Style Guide

Зачем писать свои правила?

1. Лучшие практики
   eslint-plugin-react eslint-plugin-jquery
   Hermione
2. Множество договоренностей, которые постоянно нарушаются
3. Помощь в разработке

План

1. Введение
2. Теория
3. Практика
4. Альтернативы
5. Выводы

Теория

1. Плагин
2. AST
3. Правило ESLint

Плагин

Модуль, который расширяет набор встроенных правил

Встроенные правила: no-var, no-tabs

eslint-plugin-react: react/jsx-uses-vars, react/display-name

Плагин

Создать плагин можно с помощью Yeoman генератора от ESLint
yo eslint:plugin

            eslint-plugin-market
                /docs
                /lib
                /tests
                package.json
        

Плагин

            module.exports = {
                rules: {
                    'no-only': {...},
                },
            };
        

Плагин

                module.exports = {
                    plugins: ['market'],
                    rules: {
                        'market/no-only': 'error',
                    },
                };
            

AST

AST — это древовидное представление абстрактной синтаксической структуры исходного кода. Каждый узел дерева обозначает конструкцию, встречающуюся в исходном коде.

Правила

Файл, содержащий условия, при котором ESLint сообщает о проблеме

            module.exports = {
                meta: {...},
                create(context) {...},
            };
        

            meta: {
                type: 'problem',
                docs: {
                     description: 'Function declarations are disallowed',
                     category: 'Possible Errors',
                },
                fixable: 'code',
                schema: [],
            },
        

            create(context) {
                return {
                    [selector](node) {
                        context.report ({...});
                    },
                };
            }
        

            create(context) {
                return {
                    [selector](node) {
                        context.report ({...});
                    },
                };
            }
        

            context: {
                id,
                options,
                report({...}),
                ... (опции парсера)
            }
        

            context: {
                id,
                options,
                report({...}),
                ... (опции парсера)
            }
        

            context.report({
                node,
                message: 'Don\'t use "only"',
                loc: {start: ..., end: ...},
                fix(fixer) {...},
            });
        

            create(context) {
                return {
                    [selector](node) {
                        context.report ({...});
                    },
                };
            }
        

Примеры селекторов

1. 'FunctionDeclaration', 'BinaryExpression'
2. 'ReturnStatement Literal[value = null]'
return null;
3. 'Identifier[name=/.*\d+$/]'
const picture2 = 'https://...'
4. 'FunctionDeclaration:nth-child(2)'

            create(context) {
                return {
                    [selector](node) {
                        context.report ({
                            node,
                            message: 'Don\'t use "only"',
                        });
                    },
                };
            }
        

План

1. Введение
2. Теория
3. Практика
4. Альтернативы
5. Выводы

            const {makeSuite} = require('ginny');
             
            module.exports = makeSuite('Проверка кнопки «Купить»', {
                id: 'market-215',
                test() {
                    return this.expect(this.button.name).toBe('Купить');
                },
            });
        

            const {makeSuite} = require('ginny');
             
            module.exports = makeSuite('Проверка кнопки «Купить» only', {
                id: 'market-215',
                test() {
                    return this.expect(this.button.name).toBe('Купить');
                },
            });
        

План

1. Введение
2. Теория
3. Практика
4. Альтернативы
5. Выводы

Альтернативы

1. no-restricted-syntax

                       'no-restricted-syntax': ['error', {
                         selector: 'ReturnStatement',
                         message: 'No return!',
                       }]
                   

2. Типизация

План

1. Введение
2. Теория
3. Практика
4. Альтернативы
5. Выводы

Выводы

1. Просто реализовать
2. Упрощает разработку
3. Соблюдаются договорённости

Контакты