easy

Линтер — это чистый код для ленивых

Зачем нужен и как работает расчёсывальщик кода.

Ситуация: вы с коллегами параллельно работаете над разными частями одного кода. При очередном объединении исходников вы замечаете, что они пишут код не так, как вы: его сложно читать, у него сложный синтаксис и странно объявлены функции. Коллеги то же самое говорят про ваш код. В результате все правят код друг друга, приводят его к общему виду, а работа идёт долго.

👉 Линтер — это программа, которая автоматизирует всю эту возню и сама «причёсывает» код по определённым правилам. Даёшь ей чумазый и неуклюжий код, она чистит на уровне каких-то простых правил. 

В чём может быть проблема, когда программистов много

Когда вы пишете код самостоятельно и для себя, его можно писать как угодно — в одну строчку без пробелов или отделяя функции друг от друга тремя пустыми строками. Главное, что вы понимаете, что здесь написано.

Как только вы начинаете участвовать с кем-то в совместном проекте, нужно установить общие правила написания кода. Сюда может относиться:

  • как форматировать код;
  • ставить табы или пробелы;
  • если пробелы — сколько штук;
  • можно ли использовать числа в формулах или нужны только константы и переменные;
  • можно ли использовать переменные из одной буквы или имя переменной обязательно должно быть со смыслом;
  • как объявлять классы и работать с методами и т. д. 

Чтобы эти правила применялись и работали, за ними кто-то должен следить. Можно выделить отдельного программиста, можно проверять код друг друга по очереди, а можно поручить это линтеру.

Что делает линтер

Линтер на основании заданных правил перерабатывает код за секунду:

  • расставляет нужные табы и пробелы;
  • проставляет точки с запятой и скобки в нужных местах;
  • в HTML делает красивую вложенную структуру тегов и выносит стили из тегов в отдельный блок в <style>;
  • в других языках может проставить большие буквы в названиях функций, чтобы было удобнее читать;
  • убирает лишние пробелы и пустые строки.

Линтер проверил код и нашёл лишние пробелы и много слишком длинных строк
Линтер проверил код и нашёл лишние пробелы и много слишком длинных строк

Умные линтеры

Есть линтеры попроще и поумнее. Умные могут не только делать код красивым внешне, но и проверять логику работы программы. Например, линтер может найти все переменные, которые объявлены, занимают память, но ни разу не используются. Или он может заменить одни стандартные функции на другие, если в компании есть такие правила. 

Отдельные умники умеют находить потенциальные утечки памяти, циклические зависимости, неполные вызовы и коряво объявленные классы. А ещё — проверять соответствия типов, связность классов, количественные параметры вызова функции и передачи аргументов, цикломатическую сложность и так далее. Но если вам нужны все эти проверки, то вы уже и так знаете про то, как устроены линтеры и для чего они нужны.

Линтер нашёл стилистическую ошибку в CSS
Линтер нашёл стилистическую ошибку в CSS — нужно поменять эти команды местами, потому что в компании принято сначала описывать верхние отступы, а потом уже боковые

Один линтер — один язык

Есть много разных линтеров для каждого языка программирования. Они отличаются по глубине настройки и возможностям анализа кода — как глубоко они могут его анализировать. Например, для JavaScript есть JSLint, JSHint и ESlint — это всё линтеры, которые делают плюс-минус одно и то же и различаются в деталях.

Иногда программисты используют несколько линтеров — один смотрит синтаксис, второй следит за памятью и безопасностью, а в третьем мощная система правил автозамены кода.

Что дальше

Сделаем подборку линтеров для веб-разработки — HTML, JavaScript, CSS. Не пропустите, если хотите отдать часть своих задач машине. А ещё у нас появилась новая статья по этой теме — «Линтеры для начинающих», почитайте, там тоже интересно.

Текст

Михаил Полянин


Редактор

Максим Ильяхов


Художник

Даня Берковский


Корректор

Ирина Михеева


Вёрстка

Мария Дронова


Соцсети

Олег Вешкурцев

Вы фронтендер? Гляньте сюда ↓
У нас есть курсы по прокачке навыков до уровня middle и далее. Начать можно бесплатно. Посмотрите, интересно ли вам это.
Начать бесплатно
Вы фронтендер? Гляньте сюда ↓ Вы фронтендер? Гляньте сюда ↓ Вы фронтендер? Гляньте сюда ↓ Вы фронтендер? Гляньте сюда ↓
Получите ИТ-профессию
В «Яндекс Практикуме» можно стать разработчиком, тестировщиком, аналитиком и менеджером цифровых продуктов. Первая часть обучения всегда бесплатная, чтобы попробовать и найти то, что вам по душе. Дальше — программы трудоустройства.
Начать карьеру в ИТ
Получите ИТ-профессию Получите ИТ-профессию Получите ИТ-профессию Получите ИТ-профессию
Еще по теме
Как устроены онлайн-кинотеатры: техническая сторона
Как устроены онлайн-кинотеатры: техническая сторона

Главное из подкаста «Запуск завтра».

easy
Как подготовить резюме для крупной компании?

Инструкция новичкам от разработчика из Яндекс.Практикума.

easy
Двоичное счисление на пальцах

Все знают, что компьютеры состоят из единиц и нулей. Но что это значит на самом деле?

easy
Как работает приложение Maps.me
Как работает приложение Maps.me

Разговор с создателем технологии

easy
Вместо офиса: как отказаться от решений Google и Microsoft на случай сами знаете чего

Продолжение саги про цифровой суверенитет

easy
Пятничная дурь: перемешиваем буквы в словах с помощью JavaScript
Пятничная дурь: перемешиваем буквы в словах с помощью JavaScript

Иондга это рабатеот, идгона нет

easy
Что такое отжиг и зачем его имитировать
Что такое отжиг и зачем его имитировать

Рассказываем про алгоритм, на котором учат половину нейросетей

hard
Зачем нужен нормализатор CSS
Зачем нужен нормализатор CSS

Хорошая практика веб-разработчиков.

medium
ООП: зачем нужны абстракции и классы
Зачем нужны абстракции и интерфейсы

И что это вообще такое?

hard
easy