Руководство по ESLint для новичков

Нажмите здесь, чтобы опубликовать эту статью в LinkedIn »

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

Цель игры с линтингом - помочь вам развернуть лучший код в природе. При использовании вместе с тестированием он может иметь огромное значение в предотвращении глупых ошибок, которые могут нанести вред пользовательскому опыту. Поначалу сложно сориентироваться, поэтому давайте займемся чем-нибудь действительно высокоуровневым и сосредоточимся только на самых основных элементах, чтобы вы могли увидеть, как это работает. Надеюсь, после этого вы сможете продолжить обучение, используя те базовые знания, которые вы узнали сегодня.

Давайте погрузимся.

Представляем ESLint

ESLint описывает себя как Подключаемая утилита линтинга для JavaScript и JSX. Я думаю, что для этого поста нужно развить его.

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

Но что он делает?

Вы устанавливаете некоторые внутренние правила, и ESLint сообщит вам, если эти правила нарушены. Вы можете обеспечить соблюдение этих правил несколькими способами, например:

  • Вы можете запустить eslint your-filename.js в своем терминале
  • Вы можете прикрепить его к своей настройке сборки, такой как Webpack или Gulp. ESLint может остановить сборку, если возникнет проблема.
  • Вы можете настроить его в редакторе кода, чтобы он постоянно следил за файлами, над которыми вы работаете.
  • Вы можете настроить его в ловушке перед фиксацией, чтобы недопустимый код не мог быть добавлен в ваш репозиторий.

Некоторые из этих сценариев являются интенсивными, и вы здесь, чтобы изучить основы, поэтому давайте сделаем именно это и займемся третьим пунктом в этом списке. Мы собираемся узнать, как запустить ESLint с вашим редактором кода.

Начиная

Первое, что нам нужно сделать, это глобально установить ESLint на вашем компьютере с помощью NPM. Если у вас не установлен Node или NPM, сделайте это в первую очередь.

Откройте приложение терминала и запустите следующее:

npm install -g eslint

Эта команда в основном гласит: «Возьмите ESLint из NPM и сделайте команду eslint глобально доступной на моем компьютере».

Теперь, когда он установлен, нам нужно установить правила, и для этого у нас есть несколько вариантов.

Первый вариант - перейти к вашему проекту в терминале, запустив:

cd /the/path/to/your/project

Как только вы окажетесь там, запустите:

eslint --init

Это запустит мастер установки, который либо задаст вам вопросы о вашем проекте, либо просканирует ваш проект, либо позволит вам выбрать популярный шаблон. Это здорово, но я думаю, что со вторым вариантом мы узнаем больше.

Этот вариант заключается в добавлении файла .eslintrc в корень вашего проекта и его заполнении.

Файл .eslintrc или .eslintrc.js - это файл определения ваших правил линтинга. Это прекрасно работает, поскольку сохраняет eslint команды терминала в чистоте, а также создает полностью прозрачную настройку для вас и вашей команды, что действительно важно, когда вы применяете стиль и правила кодирования.

Мы уже в каталоге нашего проекта с помощью приведенной выше команды, поэтому давайте создадим .eslintrc файл:

touch .eslintrc

Если вы запускали мастер инициализации, вам нужно очистить сгенерированный файл, выполнив следующую команду:

rm .eslintrc.js

После создания файла .eslintrc откройте его, и мы добавим к нему несколько основных правил. Начнем с добавления одного из моих любимых. Добавьте в свой файл следующее:

{
    "rules": {
        "no-unused-vars": "warn"
    }
}

Итак, мы добавили основное правило, которое гласит: «Если есть неиспользуемые переменные, вывести предупреждение». Это отличное правило для начала, которое стоит добавить в свою кодовую базу. Вы можете сэкономить тонну в производительности и размере файла , удалив ссылки на неиспользуемые переменные в вашем коде.

Затем давайте добавим еще одно правило, прежде чем мы перейдем к интеграции с нашим редактором. Добавьте в наш .eslintrc файл в разделе «правила» следующее:

"quotes": [2, "single", { "allowTemplateLiterals": true }]

Это правило применяет политику одинарных кавычек к вашему JavaScript, если вы не находитесь внутри литерала шаблона. Довольно аккуратно, да?

Для справки, вот как теперь должен выглядеть ваш .eslintrc файл:

{
    "rules": {
        "no-unused-vars": "warn",
        "quotes": [2, "single", { "allowTemplateLiterals": true }]    
    }
}

Интеграция нашего редактора

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

Теперь, когда ваш редактор настроен, давайте проверим все это. Создайте файл с именем hello.js в корне вашего проекта.

Добавьте следующий код в hello.js:

module.exports = function() {
 
    var hello = "Hello, world";
    var goodBye = "Goodbye, pal";
 
    return hello; 
};

Теперь, когда вы сохраните, ваш редактор должен выдать вам две ошибки и предупреждение. Это потому, что оба наших правила, которые мы установили, были нарушены:

  • Наши строки заключены в двойные кавычки
  • Переменная goodBye никогда не использовалась в функции

Это было довольно просто, правда? Давайте исправим код, чтобы завершить это небольшое руководство.

Замените содержимое hello.js следующим:

module.exports = function() {
 
    var hello = 'Hello, world';
 
    return hello; 
};

При сохранении ошибки и предупреждения должны исчезнуть, потому что теперь ваш код полностью разложен! 🎉

Подведение итогов

Вы ушли от «Что это за ESLint?» на «У меня довольно хорошее представление о том, что сейчас», и это здорово!

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

Вы также можете вернуться, удалить свой .eslintrc файл и снова запустить команду
eslint --init, теперь, когда вы лучше понимаете, что происходит.

Мир линтинга - это ваша устрица!

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

Удачного линтинга!