ESLint - инструмент, который найдет ошибки, до того, как они проявились

• Василий Ванчук, инженер-менеджер компании "Болт", рассказывает о себе.  

• Увлекся программированием после школы, последние 10 лет разрабатывает на JavaScript.  

• Участник сообществ и конференций, руководитель курса JavaScript в "Потусе" и преподаватель на курсе React.  

• Тема вебинара - инструмент ESLint.  

• Василий объясняет, что такое ESLint, зачем он нужен и как им пользоваться.  

• План вебинара: знакомство, рассказ о "Потусе", объяснение ESLint, команда курса, программа, проверка домашних заданий, востребованность профессии JavaScript-разработчика, итоги.  

• Призыв к активному участию и обратной связи.  

• Возможность задавать вопросы в чат или голосом через Zoom.  

• Василий рассказывает, как попал в "Потус".  

• Начал с курсов для тимлидов, затем курсы по архитектуре.  

• На конференции "Холли Жест" встретил менеджера, который предложил участвовать в создании курса JavaScript.  

• Василий продолжает учиться и преподавать, несмотря на занятость.  

• Миссия проекта - образование для повышения качества жизни.  

• Курсы на ОТУС утилитарны и помогают улучшить работу, заработок или сменить профессию.  

• Курсы ориентированы на специалистов среднего и высокого уровня и являются курсами повышения квалификации или профессиональной переподготовки.  

• Можно выстроить линейку курсов от старта до мидл или синего уровня, но рекомендуется делать перерывы между курсами.  

• ОТУС существует на рынке образования уже пять лет и был признан лучшим проектом в сфере образования.  

• В ОТУС около пятисот преподавателей и наставников, много тысяч студентов и множество образовательных программ.  

• Тема вебинара: использование ESLint в работе JavaScript разработчика.  

• Ожидаемые результаты: понимание, зачем нужен ESLint и как его установить для локальной работы.  

• ESLint происходит от инструмента, который проверял код на переносимость между платформами.  

• ESLint помогает выявлять ошибки и предупреждения в коде, что делает его полезным для разработчиков.  

• ESLint проверяет синтаксическую корректность кода, что особенно важно для скриптовых языков.  

• ESLint помогает проверять использование допустимых конструкций и форматировать код для единообразия.  

• Пример функции для проверки палиндрома, показывающий, что один и тот же код может быть написан по-разному.  

• Форматирование кода важно для его читаемости и понимания.  

• ESLint помогает рано узнавать о проблемах в коде.  

• Код должен быть легко читаемым, что достигается через форматирование.  

• ESLint позволяет формализовать требования к коду и избежать споров в команде.  

• Линтеры существуют для разных языков, включая HTML, CSS и JavaScript.  

• Примеры линтеров для HTML: Beautify, Ahtim Lit и Prettier.  

• Для CSS: Style, который позволяет задавать правила стилей.  

• В JavaScript есть несколько линтеров: JSLint, ESLint.  

• ESLint является самым свежим и конфигурируемым.  

• Можно использовать несколько линтеров одновременно, если они не конфликтуют.  

• Линтеры защищают от опечаток и ошибок, связанных с грамматикой.  

• Они могут предупреждать о некорректных именах и спорных конструкциях.  

• Пример: оператор сравнения в JavaScript ведет себя неочевидно, и линтеры могут запрещать его использование.  

• Линтеры могут расставлять пробелы, переносить скобки и проверять правила именования.  

• Пример: переменные и функции с булевыми значениями должны начинаться с префикса "is".  

• Линтеры могут запрещать использование синтаксически корректных, но не принятых в команде конструкций.  

• Линтеры помогают обнаруживать ошибки, связанные с зависимостями и параметрами функций.  

• Пример: использование неподключенных файлов или перекрытие значений переменных.  

• Линтеры могут автоматически исправлять ошибки, определенные правилами.  

• ESLint был создан в 2013 году Николасом Закосом.  

• Цель: создать гибкий и конфигурируемый инструмент для проверки кода.  

• ESLint поддерживает широкий набор правил и имеет официальный сайт с документацией и песочницей.  

• ESLint поддерживает множество правил, которые можно найти в документации.  

• Правила описывают, почему они появились, и приводят примеры хорошего и плохого кода.  

• Некоторые правила могут автоматически исправлять ошибки.  

• Плагины позволяют ESLint работать с разными языками и добавлять описание ключевых слов.  

• Пример: плагины для работы с TypeScript и шаблонизаторами.  

• На npm.com можно найти множество плагинов для ESLint.  

• Некоторые редакторы поддерживают ESLint из коробки.  

• Для популярных редакторов, таких как WebStorm и Atom, есть специальные плагины.  

• Плагины используют локальную конфигурацию ESLint.  

• ESLint позволяет проверять код в редакторе и автоматически форматировать файлы.  

• Можно настроить редактор для автоматического форматирования при сохранении файла.  

• ESLint доступен на сайте и в песочнице для тестирования правил.  

• ESLint выявляет ошибки, такие как неиспользуемые константы и функции.  

• Правила ESLint помогают избежать ошибок, которые могут запутать программиста.  

• ESLint может предупреждать о недопустимых использованиях глобальных объектов.  

• CodeSonar позволяет писать код и проверять его на ошибки.  

• ESLint предупреждает о неиспользуемых переменных и функциях.  

• CodeSonar автоматически форматирует код с помощью ESLint.  

• Валидатор JavaScript проверяет код на соответствие правилам ESLint.  

• Можно использовать готовые конфигурации, такие как Airbnb и Google.  

• Валидатор помогает проверить, как ESLint работает с кодом.  

• Примеры реального кода студентов показывают, как ESLint помогает избежать ошибок.  

• Студент столкнулся с проблемой при запуске тестов из-за неправильного использования ESLint.  

• ESLint помогает выявить и исправить ошибки в коде, что экономит время и усилия разработчиков.  

• Определение переменных и их инициализация.  

• Использование механизма замыканий для доступа к переменным внутри функций.  

• Создание объектов перед каждым тестом.  

• Использование ключевого слова let для создания новых переменных.  

• Удаление старых переменных сборщиком мусора.  

• Исправление проблемы после удаления let.  

• Проблема с функцией, которая не возвращала результат.  

• Объявление функции с параметром, который совпадает с другим параметром.  

• Ошибка из-за использования одинаковых имен для разных аргументов.  

• Правило NoShadows помогает избежать ошибок с одинаковыми именами переменных.  

• Важность анализа кода для выявления таких ошибок.  

• Примеры простых правил, которые помогают избежать ошибок.  

• Установка Node.js и переход на сайт ESLint.  

• Создание нового проекта с помощью npm init -y.  

• Инициализация проекта и настройка конфигурации ESLint.  

• Выбор параметров конфигурации: проверка синтаксиса, нахождение проблем, контроль стиля кодирования.  

• Выбор системы модулей и фреймворков.  

• Настройка среды исполнения кода и стиля кодирования.  

• Установка необходимых пакетов для работы ESLint.  

• Добавление зависимостей в package.json.  

• Создание директории node_modules и файлов для запуска скриптов.  

• Утилита npm позволяет упростить запуск скриптов.  

• Пример использования: npm run eslit-lint.  

• npm находит и запускает скрипты из директории node_modules.  

• Создание файла с исходным кодом.  

• Запуск ESLint для проверки кода.  

• ESLint находит ошибки и предупреждения.  

• Ошибки могут быть исправлены с помощью флага --fix.  

• Пример исправления ошибок в файле.  

• ESLint форматирует код и заменяет двойные кавычки на одинарные.  

• Определение скриптов в package.json для ESLint.  

• Пример скрипта для проверки кода и исправления ошибок.  

• Возможность добавления дополнительных инструментов в скрипты.  

• Настройка правил ESLint для использования импортов и экспортов.  

• Возможность переопределения правил для конкретных файлов.  

• Использование комментариев для отключения правил.  

• Описание курса на сайте Tutor.  

• Программа курса включает изучение основ языка и инструментов.  

• Преподаватели курса специализируются на разных темах.  

• Стартовый модуль: работа с языком и инструментами.  

• Модуль по созданию стилизации страниц.  

• Модуль по TypeScript и паттернам разработки на JavaScript.  

• Включает работу с клиентским роуингом и шаблонизаторами.  

• Подводит к модулю по разработке на React.  

• Модуль по React.  

• Модуль по основам разработки на Node.js.  

• Вспомогательный модуль по сопровождению кода и оформлению работы.  

• Проектная работа в конце курса.  

• Востребованность фронтенд и Full Stack разработчиков.  

• Курсы по TypeScript, JavaScript и React.  

• Средняя зарплата и требования к вакансиям.  

• Набор технологий, требуемых от разработчиков.  

• Сравнение технологий с программой курса.  

• Примеры вакансий и их требования.  

• Вопросы по листингу и линтерам.  

• Рекомендации по материалам для изучения.  

• Анонс курса по JavaScript и открытых уроков.  

• Призыв заполнить опрос и завершение занятия.