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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Что дальше

Сде­ла­ем под­бор­ку лин­те­ров для веб-разработки — HTML, JavaScript, CSS. Не про­пу­сти­те, если хоти­те отдать часть сво­их задач машине.

Текст:
Миха­ил Полянин

Редак­тор:
Мак­сим Ильяхов

Худож­ник:
Даня Бер­ков­ский

Кор­рек­тор:
Ири­на Михеева

Вёрст­ка:
Мария Дро­но­ва

Соц­се­ти:
Олег Веш­кур­цев