Что такое линтеры и форматтеры?

Привет, друзья!

Сегодня мы поговорим о двух очень популярных инструментах, которые используют фронтенд-инженеры в очень крупных компаниях. Речь идет о линтерах и форматтерах: Prettier и ESLint.

Prettier — очень популярный форматировщик кода, который поддерживает JavaScript, TypeScript, CSS, HTML и многие другие языки. Согласно реестру npm, пакет Prettier загружается 24 миллиона раз в неделю. У Prettier также есть расширения для Atom, Sublime, VS Code и многих других редакторов. В VS Code Расширение Prettier имеет 23,7 миллиона загрузок, две из которых — мои личные и рабочие компьютеры. Я очень рекомендую это. И согласно веб-сайту Prettier, они подтвердили, что эти технологические компании используют их продукт: Facebook, Dropbox, Spotify, PayPal, Discord и Yelp. На самом деле, наверное, все его используют.

Что касается ESLint, то это линтер и форматтер. Он может выполнять те же функции форматирования, что и Prettier, но может делать больше. В VS Code Расширение ESLint скачали более 21 миллиона раз. В реестре npm имеется более 26,5 миллионов загрузок в неделю. Судя по их веб-сайту, их продукт используют такие компании, как Netflix, Microsoft, Airbnb и Facebook.

И снова…. наверное все пользуются. А если нет, то они полностью используют какую-то форму линтера и форматтера. Если вы выучили один, вы, по сути, выучили их все.

Итак, давайте поговорим об этом. Давайте развивать ваши навыки и ваши знания. Позвольте мне убедить вас в том, почему это важно.

Что такое форматер? Что такое Линтер? И как Prettier и ESLint вписываются в эту картину?

Начнем с более простого: что такое форматтер?

Средство форматирования кода — это изящный небольшой инструмент, который форматирует или стилизует наш код, чтобы он был согласованным, удобочитаемым и удобным для сопровождения. Если вы решите использовать одинарные кавычки, например:

let name = 'Kyle';

Тогда в идеале вы должны следовать этому во всем остальном коде. Не переключайтесь между двойными и одинарными кавычками. Prettier, который, опять же, является средством форматирования, настроит код для нас, чтобы он оставался согласованным.

Еще одна большая проблема — интервал.

Это выглядит хорошо? Хотели бы вы это увидеть? Если бы в этих элементах действительно было содержание, было бы в миллиард раз сложнее понять, что происходит. Фактор удобочитаемости не был бы большим; следовательно, это также было бы трудно поддерживать.

Prettier автоматически исправит это для нас.

Это здорово. Он исправит ваш код, чтобы вы могли сосредоточиться на том, что действительно важно: кодировании. Кроме того, если вы работаете в команде, Prettier позаботится о том, чтобы все добавления кода были оформлены/отформатированы одинаково.

Ваш код будет выглядеть согласованным. Даже если у других членов команды разные стили кодирования, все они в конечном итоге будут отформатированы одинаково, что сделает код неинформативным.

Если вам интересно, как это работает технически, Prettier просто анализирует ваш код и переписывает его в соответствии с установленными правилами форматирования. (Да, вы можете настроить эти правила по своему усмотрению.)

Если вам нужна дополнительная информация об этом, посетите официальный сайт блога. И чтобы начать работу с Prettier, проще всего будет установить расширение на VS Code. Кроме того, вы также можете установить пакет npm в свой проект.

Теперь давайте перейдем к ESLint.

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

let x = 10;
      let y = 3;
let z = 2;
let sum = y + z;
console.log(sum)

ESLint скажет: «Эй, во второй строке впереди большое пространство. Это странно. Почини это." Или, может быть, он заметит эту пустую строку после того, как мы инициализируем z. ESLint скажет: «Эй, удалите случайную пустую строку».

Так что ESLint определенно может делать то, что делает Prettier. Но ESLint может гораздо больше. ESLint может исправить ваш код на основе правил, и их много.

Например, есть правило, которое гласит: «Удалить неиспользуемые переменные». Если бы это правило было включено, ESLint сказал бы: «x никогда не используется. Удалил это». Потому что посмотрите на фрагмент кода выше. Мы никогда не использовали x, так что это в основном пустая трата памяти и потраченного времени.

Вот еще один пример. Также есть правило, которое гласит: «Удалить операторы консоли». И я предполагаю, что цель этого заключается в том, что мы не хотим, чтобы консольные операторы в официальном коде переносились в официальную версию нашего приложения. Представьте, что вы используете Medium, проверяете консоль, и там просто случайные сообщения консоли, такие как «Кайл был здесь» или «в цикле for». В любом случае, если бы это правило было включено, ESLint сказал бы: «Привет. Удалите оператор консоли».

Итак, опять же, ESLint поможет вам исправить ваш код на основе установленных правил. Вы определенно можете настроить его в соответствии со своими предпочтениями. Если вам интересно посмотреть, какие существуют правила — просто для того, чтобы по-настоящему понять назначение ESLint — тогда ознакомьтесь с этим официальным списком правил, представленным в официальной документации ESLint.

Вместе эти два инструмента гарантируют, что ваш код будет выглядеть как можно лучше. Это делает наш код читабельным.

И вместо того, чтобы ваша команда или руководитель группы информировали вас о каждом отдельном соглашении по кодированию, которое у них есть, ESLint расскажет вам. Было так много раз, когда у меня был идеально работающий код, но ESLint скажет мне, что я не так, как они, — что совершенно справедливо. Чтобы создать продукт, мы все должны быть на одной волне. Мы должны писать код определенным образом, чтобы каждый разработчик в команде мог легко понять и поддерживать наш проект. Так что ESLint был отличным инструментом.

Это определенно потребовало некоторой корректировки. Иногда это может быть очень дотошно. Если он работает, разве это не должно быть хорошо? Я не знаю. Но что я знаю точно, так это то, что, читая предложения по исправлению моего кода, я многому учусь. Я узнаю, почему их предложение лучше, почему оно имеет больше смысла, и это помогает мне совершенствоваться как разработчику.

И на этом пост заканчивается!

Если вы хотите начать, я настоятельно рекомендую установить расширения ESLint и Prettier в VS Code. С ними намного проще иметь дело по сравнению с пакетами npm, и вы сможете сразу приступить к работе. К расширениям всегда прилагаются простые инструкции, которые помогут вам начать работу.

Здоровья вам.

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord.