Что такое линтер? Если коротко, линтер – это инструмент, который может улучшить ваш код. Нельзя сказать, что понятие «линтер» является уникальным для JavaScript. И все-таки, я бы сказал, что большинство людей, которые хотят изучить линтеры, интересуются именно теми, что ориентированы на JavaScript (или, если брать шире, на динамически типизированные языки).
В этой статье мы ответим на заглавный вопрос и не только. Мы начнем с определения, что такое «линтер». Вы сможете разобраться в том, что это такое и как оно появилась. Далее мы поговорим о преимуществах линтеров и перейдем к обсуждению различных типов проверок, которые они предлагают.
И напоследок мы продемонстрируем несколько примеров линтеров, которыми вы можете воспользоваться, и дадим несколько практических советов о том, как начать работу, и подытожим все сказанное.
Давайте приступим.
Что такое линтер? Краткий обзор
Давайте для начала дадим определение, что же такое линтер. Как вы уже прочитали во введении, линтер – это инструмент, который предназначен для того, чтобы улучшить ваш код. Но как он это делает? Ответ: путем анализа исходного кода в поисках проблем.
Термин «линтер» происходит о названия инструмента «lint», который анализировал исходный код на С. Специалист в области информатики Стивен К. Джонсон разработал эту утилиту в 1978 году, когда работал в Bell Labs.
И оригинальный инструмент lint, и подобные утилиты более ранних версий имели одну цель – анализ исходного кода с целью оптимизировать программу в процессе компиляции. Со временем в инструментах, подобных lint, стали появляться все больше различных других типов проверок и верификаций.
Однако, как мы уже упоминали во введении, линтеры не ограничиваются только компилируемыми языками. Напротив, можно сказать, что линтеры гораздо более полезны для интерпретируемых языков, так как не существует компилятора, который бы был способен выявляться ошибки в процессе разработки.
Преимущества линтеров
Вы только что узнали, что такое линтер, и вы даже знаете теперь, когда и кем он был изобретен. Вполне возможно, вы уже имеете хотя бы какое-то общее представление о том, что линтер может делать с вашим кодом. Но, если посмотреть с практической точки зрения, какие преимущества может дать этот инструмент? Вот некоторые из них:
- Меньше ошибок в готовых продуктах. Линтеры помогают выявлять и устранять различные технические проблемы в коде, например, «код с душком». Как результат, в производство уходит меньше недочетов.
- Понятный, удобный в сопровождении и более последовательный код. За счет соблюдения правил линтеры могут помочь сделать код более понятным и последовательным.
- Меньше споров по поводу оформления кода и эстетических решений во время рецензирования кода. Обсуждения во время рецензирования кода не должны быть наполнены бесконечными спорами о стилистических предпочтениях. Линтеры могут избавить вас от этого.
- Объективная оценка качества кода. Обсуждения качества кода зачастую приобретают субъективный характер. Линтеры позволяют выполнить объективную оценку качества кода с помощью измеримых критериев.
- Более безопасный и производительный код. Не все линтеры могут анализировать исходный код на предмет его производительности и безопасности, но некоторые все же могут.
- Больше разработчиков узнают, что такое качество кода. Линтеры могут помочь разработчикам (особенно новичкам) узнать, что такое качество кода.
В следующем разделе мы будем рассматривать некоторые типы проверок, которые предлагают линтеры. Когда вы его прочитаете, вы поймете, каким образом линтеры обеспечивают все эти преимущества.
Типы проверок, предлагаемые линтером
Как вы уже прочитали, оригинальный lint анализировал код с целью обеспечить оптимизацию программ в процессе компиляции, но со временем были выпущены усовершенствованные и более полные инструменты. На сегодняшний день существует огромное количество разных линтеров, которые предлагают огромное количество проверок. Давайте пробежимся по некоторым из них.
Синтаксические ошибки
Самый простой и одновременно самый важный тип проверок, который предлагает линтер, - это проверка синтаксических ошибок в JavaScript и других интерпретируемых языках. Разработчикам даже не стоит пытаться отправлять код в ветку main до тех пор, пока он не пройдет проверку синтаксиса.
Один из способов сделать это – использовать хук pre-commit, который не будет разрешать пользователям отправлять свой код, если проверки линтера показывает, что в коде есть проблемы.
Соблюдение стандартов оформления кода
Еще одна важная проверка, предлагаемая линтером, - это проверка соблюдения стандартов оформления кода. Некоторые люди могут не воспринимать ее всерьез как чисто эстетическую проблему, но они заблуждаются. Наличие единого выдержанного стиля оформления кода имеет практическую значимость с точки зрения когнитивной нагрузки, то есть чтения, понимания и сопровождения кода. Кодовую базу, которая имеет единый стиль оформления, будет легче разобрать, а разработчики, которые с ней работают, будут с меньшей вероятностью допускать ошибки.
Для этой цели – для проверки кодовых баз на соответствие стандартам оформления, существуют специальные линтеры. Некоторые инструменты довольно категоричны в этом плане, то есть они имеют заранее определенный набор правил и соглашений, который нельзя изменить. Впрочем, существуют также инструменты, которые можно легко настроить. Это позволяет пользователю адаптировать их к тому стилю оформления кода, который они предпочитают.
Потенциальные проблемы (или «код с душком»)
«Код с душком» - это признак того, что с вашим кодом что-то не так. В данном случае крайне полезным будет иметь инструмент, который бы автоматически выявлял эти признаки, и, таким образом, вы могли бы при необходимости разобраться с ними.
Например, многие люди, в том числе и я, расценивают длинные функции как тот самый «код с душком». Так что, вы можете настроить свой линтер таким образом, чтобы он мог находить функции, длина которых превышает заданное количество строк.
Другой часто упоминаемый пример «кода с душком» - это слишком сложный код. Но мы здесь говорим о сложности не в субъективном смысле, а в очень даже объективном. Цикломатическая сложность – это довольно полезная метрика кода, которая обозначает количество возможных ветвей выполнения внутри функции. Линтеры могут вычислять цикломатическую сложность ваших функций и отмечать те, которые превышают этот порог.
Проверки безопасности
И последнее, но от того не менее важное: безопасность, которая без всякого сомнения является самым важным аспектом современного приложения, особенно веб-приложения. Ошибетесь, и последствия могут быть катастрофическими не только в плане денег и репутации, но и в плане юридических проблем (возьмите к примеру Общий регламент ЕС о защите персональных данных или какие-нибудь другие регламенты).
К счастью, эта та область, в которой линтеры могут помочь, так как существуют инструменты, предлагающие необходимые проверки безопасности.
Статический анализ
Мы объяснили, что такое линтеры и в чем их польза. Кроме того, мы рассмотрели основные типы линтеров. Теперь вы готовы узнать об инструментах статического анализа, предназначенных для различных целей и языков программирования.
Однако, прежде чем мы перейдем к этому, давайте сделаем небольшое отступление и поговорим о том, что такое статический анализ, поскольку этот термин будет встречаться в следующем разделе, но мы так и не дали ему определения.
Итак, что же такое статический анализ? Статический анализ можно сравнить с отладкой перед запуском. Статический анализ заключается в использовании инструментов, которые анализируют исходный код в поисках ошибок, отсутствия соблюдения правил и соглашений или других потенциальных проблем.
В следующем разделе мы продемонстрировали примеры линтеров, распределенных по группам в зависимости от проверок, которые они выполняют. Линтеры, классифицированные как инструменты статического анализа, в основном относятся к первому и третьему типам линтеров, перечисленных в разделе выше.
Примеры линтеров
Давайте быстро пробежимся по некоторым примерам линтеров. Мы выделим примеры для разных языков программирования и сгруппируем их по типу проверки, который они выполняют. Имейте в виду, что некоторые инструменты могут выполнять не один тип проверки, так что они появляются в нескольких категориях.
Линтеры для статического анализа
- StandardJS для JavaScript
- PHPMD для PHP
- StyleCop для C#
Линтеры для проверки безопасности
- Gosec для Go
- Bandit для Python
- LGTM для нескольких языков, в том числе JavaScript, Python и C#
Линтеры для проверки соблюдения правил по оформлению кода
- Prettier для JavaScript
- Rubocop для Ruby
- StyleCop для C#
Линтеры в JavaScript: как приступить к работе
Прежде чем завершить эту статью, мы хотим поделиться с вами небольшим практическим руководством по тому, как начать работу по проверке кода на JavaScript. И раз мы говорим о JavaScript, нет ничего удивительного в том, что у вас есть куча инструментов на выбор. Ну а поскольку нам нужно выбрать только один, мы отдадим предпочтение ESLint.
Установка ESLint
Сначала – главное, установим линтер. ESLint устанавливается через npm, а это значит, что у вас должен быть установлен Node.js. Если у вас его нет, вам придется его скачать и установить.
Установив Node.js, мы готовы к тому, чтобы установить ESLInt через npm.
Для того, чтобы глобально установить инструмент, вам нужно выполнить следующую команду:
npm install eslint --globalОднако это не совсем то, что указано в их документации. Вероятнее всего, вам следует установить ESLint для каждого проекта отдельно. Так что, начните с того, что создайте каталог для вашего проекта:
mkdir eslint-sample-appЗатем перейдите в каталог через командную строку и выполните команду ниже, чтобы создать файл package.json (он понадобиться дальше).
npm initnpm задаст вам несколько вопросов. Просто нажимайте Enter, чтобы ответить (будут использоваться ответы по умолчанию). После этого вы можете добавить ESLint к своему проекту с помощью следующей команды:
npm install eslint --save-devЗапуск и настройка ESLint
Следующим шагом вы можете запустить ESLint, выполнив следующую команду:
npx eslint --initКогда вы запустите эту команду, ESLint спросит вам, для чего вы хотите его использовать. Варианты ответа: проверить только синтаксис; проверить синтаксис и найти проблемы; проверить синтаксис, найти проблемы и оформить код.
Давайте остановимся на последнем варианте. Чтобы выбрать вариант ответа, воспользуйтесь клавишами со стрелками, а, чтобы подтвердить его, нажмите Enter. Далее ESLint захочет узнать, какие типы модулей использует ваш проект.
Варианты ответа:
- Модули JavaScript
- Модули CommonJs
- Ни один из вариантов
Выберите «Модули JavaScript» и переходите дальше. Затем вам спросят, какой фреймворк использует ваш проект. Вариантов ответа снова будет три:
- React
- Vue
- Ни один из вариантов
Давайте в данном случае выберем «Ни один из вариантов». Следующий вопрос общий: использует ли ваш проект TypeScript? Чтобы выбрать «нет», нажмите N. Далее вас спросят где запускается ваш код, в браузере или в Node.
После чего ESLint спросит вас, какой способ определения стиля кода выбрать для вашего проекта. Он предложит вам три варианта: использовать общепринятое руководство по стилю, отвечать на вопросы о ваших предпочтениях в стиле или изучить ваши файлы .js. Выберите первый вариант. Затем вам будут предложены три стиля: AirBNB, Standard, Google и XO. В рамках данного пособия давайте выберем Google.
На следующем этапе ESLint спросит вас, какой формат файла конфигурации вы предпочитаете. Выберите YAML. И наконец, вас спросят, хотите ли вы загрузить выбранный стиль кода с помощью npm. Выберите «Да».
Проверка файла с помощью ESLint
После того, как загрузка завершится, вы сможете приступить к использованию ESLint и проверить с его помощью файл. Но для этого вам нужно найти файл, который вы будете проверять. Если у вас где-то есть файл .js, просто скопируйте его в каталог вашего проекта. Или вы можете клонировать этот репозиторий с одним файлом и использовать его для тестирования.
Для того, чтобы проверить файл, выполните следующую команду:
npx eslint path-to-your-file.jsВот какой результат я получил, запустив команду для файла greeting.js, который вы можете загрузить из репозитория на GitHub:
F:\demos\eslint-demo\greeter.js
2:3 error Missing JSDoc comment require-jsdoc
3:1 error This line has a length of 86. Maximum allowed is 80 max-len
10:4 error Unexpected 'this' no-invalid-this
? 3 problems (3 errors, 0 warnings)Как вы можете видеть, я получил три ошибки и ни одного предупреждения.
Что такое линтер? Отличный инструмент для вашего арсенала
В этой статье мы изучили саму идею линтеров. Теперь у вас есть четкое представление о том, что такое линтеры и для чего они нужны. Кроме того, вы узнали о разных типах линтеров и увидели примеры категорий, которые направлены на различные языки программирования.
Помимо всего прочего, вы теперь знаете, как приступить к работе с линтером для JavaScript – ESLint.
И что же дальше? Есть еще несколько вещей, которые вас стоит узнать, что продолжить работу:
- Отключение правил
- Подключение правил в качестве предупреждения или ошибки
- Интегрирование проверок в процесс сборки
- Расширение конфигурации
- Создание собственных правил
Разумеется, вы можете поэкспериментировать и с другими линтерами. То, что мы выбрали именно ESLint в данном руководстве, вовсе не означает, что вы должны на нем зацикливаться. Например, есть JShint – еще один популярный линтер для JavaScript.
И последнее, не забывайте, что проверки кода с помощью линтеров – это крайне важно, но это лишь еще одно оружие в вашем арсенале. Вы ни в коем случае не должны забывать об автоматизированном тестировании, рецензировании кода, рефакторинге и многих других подходах, методах и инструментах, которые есть в вашем распоряжении для нескончаемой борьбы с бардаком в вашей кодовой базе.
И раз мы упомянули все эти подходы, методы и инструменты, которые вы можете использовать для того, чтобы улучить свою кодовую базу, мы не можем не выделить сквозное тестирование, которое, к сожалению, довольно часто упускают из виду. И это просто какое-то безобразие. Правильно подобранный инструмент сквозного тестирования вполне может стать мощным союзников в схватке против энтропии кода.
